I'm trying to get SCP working with hashes.
I'm inserting the hashes both in the header (Content-Security-Policy) and in the html page.
When I disable CSP and only use SRI, everything works. But when I add CSP policy for script-src, I get an error in Chrome:
Refused to execute inline script because it violates the following Content Security Policy directive: "script-src 'sha256-cvJx6uIB/hezB9Id6V6UQb10F5C0UObHct9tTMRui5U=' 'sha256-UUbtebSGy54c3N14FM0irnjnDOsw+ga0zZoWzxIbyeY=' 'sha256-8yR2yvIzNS0+QPsGcVGJVn5d06RPcs8TV6Ny3279nf8=' 'sha256-QO3bR06NL/j72WhWlHyvu47i/SrvRDaWHA7U8HP6Two=' 'sha256-k4UFrjnb0AyNfASCTlDeGuBCoCJ4IL/B0rQP2DomUAc=' 'sha256-v3bKmDDl6mxqq2F4tCjHylp8pT2P0NdUP3MPra29T5k=' 'sha256-jkMEwVZP9kW4VP5jLYBwU62KvWrWpZ6fuHK/DNp4ZE8=' 'sha256-o5loTPhKNiVqKQKXvwLE8I9APGislZX/iMhTEezzVQc='". Either the 'unsafe-inline' keyword, a hash ('sha256-cIGnnX7yXorLi3D0wmUGgGkBybL4BvM1zE+hvY7xUOU='), or a nonce ('nonce-...') is required to enable inline execution.
So I'm trying to get guess what's wrong here as either it is related to some order in which hashes are listed in the policy or something else I'm missing.
My HTML file looks like this :
<!DOCTYPE html><html lang="fr"><head>
<meta charset="utf-8">
<link rel="icon" href="/favicon.png" integrity="sha256-UUbtebSGy54c3N14FM0irnjnDOsw+ga0zZoWzxIbyeY=" crossorigin="anonymous">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="modulepreload" href="/build/_app/immutable/entry/start.DR8Pycmd.js" integrity="sha256-aIRMijzrzWGVYJTfjmEtAPaEm24jzcHHQiNkgs3Guas=" crossorigin="anonymous">
<link rel="modulepreload" href="/build/_app/immutable/chunks/entry.DSJM-aT6.js" integrity="sha256-jde0N5ZZaY8e82ieuEEda3tRNs9LjMvb4OtiYW+tuCE=" crossorigin="anonymous">
<link rel="modulepreload" href="/build/_app/immutable/chunks/scheduler.C9xG8wYf.js" integrity="sha256-k4UFrjnb0AyNfASCTlDeGuBCoCJ4IL/B0rQP2DomUAc=" crossorigin="anonymous">
<link rel="modulepreload" href="/build/_app/immutable/chunks/index.U-Bm33l8.js" integrity="sha256-v3bKmDDl6mxqq2F4tCjHylp8pT2P0NdUP3MPra29T5k=" crossorigin="anonymous">
<link rel="modulepreload" href="/build/_app/immutable/entry/app.Cq3Hk0Ou.js" integrity="sha256-ic0wynRWQ14Wc/ZYDneyT3gneELpoerSpJj6lGlOnQc=" crossorigin="anonymous">
<link rel="modulepreload" href="/build/_app/immutable/chunks/index.5DIR6ws4.js" integrity="sha256-o5loTPhKNiVqKQKXvwLE8I9APGislZX/iMhTEezzVQc=" crossorigin="anonymous">
</head>
<body data-sveltekit-preload-data="hover" data-theme="skeleton">
<div style="display: contents" class="h-full overflow-hidden">
<script integrity="sha256-ibdP2bv/vvTnwBU46XvO8XtDmRj/aNmtfo80zhnD5yU=" crossorigin="anonymous">
{
__sveltekit_1myy8zg = {
base: ""
};
const element = document.currentScript.parentElement;
Promise.all([
import("/build/_app/immutable/entry/start.DR8Pycmd.js"),
import("/build/_app/immutable/entry/app.Cq3Hk0Ou.js")
]).then(([kit, app]) => {
kit.start(app, element);
});
}
</script>
</div>
</body></html>
And my header looks like this:
Content-Security-Policy:
base-uri 'self';connect-src 'self';default-src 'self';form-action 'self';img-src 'self';media-src 'self';object-src 'none';script-src 'sha256-cvJx6uIB/hezB9Id6V6UQb10F5C0UObHct9tTMRui5U=' 'sha256-UUbtebSGy54c3N14FM0irnjnDOsw+ga0zZoWzxIbyeY=' 'sha256-8yR2yvIzNS0+QPsGcVGJVn5d06RPcs8TV6Ny3279nf8=' 'sha256-QO3bR06NL/j72WhWlHyvu47i/SrvRDaWHA7U8HP6Two=' 'sha256-k4UFrjnb0AyNfASCTlDeGuBCoCJ4IL/B0rQP2DomUAc=' 'sha256-v3bKmDDl6mxqq2F4tCjHylp8pT2P0NdUP3MPra29T5k=' 'sha256-jkMEwVZP9kW4VP5jLYBwU62KvWrWpZ6fuHK/DNp4ZE8=' 'sha256-o5loTPhKNiVqKQKXvwLE8I9APGislZX/iMhTEezzVQc=';style-src 'unsafe-inline'