Cloudfront搭配S3部署网页出现Content Security Policy指令违规问题

1. 存在多条Content Security Policy(CSP)规则叠加生效：浏览器会同时执行所有收到的CSP规则，取最严格的限制生效。你在meta标签中配置的default-src 'self'和服务端返回的CSP规则default-src 'none'同时存在时，实际生效的是更严格的default-src 'none'，导致资源加载被拦截。
2. meta标签位置不符合规范：你当前的CSP meta标签写在<html>标签外部，不符合HTML语法要求，浏览器会直接忽略这条meta配置的CSP规则。
3. 额外的CSP规则来源：通常是AWS S3对象的自定义元数据配置了CSP响应头，或是CloudFront分配关联的响应头策略中添加了CSP响应头，这两种配置返回的HTTP响应头CSP优先级高于页面meta标签配置。

• 第一步：校验当前实际返回的响应头
  打开浏览器开发者工具的「网络」面板，刷新页面后找到对应HTML文件的请求，查看响应头中是否存在Content-Security-Policy字段，确认是否存在default-src 'none'的规则。
• 第二步：清理错误的服务端CSP配置
  1. 登录AWS S3控制台，找到对应HTML文件，查看「元数据」配置，删除配置了错误CSP规则的自定义元数据。
  2. 登录CloudFront控制台，进入对应分配的设置页面，查看关联的「响应头策略」，删除错误的CSP响应头配置，或直接修改为你需要的CSP规则。
• 第三步：修正页面meta标签的结构
  将所有meta标签移动到<html>内部的<head>标签中，同时可以补充media-src规则明确允许视频资源加载，示例配置如下：

  <!DOCTYPE html>
  <html>
  <head>
    <meta content="text/html;charset=utf-8" http-equiv="Content-Type">
    <meta content="utf-8" http-equiv="encoding">
    <meta http-equiv="Content-Security-Policy" content="default-src 'self'; media-src 'self' https://www.example.com">
  </head>
  <body>
    <!-- 页面正文内容 -->
  </body>
  </html>
  

• 第四步：清除缓存测试
  配置修改完成后，在CloudFront控制台创建失效请求，清除对应HTML文件的缓存，再刷新浏览器验证修复效果。

注：更推荐直接在CloudFront响应头策略中统一配置CSP规则，可避免meta标签位置错误、多页面配置不一致等问题。

内容的提问来源于stack exchange，提问作者VectorVictor