Firefox下Font Awesome 5.15.4触发ASP.NET Core站点CSP报错

这个报错是Firefox CSP实现逻辑与Chromium系浏览器（Chrome/Edge）的已知差异导致的，和你定位到的DOM插入代码直接相关：

• Font Awesome 5.15.4的Kit脚本运行时会先动态创建空的<style>节点插入DOM，作为后续注入图标样式的容器
• Chromium内核会自动跳过无实际内容的空内联节点CSP校验，因此不会触发报错
• Firefox会对所有动态插入的内联资源执行严格CSP校验，哪怕节点内容为空，也会判定为未授权内联资源；加上你当前仅配置了style-src-elem指令，未配置兜底的style-src规则，Firefox校验这类动态节点时不会匹配style-src-elem，会直接回退到default-src做校验，最终触发违规上报。
  你配置在Kit引入标签上的nonce不会自动继承给动态生成的style节点，你提前预置的一堆hash都是针对有实际内容的内联脚本、样式计算的，空节点的哈希无法匹配这些值，自然会触发拦截。

按落地成本从低到高排序：

• 方案1：升级Font Awesome Kit到6.x及以上版本
  6.x版本的Kit已经修复了提前插入空style节点的逻辑，不会再触发Firefox的这个CSP校验问题，不需要调整现有CSP规则，升级后即可消除报错，是成本最低的修复方式。
• 方案2：保留现有版本，补全CSP规则
  不需要修改Font Awesome源码，只要补全CSP配置即可：空<style>标签的SHA256哈希是固定的空字符串哈希值'sha256-47DEQpj8HBSa+/TImW+5JCeuQeRkm5NMpJWZG3hSuFU='，你只需要新增style-src指令，把这个哈希加进去，就能让Firefox放行这个空节点，安全等级和加普通哈希规则完全一致，不会引入风险。
  配置示例，直接插入到你现有CSP头的拼接逻辑中即可：

  "style-src 'self' 'nonce-YmNoZGZHNXV3ZHNoamNkNygvSSZaVFVIQnpodmp6dHRmY2hn' 'sha256-47DEQpj8HBSa+/TImW+5JCeuQeRkm5NMpJWZG3hSuFU=' https://fonts.googleapis.com/ https://ka-f.fontawesome.com/ https://kit.fontawesome.com/ ;"
  

• 方案3：弃用Kit模式，本地静态部署Font Awesome资源
  直接把对应版本的Font Awesome CSS、字体文件下载到站点wwwroot目录，以本地静态资源的方式引入，完全不需要动态插入内联节点，从根源上避免动态内联资源的CSP校验问题，是安全等级最高的方案，同时也能规避第三方CDN不可用的风险。

• 你当前在img-src、font-src、connect-src这类资源加载指令里加nonce是完全无效的，nonce仅对脚本、样式这类可执行/可渲染的文档上下文资源生效，多余配置可以删除，减少响应头体积
• 现有CSP规则里存在大量重复的哈希值、重复的域名白名单，清理后可以降低浏览器解析CSP的性能开销，也能减少规则写错的概率
• 你当前使用的是Content-Security-Policy-Report-Only上报模式，等所有违规报错都消除后，再切换为正式的Content-Security-Policy头启用强制拦截即可

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