useScript for CSP compatibility

[vejja]

Hi @Baroshem

One of the most difficult thing to get working with CSP are external, 3rd-party scripts (Google Analytics, Stripe, Cloudflare Turnstile, etc.).
We have examples in our documentation about how to get it done with useHead but it remains complex in real life.

With Nuxt 3.9, comes a new useScript utility under --experimental flag, which is absolutely fantastic and exactly what we need as a universal, ready-to-use solution.

There is a great documentation section on unhead that explains very clearly why this is the right approach here

There is one small limitation though which relates to how inline event handlers are blocked by CSP. I opened up a discussion there at unjs/unhead#323.

Let me know what you think and if you have additional ideas that would benefit us !

[Baroshem]

Hey @vejja

Thank you so much for this discussion!

I do really think that having an example of usage in our docs for useScript would be really useful.

But if I understand correctly, we are waiting for the resolution of the discussion, am I correct?

In general, I will be more than happy to have docs about it in NuxtSecurity documentation so just waiting for green light from you :)

[vejja]

Yes you’re correct : let’s see if @harlan-zw has an idea to make CSP easier with useScript

[vejja]

Hey @Baroshem very good news:
@harlan-zw has just released a fix in unhead@1.8.15 that allows full CSP compatibility for 3rd-party scripts 🚀🚀🚀
Let's wait for the next release of Nuxt that will incorporate this patch, and I'll propose a re-write of our docs that will make things way simpler for everybody
We are only one very small step away from allowing everyone to deploy any Nuxt application with full CSP protection, this is great !

[Baroshem]

This is indeed a great news! Thanks @vejja for that! You are a MVP ⚽️

[vejja]

Closing - this is now part of Nuxt : see #403