I was working on a static web page served via an AWS CloudFront Distribution and I had a Content Security Policy issue that took me a couple of hours to solve... I hope you stumble upon this article and it saves you some valuable time.
The Solution
Let's not waste any time here, this is how to resolve this issue. Continue reading for the explanation...
What is Content Security Policy CSP?
Content-Security-Policy (CSP) is an important security mechanism that helps protect websites from various types of attacks, including cross-site scripting (XSS) and data injection. Two ways to configure CSP:
Meta tag in HTML
head:<meta http-equiv="Content-Security-Policy" content="default-src 'self'">HTTP response headers
HTTP response headers CSP config overrides the meta tag.
CSP configuration affects the use of a Content Delivery Network (CDN) in your HTML.
The CSP issue I encountered with AWS CloudFront
I was working on my landing page and wanted to use the IBM Plex Mono font from Google Fonts API. Everything was working fine locally but not when using AWS CloudFront Distribution. I added the meta tag in the HTML code:
<meta http-equiv="Content-Security-Policy" content="default-src 'none'; img-src 'self'; script-src 'self'; style-src 'self' https://fonts.googleapis.com; object-src 'none'; font-src 'self' https://fonts.gstatic.com">
No luck. The browser's "Inspect" feature was telling me that it using style-src 'self' (which is not what the meta tag had).
I knew it was something set in AWS but I couldn't find it in my CloudFront Distribution. When looking online, there was no direct answer until I found this solution.
The CSP configuration to change was indeed in CloudFront but not at the Distribution level, it was in CloudFront Policies.
The value of Content-Security-Policy for Google Fonts API should look like:
default-src 'none'; img-src 'self'; script-src 'self'; style-src 'self' https://fonts.googleapis.com; object-src 'none'; font-src 'self' https://fonts.gstatic.com
The policy needs to be attached to the CloudFront Distribution then.
Conclusion
I hope you found this article helpful, consider adding a reaction and/or comment. If you want a comprehensive tutorial on how to create a landing page let me know.