# Async CSS and 'unsafe-inline'

**URL:** <https://community.hubspot.com/t/async-css-and-unsafe-inline/128171>\
**Category:** CMS Development\
**Tags:** css, javascript\
**Created:** [March 18, 2025, 2:29pm UTC](https://community.hubspot.com/t/async-css-and-unsafe-inline/128171 "2025-03-18T14:29:49Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![paulofdaniel](https://avatars.discourse-cdn.com/v4/letter/p/d78d45/32.png) [@paulofdaniel](https://community.hubspot.com/u/paulofdaniel)\
**Post date:** [March 18, 2025, 2:29pm UTC](https://community.hubspot.com/t/async-css-and-unsafe-inline/128171/1 "2025-03-18T14:29:49Z")

</div>

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!

---

<div class="post-metadata">

**Author:** ![GRajput](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/grajput/32/102020_2.png) [@GRajput](https://community.hubspot.com/u/GRajput)\
**Post date:** [March 19, 2025, 10:22am UTC](https://community.hubspot.com/t/async-css-and-unsafe-inline/128171/2 "2025-03-19T10:22:10Z")

</div>

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!

---

<div class="post-metadata">

**Author:** ![paulofdaniel](https://avatars.discourse-cdn.com/v4/letter/p/d78d45/32.png) [@paulofdaniel](https://community.hubspot.com/u/paulofdaniel)\
**Post date:** [March 19, 2025, 3:45pm UTC](https://community.hubspot.com/t/async-css-and-unsafe-inline/128171/3 "2025-03-19T15:45:22Z")

</div>

Hello @GRajput!

I am listing all instances of **require\_css** to initiate changes.

Thanks a lot!