N
Nuxt•4d ago
Just Simeon

Nuxt Icon causing CSP errors

Heya, I have a pretty strict CSP but I am getting style-src errors caused by Nuxt Icon: 
Refused to apply inline style because it violates the following Content Security Policy directive: "style-src 'self' 'nonce-GJ94fPFA2BCkEPaySFjRiT7z'". Either the 'unsafe-inline' keyword, a hash ('sha256-dPYPS1TMcPZggmgjSOaAH5OtT/S4bQBvI0YO4LbXBp8='), or a nonce ('nonce-...') is required to enable inline execution.
Refused to apply inline style because it violates the following Content Security Policy directive: "style-src 'self' 'nonce-GJ94fPFA2BCkEPaySFjRiT7z'". Either the 'unsafe-inline' keyword, a hash ('sha256-dPYPS1TMcPZggmgjSOaAH5OtT/S4bQBvI0YO4LbXBp8='), or a nonce ('nonce-...') is required to enable inline execution.
Looking at the causing code its caused by a component called "NuxtIconCss" which has a function to append something to the document head
2 Replies
kapa.ai
kapa.ai•4d ago
Hi @Just Simeon. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- I understand you're experiencing CSP errors with Nuxt Icon due to inline styles being blocked by your Content Security Policy. This is a known issue with Nuxt Icon and similar components that dynamically inject styles. The error occurs because Nuxt Icon is adding inline styles to the document head without respecting your CSP nonce. Based on the knowledge sources, there are a few approaches to solve this: 1. Add the crossorigin attribute to stylesheets: Recent Nuxt updates have added support for the crossorigin attribute on stylesheet links in the HTML renderer, which can help with CSP issues GitHub PR #29138. 2. Use the nonce attribute: Nuxt Image (which follows similar patterns to Nuxt Icon) supports passing a nonce attribute to components: 
   <template>
     <NuxtIcon name="your-icon" :nonce="nonce" />
   </template>

   <script setup lang="ts">
   // useNonce is typically provided by security modules like nuxt-security
   const nonce = useNonce()
   </script>
   
   <template>
     <NuxtIcon name="your-icon" :nonce="nonce" />
   </template>

   <script setup lang="ts">
   // useNonce is typically provided by security modules like nuxt-security
   const nonce = useNonce()
   </script>
This approach is documented for NuxtImg in the Nuxt Image documentation, and may work similarly for NuxtIcon. 3. Use client-only wrapper: In some cases, wrapping problematic components in a <client-only> tag can help avoid SSR-related CSP issues, as shown in one of the examples with Leaflet: 
   <client-only>
     <NuxtIcon name="your-icon" />
   </client-only>
   
   <client-only>
     <NuxtIcon name="your-icon" />
   </client-only>
4. Adjust your CSP policy: While not ideal from a security perspective, you could add the 'unsafe-inline' directive to your style-src CSP policy, or add the specific hash mentioned in your error message. If you're using the nuxt-security module, make sure it's properly configured to provide nonces for inline styles. The module should be able to help manage CSP headers and nonces automatically. Remember that the most secure approach is to use nonces rather than allowing all inline styles with 'unsafe-inline'. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------
kapa.ai
kapa.ai•4d ago
<@294593079812292609> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

Did you find this page helpful?