CSP (Content-Security-Policy) Support

Describe the bug
Multiple.
Currently, with CSP, connecting to the server blocks things like inline code and evals. Requiring the flag usafe-inline and unsafe-eval. batman has already started working on removing inline JS.

Setting default-src (with flags other than outlining the allowed, recommended with nothing else set is 'self') blocks the external calls to gstatic and MaxCDN. Will post another comment outlining the proper use of this header when all is said and done.

Please reference https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy for full info on CSP.

To Reproduce
Steps to reproduce the behavior:

1. Have CSP enabled.
2. Go to your servers address
3. Lose your mind

Expected behavior
Documentation should (in my opinion) enable this correctly by default, but if not, allow users the option to enable it and give them the correct header info to do so.

Environment:

• OS: All?
• Browser: All modern browsers
• Version: Modern?

Additional context
Current working header below. Will update with future fixes in the comments of this issue.

add_header Content-Security-Policy "default-src 'self' 'unsafe-inline' 'unsafe-eval' object-src 'none' https;";

Fully working header, correct syntax this time.

Nginx (in the server {} block): add_header Content-Security-Policy "default-src 'none'; base-uri 'self';block-all-mixed-content; manifest-src 'self'; object-src 'none'; frame-ancestors 'none'; frame-src 'self'; img-src 'self' twemoji.maxcdn.com www.gravatar.com repository-images.githubusercontent.com https; connect-src 'self'; font-src 'self' fonts.gstatic.com https; style-src 'self' fonts.googleapis.com 'unsafe-inline' https; script-src 'self' 'unsafe-inline' 'unsafe-eval';" always;

Apache (inside your VirtualHost): Header set Content-Security-Policy "default-src 'none'; base-uri 'self';block-all-mixed-content; manifest-src 'self'; object-src 'none'; frame-ancestors 'none'; frame-src 'self'; img-src 'self' twemoji.maxcdn.com www.gravatar.com repository-images.githubusercontent.com https; connect-src 'self'; font-src 'self' fonts.gstatic.com https; style-src 'self' fonts.googleapis.com 'unsafe-inline' https; script-src 'self' 'unsafe-inline' 'unsafe-eval';" always;

Another reference https://content-security-policy.com/

Edit: update to be more secure and add githubusercontent.com

Okay, images are saved. Using img-src *; is fine, as its only loading images and the browser itself should handle issues there. However, the issue now comes up with the following error in console after a reload of the page The FetchEvent for "https://repository-images.githubusercontent.com/14822868/751ec900-ae2b-11ea-8fbb-1ee16400fa8f" resulted in a network error response: an object that was not a Response was passed to respondWith().

FetchEvent is the response (and that gave rise to your respondWith error). the bug is going to be on the request side. The service worker should use fetch with a Request() rather than a url string and then as part of the Request, specify the RequestDestination

https://developer.mozilla.org/en-US/docs/Web/API/FetchEvent/respondWith

This allows img-src *; to function correctly and load any image on the web, but not be blocked by content-src 'self';.

Edit: added some more info https://stackoverflow.com/questions/57872284/content-security-policy-violations-on-seemingly-valid-urls

Inline issue after 4.33 update https://imgur.com/oibXCGb
Eval issue after 4.33 update https://imgur.com/aUZHWbq

Current working headers:

nginx: add_header Content-Security-Policy "default-src 'none'; base-uri 'self';block-all-mixed-content; manifest-src 'self'; object-src 'none'; frame-ancestors 'none'; frame-src 'self'; connect-src 'self' www.gravatar.com twemoji.maxcdn.com; img-src *; font-src 'self' fonts.gstatic.com https; style-src 'self' fonts.googleapis.com 'unsafe-inline'; script-src 'self' 'unsafe-inline' 'unsafe-eval';" always;

Apache: Header set Content-Security-Policy "default-src 'none'; base-uri 'self';block-all-mixed-content; manifest-src 'self'; object-src 'none'; frame-ancestors 'none'; frame-src 'self'; connect-src 'self' www.gravatar.com twemoji.maxcdn.com; img-src *; font-src 'self' fonts.gstatic.com https; style-src 'self' fonts.googleapis.com 'unsafe-inline'; script-src 'self' 'unsafe-inline' 'unsafe-eval';" always;

[stigtsp]

@wylel Would it be an idea to set these in either or res->header in mojo?

@stigtsp I will have to look at Mojo as im not familiar with it. i will update when I do.