Adding Content Security Policies in an extensible way.

[peterMuriuki]

We have recently found ourselves needing to think about how we should implement CSP(content security policy) for this application. This discussion issue is my attempt at documenting a few thoughts on where best to implement this.

CSP allows us to limit how and from whom the web application loads resources. This hugely mitigates against injection attacks such as XSS.

We have 3 options:

1. Add The policy as a Meta directive in the react app index file.
2. Add it to the headers of the back-end service that serves the static react app files.(the express server)
3. Add it as an Nginx header directive to the deployment files.

The argument for 1 is that we can fine tune the policy for specific pages as needed, thus implying flexibility. On the other hand There are some CSP features not supported by the Meta tag like report-uri which makes it a bit of deal breaker.

While 3 seemed attractive at first, it would require us to duplicate the directive in each deployment values file which is less than ideal. This could have been solved by defining and using a default directive in the helm-charts we use. However this arg breaks down when you consider that the helm charts are supposed to be flexible enough to use with any web service and not just Nginx.

I went with the option no.2 since majorly its the recommended approach.

CSP preferred delivery mechanism is an HTTP header

Also, We we can make it configurable and reasonably modify our helm-chart to contain the default policy values without necessarily making it coupled to the underlying ingress controller.

[peterMuriuki]

References

1. https://cheatsheetseries.owasp.org/cheatsheets/Content_Security_Policy_Cheat_Sheet.html

Using a header is the preferred way and supports the full CSP feature set. Send it in all HTTP responses

2. https://stackoverflow.com/questions/38193122/should-security-headers-policies-be-set-in-nginx-or-express