配置CSP（strict-dynamic+nonce）遇资源加载拦截问题求助

核心结论 #

style-src 没有和script-src的strict-dynamic完全一致的信任传递机制。当前CSP规范里，strict-dynamic仅适用于script-src、worker-src和object-src，无法直接让受信任脚本加载的样式自动获得允许。

Google Translate问题的解决办法 #

1. 处理gstatic样式表拦截
   strict-dynamic仅作用于script-src规则，不会限制style-src的域名白名单配置。直接在style-src中添加https://*.gstatic.com即可允许Google Translate加载的静态样式。修改后的style-src示例：

   style-src 'self' 'unsafe-hashes' https://fonts.googleapis.com https://*.gstatic.com 'nonce-bc138385-6e60-4e78-8e12-c516b9835ccf' 'sha256-<someHash>' ;
   

2. 处理注入的内联样式拦截
   Google Translate动态注入的内联样式可通过两种方式解决：

   • 提取控制台CSP报错中给出的内联样式哈希值，添加到style-src规则中；
   • 若无法提取哈希，可临时使用unsafe-inline（仅在信任该第三方脚本的前提下），注意当style-src已配置nonce或哈希时，unsafe-inline仅在配合unsafe-hashes时对特定哈希的内联样式生效。

Typekit动态样式拦截的解决办法 #

针对Typekit通过@import加载的动态子域名，直接在style-src中添加泛域名规则https://*.typekit.net即可覆盖所有可能的动态域名：

style-src 'self' 'unsafe-hashes' https://fonts.googleapis.com https://*.gstatic.com https://*.typekit.net 'nonce-bc138385-6e60-4e78-8e12-c516b9835ccf' 'sha256-<someHash>' ;

同时确保Typekit的link标签带有合法nonce，保证初始样式文件能被正常加载。

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