本地映射域名对接第三方Stage服务时CSP报错问题咨询

针对你遇到的本地开发环境CSP报错问题，结合你的场景（Hosts映射域名、第三方CSP服务、Angular 18 SPA），给出以下具体排查步骤：

1. 核对实际生效的CSP头部 #

• 打开浏览器开发者工具（F12）→「网络」标签，刷新页面后找到第三方服务的响应，查看Content-Security-Policy响应头：
  • 确认规则确实包含https://*.{our domain}，同时检查是否存在细分规则（如script-src、style-src）覆盖了全局default-src的情况。
  • 注意区分Content-Security-Policy和Content-Security-Policy-Report-Only，后者仅上报不拦截，但如果缓存了旧的拦截规则也可能有影响。

2. 彻底清除站点缓存与数据 #

• 浏览器会缓存安全相关的响应头，哪怕第三方服务已经恢复白名单，旧缓存可能仍在生效：
  • 进入浏览器隐私设置，仅清除{subdomain}.dev.{our domain}对应的缓存、Cookie和本地存储（别清全部站点数据）。
  • 用Ctrl+Shift+R强制刷新页面，跳过本地缓存加载资源。

3. 验证Hosts映射与本地HTTPS证书 #

• 检查C:\Windows\System32\drivers\etc\hosts文件，确认映射是127.0.0.1 {subdomain}.dev.{our domain}，无多余空格或注释错误。
• 本地开发用的HTTPS证书是否被浏览器信任？自签名证书若未添加信任，可能触发额外安全限制导致CSP解析异常，可在地址栏查看证书状态。

4. 定位被拦截的具体资源 #

• 打开开发者工具「控制台」，查看CSP报错的详细信息：明确是哪种资源（脚本、接口请求、样式等）被拦截，以及该资源的实际请求URL。
• 虽然你说未直接引用localhost，但Angular 18的dev server或依赖库可能动态生成含localhost的资源路径，或者相对路径转换时出现异常，对比URL是否符合CSP规则。

5. 再次确认第三方Stage服务的白名单 #

• 检查第三方服务Stage端的白名单是否确实包含*.{our domain}，注意域名大小写、是否有子域限制（比如误设为*.prod.{our domain}）。
• 用curl -I https://{stage-service-domain}命令测试第三方服务的响应头，确保返回的CSP规则和预期一致。

6. 排除浏览器插件与模式干扰 #

• 禁用所有浏览器插件（广告拦截、隐私保护类），这类插件可能添加额外CSP规则导致拦截。
• 用浏览器隐身模式测试，隐身模式会禁用缓存和扩展，若正常则说明是本地常规模式下的配置或缓存问题。

关于浏览器安全更新的疑问 #

近期主流浏览器的CSP解析逻辑没有重大变更，除非在白名单移除期间浏览器记录了站点违规标记，但这类标记清除站点数据后就会失效。多浏览器同时出现问题，大概率是本地配置或缓存问题，而非浏览器更新导致。

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