Usage of nonce in useLoadScript possible ?

[iska31]

Integrating third party consent tool : https://shopify.dev/docs/storefronts/headless/hydrogen/analytics/consent-3p#step-4-sync-your-third-party-settings-with-shopify, I have to use the util useLoadScript but it doesn't seem like caring of the nonce provided by https://shopify.dev/docs/storefronts/headless/hydrogen/content-security-policy#step-1-set-up-a-content-security-policy, and I don't see how to include it in this util.

Any idea ? I would like to avoid to expand my csp by hardcoding origin.

[frandiox]

For now, can you try with something like useLoadScript('...', {attributes: { nonce: useNonce() } })? The useNonce() hook should give you the same nonce.

Otherwise, if you are able to use the <Script> component instead of useLoadScript, it should inject the nonce automatically.

---

@blittle @wizardlyhel Should we wrap useLoadScript from Hydrogen-React and inject the nonce automatically in Hydrogen? I see this hook is used for analytics/customer-privacy and it's not injecting nonce at the moment.

[wizardlyhel]

oh yea - we should totally re-export useLoadSCript with nonce. The reason why the customer privacy one works is because we auto supply cdn.shopify.com in the csp for default-src

[frandiox]

Thinking more about this, I think it's actually not possible to wrap useLoadScript. The script is added in useEffect, so only in the browser. The nonce is not available in the browser for security reasons.

I guess the only way is with a CSP hash. We should reflect this in the docs... or update them to use the <Script> component, which can be server rendererd 🤔

[iska31]

So far using useLoadScript, CSP hash and adding cdn.shopify to the scriptSrc (otherwise it blocks the useAnalytics's subscribe flow) does the job. Thank you all. But some details within the documentation would be great to save some time.