/learning-csp

Learning about CSP (Content Security Policy)

Learning about CSP (Content Security Policy)

Just one of the things I'm learning. https://github.com/hchiam/learning

example CSP meta tag

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:

animation showing how to hover to get the 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

https://github.com/hchiam/learning-trustedTypes