Menu
I have read several articles about implementing Content-Security-Policy for website, but I still can't figure out how to put it together correctly for my site. Sorry if there is another thread about this, but so far I haven't found one that would help me solving my situation.
I have plain HTML file and I use my own JavaScript to do some rendering on HTML canvas based on user's inpupt.
I have .js files in "js" directory. Currently I am running my website in sub-directory, so I use relative and not absolute path to include them:
<script type="text/javascript" src="js/wbsc-eval.js"></script>
<script type="text/javascript" src="js/wbsc-global.js"></script>
<script type="text/javascript" src="js/wbsc-input.js"></script>
<script type="text/javascript" src="js/wbsc-output.js"></script>
This is my CSP header:
<meta http-equiv="Content-Security-Policy" content="default-src 'none'; child-src 'none'; object-src 'none'; style-src 'self' https://stackpath.bootstrapcdn.com; script-src 'self';">
It allows my own CSS + the Bootstrap one, but my JS is blocked:
Refused to execute inline event handler because it violates the following Content Security Policy directive: "script-src 'self'". Either the 'unsafe-inline' keyword, a hash ('sha256-...'), or a nonce ('nonce-...') is required to enable inline execution.
From what I have read, I thought script-src 'self' should allow scripts from the same site, but apparently it is not.
I also tried to set an explicit URL, where my site is currently hosted, but I don't think this is the correct way, as it should be portable + it doesn't seem to work anyway.
Is there some easy and straightforward way to do this? To allow an explicit set of my own scripts and ban everything else?
Adding 'unsafe-inline' worked, but I have heard it is quite like not having CSP at all and I also encountered some JS operations I was still disallowed to do in my scripts. I think I could count the SHA hash of my JS everytime and pass it to HTML header. But I am constantly changing the scripts during developing, so it doesn't look very convenient. And finally - if there is some easy mechanism for dynamic creating of nonces, I may think of using it. But for my purpose I don't think I need some robust framework, I am doing fine with one HTML + several JS files...
732
Your scripts are working fine the problem is script-src: 'self' blocks inline script execution, that is inline scripts <script>alert(1)</script> and inline event handlers <img onerror="alert(1)" />.
You can use the CSP 3 script-src-attr directive in supported browsers but it will be easier (and better) to attach event listeners using el.addEventListener or el.onevent as Quentin said in the other answer. If you cant because it is some third party code the one setting attributes with inline event handlers then probably using a hash is easier than a nonce if you don't mind updating it manually on newer versions.
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Security-Policy" content="script-src-attr 'unsafe-hashes' 'sha256-bhHHL3z2vDgxUt0W3dWQOrprscmda2Y5pLsLg4GF+pI='">
</head>
<body>
<img src="" onerror="alert(1)" alt="">
<img src="" onerror="alert(2)" alt="">
</body>
</html>
This example also works with script-src if unsafe-hashes is supported.
Also check the Content Security Policy Cheat Sheet and this pretty nice slides for more details.
103
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
