Awesome
Learning about CSP (Content Security Policy)
Just one of the things I'm learning. https://github.com/hchiam/learning
https://developers.google.com/web/fundamentals/security/csp
- source whitelisting
- avoid inline code = best practice anyways, and improves caching, readability, compilation, and minification
- block everything with default-src 'none' and then build up from there, only what you allow:
Want to see a live demo and play with the code?
https://codepen.io/hchiam/pen/vYNWGrj
Just want to copy and paste some code?
Click on GitHub's new copy-to-clipboard button:
<meta
http-equiv="Content-Security-Policy"
content="default-src 'none'; script-src https://developers.google.com; style-src https://developers.google.com; img-src https://developers.google.com; connect-src https://developers.google.com; child-src 'self'"
/>
(Replace https://developers.google.com with your trusted source(s).)
Quickly check your CSP
https://csp-evaluator.withgoogle.com/
Or a more general site security scanner (still basic): https://observatory.mozilla.org/
A quick note on SRI (Subresource integrity)
Content-Security-Policy: require-sri-for script
More info on CSP
https://portswigger.net/web-security/cross-site-scripting/content-security-policy
https://portswigger.net/web-security/clickjacking#:~:text=against%20clickjacking%20attacks.-,Content%20Security%20Policy,-(CSP) (look for the "Content Security Policy" section)
Content-Security-Policy: frame-ancestors 'none';
- is like the response header
X-Frame-Options: deny(which you should use for older browsers).
Content-Security-Policy: frame-ancestors 'self';
- is like the response header
X-Frame-Options: sameorigin(which you should use for older browsers).
Content-Security-Policy: frame-ancestors normal-website.com;
- is like the response header
X-Frame-Options: allow-from https://normal-website.com(which you should use for older browsers).
inline css vs inline js
CSS:
- inline css:
<p style="background:red;">...</p> - internal css:
<style>*{background:red;}</style> - external scs:
<link href="file.css"/>
JS:
- inline js:
<p onclick="alert()">...</p> - also inline js:
<script>alert();</script> - external js:
<script src="file.js"></script>
trustedTypes
trustedTypes lets you prevent DOM XSS page-wide/centrally, instead of trying to manually find and fix all XSS sinks.
CSP (and browser support) is required to use trustedTypes