Add Content Security Policies and set up reporting

[tiltec]

@nicksellen proposed to set up some CSPs for karrot-frontend to enhance security. They consist of an HTTP header that we should probably configure in ansible and add a reporting service.

Documentation about CSP: https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP
Our ansible playbooks without CSP: https://github.com/yunity/yuca
Using sentry as a CSP reporting service: https://docs.sentry.io/learn/security-policy-reporting/

My idea would be to start with report-only policies, to get better insight in the effects that an enforced policy would have. I already started a sentry project that could be used for it: https://sentry.io/foodsaving-worldwide/karrot-csp-report-only/

[nicksellen]

Hmm, there are some fiddly complications. Mostly because I would like to get the git sha in the report-uri as the sentry "release". But because the ansible project is independent from the frontend deployment it does not have the git sha available. A few options:

1. deploy frontend via ansible in such a way we get the git sha available and can modify the nginx config - don't like this one so much as it's nice to deploy without having to modify nginx configuration and reload it
2. don't include the release tag in the report-uri, so still put configuration in ansible project - seems release might be useful though so we don't chase old reports
3. have a fixed report-uri that goes to a url that redirects to the correct one (assuming that csp is ok with that):
   a. to a backend api url - but this doesn't know the frontend sha
   b. to an html page with a meta refresh redirect - this would allow it to be built by the frontend project
4. set the Content-Security-Policy using an html meta tag instead of an http header - not the recommended approach, but it certainly the easiest as we have all the information available at that point. One downside is internet explorer does not support it.

I think I'll go with 4 for now, as it's so simple.

[nicksellen]

Oh, 4 is not possible as you cannot use a report-uri (or it's replacement report-to) in a <meta> tag.

https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/report-uri

[nicksellen]

I progressed, but still a few decisions, and maybe some related tasks.

So I tried option 3c (not mentioned above) - which is to have a little nodejs proxy server that listens for /csp-reports then reads about.json and forwards it onto the right sentry url (including the release and environment).

But I also thought it makes sense to unify frontend/backend deployment a bit too - currently frontend is deployed via circleci without ansible and just needs to deploy built artifacts, whereas backend deploys via circleci using ansible and deploys by checking out the git repo on the remote server and builds statics there. It might be nice to deploy both via built artifacts (although the fully built/installed backend project is ~500mb due to the sizable pip libs - but could leave out those).

... but I think I'll go back to putting it in yuca and ignore the release part.

[nicksellen]

Ok, reporting is setup! Still in report-only mode. I'll leave it on that for a bit and see which things I might have missed.

Reports go into https://sentry.io/foodsaving-worldwide/karrot-csp-report-only/ for both dev and prod (tagged as environment=development|production).

The first report to get through is the non-https image on https://karrot.world/#/groupPreview/47 - this would be blocked if I turned it on properly, this is actually good as it should remove the mixed content warnings in the browser, but maybe we should put a note somewhere that you can't include http: images.

[tiltec]

I see three messages in the console when visiting karrot.world and dev.karrot.world:

Content Security Policy: The page’s settings observed the loading of a resource at self (“default-src”). A CSP report is being sent. Source: ;(function(e){let t={};const n={Vue:null.... dev.karrot.world:1
Content Security Policy: The page’s settings observed the loading of a resource at self (“default-src”). A CSP report is being sent. Source: call to eval() or related function blocked by CSP.
Content Security Policy: The page’s settings observed the loading of a resource at self (“default-src”). A CSP report is being sent. Source: ;(function(e){setTimeout(()=>{const t=do....

However, I don't see a related report at https://sentry.io/foodsaving-worldwide/karrot-csp-report-only/
Seems weird...

Other reports have arrived in the meantime (besides the non-https image)

• Blocked 'connect' from 'nominatim.openstreetmap.org' (7 per day)
• Blocked 'font' from 'data:' (1 per day)
• Blocked 'font' from 'fonts.gstatic.com' (only sometimes)

[tiltec]

Apparently CSP reports from Firefox are disregarded by Sentry because they miss a value: getsentry/sentry#2475

[nicksellen]

Yes I noticed that. I think we can just use chrome to get the policy right. Then just wait until the world around us gets fixed.

[nicksellen]

Hmmm, still shows inline/eval errors on https://dev.karrot.world/.

Service worker is missing node: false. Will add that. Not sure about the inline bit though. Might do a build without html minification so can show the line it's referring to.

[tiltec]

I see these errors in Firefox, but not in Chromium. There are also no reports lately when visiting dev.karrot.world with Chromium: https://sentry.io/foodsaving-worldwide/karrot-csp-report-only/?environment=development&query=

[nicksellen]

Maybe our windows users don't do geocoding so frequently, but still useful when they do :)

https://sentry.io/foodsaving-worldwide/karrot-csp-report-only/issues/687890889/?environment=development

[nicksellen]

CSP is enabled for dev.karrot.world now :)

Seems ok so far, I can browse around the website on firefox/chrome/app.

[nicksellen]

https://dev.karrot.world/bundlesize.html doesn't work any more :/

Can see it with:

wget https://dev.karrot.world/bundlesize.html
firefox bundlesize.html

... but not ideal... guess we need some overrides for that path.

[tiltec]

I still see these on dev.karrot.world in Firefox:

[nicksellen]

Fixed the bundlesize.html page now. It still shows some eval errors, but seems to work. Can add more permissions in https://github.com/yunity/yuca/blob/master/roles/karrot-backend/templates/nginx.j2#L67 if needed.

Firefox still shows errors for the main page too, but it can't back them up with any evidence.... it works, and the line number does not make sense.

[nicksellen]

I found the eval usage in regenerator runtime facebook/regenerator#336

We have 4 versions of the library in our lockfile. Some of them older. >=0.12.1 is apparently the fixed versions (from facebook/regenerator#346) although to my eyes that does not look like it resolves it, but the next change does facebook/regenerator@5703a79#diff-b1fb3ac85a28d1b282db3d98d7252a3d (which says v13.3.

We could just wait until everything upgrades in the future and it should resolve itself.

[nicksellen]

)

[tiltec]

Closing as done!