topic Re: Async CSS and 'unsafe-inline' in CMS Development

Async CSS and 'unsafe-inline'

paulofdaniel — Tue, 18 Mar 2025 14:29:49 GMT

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:

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!

Re: Async CSS and 'unsafe-inline'

GRajput — Wed, 19 Mar 2025 10:22:10 GMT

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!

Re: Async CSS and 'unsafe-inline'

paulofdaniel — Wed, 19 Mar 2025 15:45:22 GMT

Hello @GRajput!

I am listing all instances of require_css to initiate changes.

Thanks a lot!