daniel-ac-martin / NotGovUK

An implementation of the GOV.UK Design System in React that provides support for writing internal applications in addition to public ones.

Home Page:https://not-gov.uk/

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Content Security Policy

ABodycombe opened this issue · comments

Not-govuk includes a Content-Security-Policy to prevent clickjacking:

content-security-policy: frame-ancestors 'none'

I'm looking to productionise one of our apps and implement a stricter policy, for example:

content-security-policy: frame-ancestors 'none'; default-src 'none'; script-src 'self' connect-src 'self'; style-src 'self'; img-src 'self'; font-src 'self'; require-trusted-types-for 'script';

With version 0.4.1 this isn't currently possible, the framework generates inline scripts and stylesheets, requiring the policy to include 'unsafe-inline' directives in order to render correctly.

Hi @ABodycombe.

It's been on my to-do list to tighten up the CSP, but I'm worried about breaking things without doing a deep-dive into all of the CSP options.

Would you be able to explain the the implications of the CSP that you want? (Maybe by breaking it down.)

For example, does img-src 'self' prevent us from hot-linking to other websites? (I think that might be a bit much, but I'm open to persuasion.)

Quick update on this, I'm trialling the following policy:

content-security-policy: default-src  'none'; connect-src 'self'; font-src 'self'; frame-src 'self'; img-src  'self'; manifest-src 'self'; media-src 'self'; prefetch-src 'self';  script-src 'self' 'nonce-<random string>'; style-src 'self'; form-action  'self'; frame-ancestors 'none'; require-trusted-types-for 'script'

Aside: What do you thing about setting frame-ancestors to 'self' in order to allow frames? (But only our own frames.)

I've had to loosen up the policy a bit: https://github.com/daniel-ac-martin/NotGovUK/pull/542/files

Chromium was broken on the 'component' pages. e.g: https://not-gov.uk/components?name=Back%20link