如何解决Chrome隐身窗口中经htaccess配置引入的跨域JS文件无法加载问题

你碰到的加载失败问题，核心是CSP配置存在多处语法错误，不同Chrome运行模式的语法容错策略不一致：普通模式下Chrome会对非标准CSP写法做宽松适配，因此JS可正常加载；但隐身模式下Chrome默认启用严格的CSP解析逻辑，会直接丢弃所有存在语法错误的CSP指令，触发默认安全拦截，最终导致外部JS无法加载。

需修正的具体配置错误 #

• 混淆HTTP头格式与CSP内部指令格式
  你在CSP的取值内容里，给每个指令名后面多加了冒号。实际上冒号仅用于分隔HTTP头的名称和取值，CSP内部的指令名后面直接跟空格加源列表即可，不需要额外加冒号。
  你的原始错误写法：

  # 引号内default-src、script-src后面的冒号是多余的，会导致浏览器无法识别对应指令
  Header set Content-Security-Policy: "default-src: 'self'; script-src: 'unsafe-inline', 'unsafe-eval', 'self' *.example.com https://example.com http://example.com;"
  

• CSP源列表分隔符使用错误
  CSP规范要求多个可信源之间必须用空格分隔，不能用英文逗号分隔。你当前写法用逗号隔开所有script-src的源项，浏览器会把逗号当成源字符串的一部分，比如将'unsafe-inline',识别为完全无效的源项，根本匹配不到对应的脚本加载权限。
• 隐身模式的特殊源拦截规则
  CSP里的通配符*.example.com仅匹配example.com的所有子域名（如www.example.com、static.example.com），不会匹配example.com根域本身；同时你配置里的http://example.com项，会被Chrome隐身模式下默认开启的强制HTTPS规则直接拦截，不允许加载明文http源的内容。

可直接落地的正确配置 #

把原有htaccess配置替换为下面的内容，即可解决隐身模式下的JS加载问题：

<IfModule mod_headers.c>
  Header set Content-Security-Policy "default-src 'self'; script-src 'unsafe-inline' 'unsafe-eval' 'self' *.example.com https://example.com"
</IfModule>

配置验证方式 #

部署完成后可通过两步确认生效：

1. 在隐身窗口打开目标页面，按F12调出开发者工具，查看控制台是否还有CSP类的拦截报错
2. 检查服务器返回的响应头，确认CSP值内部没有多余的指令尾冒号、没有逗号分隔的源项

注意：如果确实需要允许http协议的example.com源，可以把http://example.com补充到script-src的源列表中，但更推荐统一使用https源，避免被隐身模式的强制HTTPS规则拦截。

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