Hello Stack Overflow community,
I'm encountering an issue while trying to deploy my Vue 3 static website on AWS using CloudFront. Locally and over HTTP, everything works perfectly, but when attempting to deploy it over HTTPS via CloudFront, my Google Fonts fail to load. The console displays the following error:
www.colbykauk.com/:8 Refused to load the stylesheet 'https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700;900&display=swap' because it violates the following Content Security Policy directive: "style-src 'self'". Note that 'style-src-elem' was not explicitly set, so 'style-src' is used as a fallback.
Additionally, the network status shows the request as blocked.
Many clues, including suggestions from chatGPT and various Stack Overflow articles, point towards a Content Security Policy (CSP) problem.
You can visit the website here to see the problem: www.colbykauk.com (it is my personal portfolio website)
I started using the fontsource npm package, which also worked locally and over HTTP but not over HTTPS.
Then I switched to using google fonts and adding this to the head of my index.html file:
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700;900&display=swap" rel="stylesheet">
I've attempted to modify the <head> tag in my index.html file by including a meta tag to adjust the CSP:
<meta http-equiv="Content-Security-Policy" content="default-src 'none'; font-src 'self' https://www.colbykauk.com;">
I've also tried adjusting the settings in my vite.config.js to include the CSP header:
import { fileURLToPath, URL } from 'node:url';
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
export default defineConfig({
plugins: [vue()],
resolve: {
alias: { '@': fileURLToPath(new URL('./src', import.meta.url)) },
},
headers: {
'Content-Security-Policy': "default-src 'none'; style-src 'self' fonts.googleapis.com; script-src 'self'; font-src 'self' https://fonts.gstatic.com data:; img-src 'self' data:;"
},
});
Despite my efforts, the issue persists. I would greatly appreciate any insights or suggestions on how to resolve this problem.
Thank you in advance!