CSP errors in production
DavidPetrasek opened this issue · comments
I use
{% block javascripts %}
{{ vite_entry_script_tags('global', {attr: {nonce: csp_nonce}}) }}
{% endblock %}
and it works for all of my <script> tags. But when on production, the CSP blocks some of vite's own scripts. The error:
Refused to execute inline script because it violates the following Content Security Policy directive: "script-src 'strict-dynamic' 'nonce-XktWXbolcLTNY5qxqQDvKOWbJj7vL5drDyBvdb3HMKU'". Either the 'unsafe-inline' keyword, a hash ('sha256-BoFUHKsYhJ9tbsHugtNQCmnkBbZ11pcW6kZguu+T+EU='), or a nonce ('nonce-...') is required to enable inline execution.
and these are the blocked scripts on the page:
<!-- DETECT_MODERN_BROWSER_CODE --><script type="module">try{import.meta.url;import("_").catch(()=>1);}catch(e){}window.__vite_is_modern_browser=true;</script>
<!-- DYNAMIC_FALLBACK_INLINE_CODE --><script type="module">
(function() {
if (window.__vite_is_modern_browser) return;
console.warn("vite: loading legacy build because dynamic import or import.meta.url is unsupported, syntax error above should be ignored");
var legacyPolyfill = document.getElementById("vite-legacy-polyfill")
var script = document.createElement("script");
script.src = legacyPolyfill.src;
script.onload = function() {
document.querySelectorAll("script.vite-legacy-entry").forEach(function(elt) {
System.import(elt.getAttribute("data-src"));
});
};
document.body.appendChild(script);
})();
</script>
Not sure if this post should be moved here: https://github.com/vitejs/vite/issues
I think it's the good place for the issue...
is there any trouble if you disable your vite-legacy plugin ?
I don't use that plugin, because in my vite.config.js I have:
plugins: [
/* react(), // if you're using React */
symfonyPlugin(),
],
So, should I move this post to the main repo?
oh strange, can you give me more details:
your vite.config.js
,
vite and vite-plugin-symfony and pentatrion/vite-bundle versions.
the issue come from here not from the main repo who calculated hashes for his code fragments (not me)
https://github.com/vitejs/vite/blob/49674b54fac4378faec8580b0a13e29e21d7900d/packages/plugin-legacy/src/index.ts#L806
pentatrion/vite-bundle v3.1.2
vite-plugin-symfony@0.7.5
└── vite@4.1.1
vite.config.js
import { defineConfig } from "vite";
import symfonyPlugin from "vite-plugin-symfony";
import fs from "fs";
/* if you're using React */
// import react from '@vitejs/plugin-react';
export default defineConfig( ({ command, mode }) =>
{
const DIR_ASSETS_JS = './assets/js/';
return
{
plugins: [
/* react(), // if you're using React */
symfonyPlugin(),
],
build:
{
rollupOptions:
{
input:
{
global: DIR_ASSETS_JS + 'global.js',
... list of other inputs ...
}
},
},
server:
{
https:
{
key: fs.readFileSync('certs/vite_dev/vite.key.pem'),
cert: fs.readFileSync('certs/vite_dev/vite.crt.pem'),
},
cors: true
}
}});
first there was a mistake because the inline scripts are used only with vite legacy plugin. with this patch your issue is solved if you don't use this plugin. after I will have to add nonce for this scripts.
can you confirm it's ok
Yes, I confirm it is ok now. Thank you.