如何配置Content-Security-Policy以允许加载AWS S3的img-src图片资源

问题根因 #

• 1. CSP规则写法错误
     你配置的img-src规则为https://testmaterialsmatter.s3.us-east-2.amazonaws.com/Content:*，路径段错误使用了冒号:代替斜杠/，导致规则无法匹配你实际的图片路径/Content/xxx.png，浏览器会认为该资源不在允许的img-src列表内。
• 2. 中间件顺序错误（最可能导致修改CSP不生效的原因）
     如果你把CSP设置中间件放在了express.static、路由处理中间件的后面，那么返回给浏览器的HTML主文档响应不会经过该中间件，自然不会携带你设置的CSP头，你修改的规则完全不会生效，这就是为什么你把default-src设为none资源依然能加载的核心原因。
• 3. 缓存干扰
     浏览器可能缓存了之前未携带CSP头的HTML响应，导致新的配置没有生效。
• 4. 第三方中间件覆盖
     如果你项目中引入了helmet这类安全中间件，它默认会自动设置CSP响应头，优先级高于你手动设置的头，会导致你的配置被覆盖不生效。

修复方案 #

1. 修正CSP规则，删除废弃的X-Content-Security-Policy头（仅老旧浏览器需要该头，当前主流浏览器仅识别Content-Security-Policy）
2. 确保CSP设置中间件是Express注册的第一个全局中间件，保证所有响应都会经过该逻辑带上CSP头，配置参考如下：

// 必须放在所有路由、express.static、其他中间件的最前面
app.use(function (req, res, next) {
  res.setHeader(
    'Content-Security-Policy',
    "default-src 'self'; img-src https://testmaterialsmatter.s3.us-east-2.amazonaws.com/Content/*;"
  );
  next();
});

3. 测试时打开Chrome开发者工具的「网络」面板，勾选「禁用缓存」选项，刷新页面验证规则是否生效，同时确认主文档（即你访问的页面HTML资源）的响应头中已经携带了正确的Content-Security-Policy头。
4. 如果使用了helmet中间件，不要手动设置头，直接在helmet配置中指定CSP规则即可：

const helmet = require('helmet');
app.use(helmet.contentSecurityPolicy({
  directives: {
    defaultSrc: ["'self'"],
    imgSrc: ["'self'", "https://testmaterialsmatter.s3.us-east-2.amazonaws.com/Content/*"]
  }
}));

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