Restrictive CSP for AMP it's not easy, because now (Q2 2020) not all CSP headers are supported in all browsers. For example style-src-elem
is supported in Chrome, but not in FF. Maybe sometimes at the future it will be easier.
For now it's like this:
content-security-policy: default-src 'none';base-uri 'self';manifest-src 'self';script-src 'self' https://cdn.ampproject.org;script-src-elem https://cdn.ampproject.org;style-src 'unsafe-inline';connect-src https://www.google-analytics.com/ https://cdn.ampproject.org/;img-src 'self';form-action 'self';frame-ancestors 'none';sandbox allow-same-origin allow-scripts;upgrade-insecure-requests;block-all-mixed-content;
default-src
will set default restrictively to 'none
' but this default it's not setting all possible properties, that's why it's there for example frame-ancestors 'none';
, this property is not set by default-src
.
style-src 'unsafe-inline'
because with AMP only inline styles are possible.
connect-src https://www.google-analytics.com/ https://cdn.ampproject.org/
possible to load AMP parts and send analytics data with amp-analytics
script-src 'self' https://cdn.ampproject.org
to run local javascripts (a few ones which are possible to run on AMP) and AMP CND
script-src-elem https://cdn.ampproject.org
is applied on scripts at external files only. So I don't need 'self'
because AMP don't allows me to use them.
Other properties set to 'self'
allows me to use same-domain hosted resources only (images, manifest, service worker, …)