CSP/Nonce Support?

[rmincling]

Hi,

We're currently coming up against an issue when we activate a Content Security Policy with the style-src directive set. The styles related to this package get blocked as a consequence. Below is the main parts of the console error we get.

Refused to apply inline style because it violates the following Content Security Policy directive: "style-src 'self' .....'".
Either the 'unsafe-inline' keyword, a hash ....), or a nonce ('nonce-...') is required to enable inline execution.

styleInject  -  node_modules/react-zoom-pan-pinch/dist/index.esm.js:2034

We've tried updating to latest version (3.1.0) with no change. Can anyone give advice how to get around this? Without disabling CSP.

Regards,

[ijsje71]

We are running into a similar issue. Looking at the minified code, react-zoom-pan-pinch injects code into the minified JS file without any place for a nonce to be added. Looking deeper into the dist code of this repo, it seems that this is caused by style-inject, which is used by rollup-plugin-postcss. This library injects css into the minified JS file, without adding a nonce tag to it. The library has not been updated in 6 years, but you can disable inject in the rollup config in the postcss plugin.

@prc5 is setting the postcss configuration to inject: false a breaking change? It would remove the style injection and make the library CSP compliant.

[rmincling]

@ijsje71 thanks for the reply

Can you give an example where that inject: false goes? As we don't use rollup-plugin-postcss in our webpack config, so not entirely sure where to apply your suggestion.

Regards,

[ijsje71]

That's because this repo has rollup-plugin-postcss as a dependency. The inject: false option needs to be set in the rollup.config.js of this repository.

[rmincling]

Apologies, gotcha now :)

[alexmartynenkozoomin]

Any progress on this?