Async CSS and 'unsafe-inline'

[paulofdaniel]

Hi, everyone!

I need to remove 'unsafe-inline' from the Content Security Policy (CSP) and enable Nonce. Right now, I’m searching for all inline scripts inside my templates and modules. While doing this, I discovered that when I import my CSS files with async: true:

{{ require_css(get_asset_url('/css/style.css'), {async: true}) }}

the generated code is:

<link class="hs-async-css" rel="stylesheet" href="[...]css/style.min.css" as="style" onload="this.onload=null;this.rel='stylesheet'">

The problem is that the onload attribute does not work without 'unsafe-inline' in CSP, even with Nonce enabled. I could manually update all CSS imports, but since I have hundreds of modules and templates, I’m looking for a better solution.

Does anyone have a workaround for this? Thanks a lot!

[GRajput · Accepted solution]

Hi @paulofdaniel 

If you’ve removed 'unsafe-inline' from your Content Security Policy (CSP) and enabled Nonce, you may notice that some inline scripts, like the onload attribute in your CSS <link> tags, stop working. This happens because CSP blocks inline scripts unless explicitly allowed.

• The onload attribute in a <link> tag is treated as inline JavaScript, which gets blocked when 'unsafe-inline' is removed from your CSP.
• Even if you use a Nonce, it won’t work because Nonce applies only to <script> and <style> tags, not attributes like onload.
• Instead of using onload, a better approach is to load CSS dynamically using JavaScript. This keeps your CSP secure while ensuring styles are applied correctly.
• Instead of using require_css with async: true, switch to require_js to load a global script that handles CSS loading.

I hope this will help you out. Please mark it as Solution Accepted and upvote to help another Community member.
Thanks!

[paulofdaniel]

Hello @GRajput!

I am listing all instances of require_css to initiate changes.

Thanks a lot!