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?


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

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

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

  • 1
    That looks like the right solution. If you want to be able to load scripts from your own domain as well, you should add 'self' to the list. – Anders Apr 9 '18 at 8:41

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


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;
  • are the spaces intentional or added by stackexchange? I pasted this in and my webserver wouldn't start. – briansol Dec 21 '20 at 18:19

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.