Support for nonce or hash value [enhancment]

[rahul37865]

Recently I added Nuxt Security in a Project where i am fetching data from an API URL http://127.0.0.1:8000/api/blog/post/27
i am implementing Nuxt Image Module and While displaying image
<NuxtImg crossorigin="anonymous" :src="postDetail.post_image" />
It throws an error (only on Firefox, doesn't throw error on chrome and edge)

Content-Security-Policy: The page’s settings blocked the loading of a resource at inline (“script-src-attr”).
Source: this.setAttribute('data-error', 1)

which i fixed using below settings

security: {
  headers: {
    contentSecurityPolicy: {
      'img-src': ["'self'", 'data:', 'http://127.0.0.1:8000'],
      'script-src-attr': ["'unsafe-inline'"],        // Added this
    },
  },
},

But it is considered a security risk, as it can open the door to XSS attacks. It's generally recommended to avoid using 'unsafe-inline' whenever possible. I discussed this matter with Nuxt Security and they recommend to use nonce or hash value. They also said that unfortunately Nuxt Image doesnt support nonce or hash so there is no secure way. You can find the discussion here Baroshem/nuxt-security#218

[trijpstra-fourlights]

I've created a reference implementation on the nonce propagation here https://github.com/trijpstra-fourlights/nuxt-image/tree/feat/add-nonce-support

I'll test a bit more with this and create a PR for it when it's good enough.

Hash support is not really applicable here AFAICT, as it requires computing a hash for the known script and whitelisting that in your CSP.

[Baroshem]

I am really looking forward to this feature as it would enable working well with Nuxt Image & Nuxt Security :)

[Baroshem]

Hey @pi0 could you take a look at it? It would be really useful to have this feature. Thomas is doing an amazing work in the development of Nuxt Security features and now prepared a feature for Nuxt Image that would help not only in the case of Nuxt security, but also for other projects as well :)

[rahul37865]

Yes Team Please do check and if everything looks good then proceed to merge.

[Baroshem]

@pi0

I think this issue could be closed as the PR was merged :)

[dargmuesli]

I don't think that this issue is resolved fully yet. The this.setAttribute('data-error', 1) inline script is still inline onerror and results in the given error. It appears to me that the nonce is currently only added to the preload header.

[P4sca1]

Specifzing the nonce attribute on <NuxtImg> will produce the following markup:

<img onError="this.setAttribute('data-error', 1)" nonce="foo">

This will not work, even when the page specifies script-src-attr: 'nonce-foo'. It seems like nonces are not supported for inline event handlers at all. Generally, inline event handlers are considered bad practice and are hard to use with CSP.
.addEventListener() should be used instead.

Note that you only see a CSP error, when the onerror script actually gets executed, which is why some may thought that their CSP is working correctly. To test, specify an invalid image source.

[P4sca1]

Note that the error only occurs during SSR. The reason is the following line:

image/src/runtime/components/nuxt-img.ts

Line 153 in 2b6a877

...import.meta.server ? { onerror: 'this.setAttribute(\'data-error\', 1)' } : {},

[P4sca1]

A workaround could be to attach the event listener in the onMounted hook using a ref. However, some error event may be missed in that case due to timing issues. Maybe setting the image source could be delayed until after the event listener is attached in the onMounted hook.

[surgiie]

Looking for this support, any plans to address soon? Currently having issues when trying to implement a CSP policy:

Content-Security-Policy: The page’s settings blocked an event handler (script-src-attr) from being executed because it violates the following directive: “script-src-attr 'self'” Source: this.setAttribute('data-error', 1)