React应用部署至Azure后因CSP的img-src规则限制无法加载外部源图片

浏览器处理CSP规则时有固定的优先级逻辑：HTTP响应头中携带的CSP规则优先级远高于HTML页面内meta标签定义的CSP规则。如果你的Azure托管服务已经在页面响应头里下发了默认的严格CSP配置，你在index.html里加的meta标签CSP根本不会被浏览器采纳——哪怕你写的规则完全正确，只要响应头里已经存在CSP配置，meta里的内容要么被忽略，要么根本没法补全响应头里的缺失规则。
本地开发时一切正常，就是因为本地React Dev Server默认不会下发带严格限制的CSP响应头，你自己写的meta规则能正常生效；但部署到Azure之后，平台自动注入的响应头CSP会接管所有资源校验逻辑，直接导致你之前的本地配置完全失效。

• 先拿到浏览器实际生效的CSP规则
  打开浏览器开发者工具的网络面板，找到站点入口路径的主文档响应，在响应头列表里找到Content-Security-Policy字段，这里展示的才是浏览器真正用来做资源校验的规则，别盯着页面里的meta标签配置瞎改。
• 去正确的位置更新CSP规则
  不用再折腾index.html里的meta标签了，根据你的Azure托管类型，在对应平台的响应头配置模块，把你的Blob存储域名追加到现有规则的img-src指令里：
  • 如果站点托管在Azure App Service/Static Web Apps：直接在平台的自定义响应头配置页，找到已有的CSP响应头条目，在img-src的允许域名列表里加上你的Blob存储完整域名。举个合规的配置例子：原有规则是img-src 'self' https://*.azureedge.net/，修改后应该是img-src 'self' https://*.azureedge.net/ https://<你的Blob存储账号名>.blob.core.windows.net/。
  • 如果站点前面套了Azure Front Door/WAF：直接在WAF的自定义响应头配置里改CSP规则，这里配的规则会全局作用于所有经过代理的页面请求。
• 避开这些常见的配置坑
  • 注意域名匹配范围：配规则的时候别在域名后面加没必要的固定路径，比如写https://xxx.blob.core.windows.net/是可以匹配该域名下所有路径资源的，但如果写https://xxx.blob.core.windows.net/img/，就只会匹配img目录下的资源，其他路径的图片依然会被CSP拦截。
  • 核对实际请求的域名：如果前端代码里加载的是Blob绑定的自定义域名、或者CDN加速域名，要把这些域名也加入img-src的允许列表，别只配Blob默认的core.windows.net域名。
  • 检查规则语法：如果追加的规则有语法错误，会导致整个CSP配置直接失效，改完后一定要回到控制台看有没有CSP语法报错。

内容的提问来源于stack exchange，提问作者Carl-Johan