Using Content Security Policy in AMP-HTML pages?

Question

I have a site built with AMP.

I tried to use Content-Security-Policy: script-src 'self', but all styles and designs didn't show properly since they are loaded from cdn.ampproject.org.

Google, in their AMP documentation, says that all Content Security Policy has been handled before stored in their repository.

Is there a solution?

Answer 1

Finally, I found this on scotthelme.co.uk. Here's the script:

<?php
header('Content-Security-Policy: script-src https://cdn.ampproject.org:*');
?>

And, it works as I wish when I check it on securityheaders.io.

Answer 2

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, …)

Answer 3

I hope this can help friends in the Google AMP community. Try my concoction (this is for NGINX servers, you can customize it for use with httpd servers):

add_header Content-Security-Policy "base-uri 'self'; manifest-src 'self'; script-src * 'self' blob: https://apis.google.com https://apis.google.com https://cdn.ampproject.org; script-src-elem * 'unsafe-inline' data: blob: https: // cdn. ampproject.org; style-src * 'self' 'unsafe-inline' https://cdn.jsdelivr.net; connect-src * https://pagead2.googlesyndication.com https://www.googletagmanager.com https: //googleads.g.doubleclick.net https://adservice.google.com https://www.google-analytics.com/ https://cdn.ampproject.org/; img-src * data: https: / /cdn.ampproject.org; form-action 'self'; frame-ancestors * 'unsafe-eval' 'unsafe-inline'; sandbox allow-same-origin allow-scripts; upgrade-insecure-requests; block-all-mixed -content; font-src * 'self' data: https://cloud.typography.com https://fast.fonts.net https://fonts.googleapis.com https://use.typekit.net https: //maxcdn.bootstrapcdn .com https://use.fontawesome.com; " always;