Add content security policy

[mrbrianevans]

Add a Content-Security-Policy HTTP header which prevents any requests, except loading the resources needed to run the website.

The main reason for this is to offer assurance to users that their data is not being sent to any server, and all processing is done in the browser.

A good website to help write the policy is https://content-security-policy.com/

[mrbrianevans]

See Mozilla docs on CSP: developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy

To add a CSP without access to the headers (because of serving static files on Digital Ocean), put the policy in a meta tag, as shown below:

<meta content="default-src https:" http-equiv="content-security-policy"/>

See docs: developer.mozilla.org/en-US/docs/Web/HTML/Element/meta

[mrbrianevans]

Okay I've added the policy. The only problem is that loading WebAssembly requires a fetch() call to load the binary file, and the CSP is supposed to prohibit any fetch operations to ensure user privacy. I have temporarily solved this by setting connect-src ws: 'self' to allow WebSockets (for HMR in development) and 'self' to allow wasm loading. I have been unable to find a way to only allow a specific file type (eg .wasm) for connect-src. Another option would be to allow the service worker to fetch the wasm file, but not the main script. So the main script (and web workers) are prohibited from using fetch, but the service worker is allowed to. Not sure exactly how to implement that. For now, the full policy looks like this:

default-src 'none';script-src 'self';img-src *;worker-src 'self';style-src 'self' 'unsafe-inline';manifest-src 'self';connect-src ws: 'self';font-src https://fonts.google.com/ data:

For most types of static resources (styles and scripts), only loading from the same domain self is allowed. Inline styles are allowed. Fonts are allowed to be loaded inline and from Google Fonts. WebSockets and fetch to self are allowed. Everything else is prohibited.

This should prevent anyone from unknowingly uploading a malicous file that executes inline JavaScript or loads resources from a malicious source.