为何Chrome扩展可导入未在Content Security Policy中声明的字体资源？

你的Chrome扩展中CSS的@import能正常工作，主要有以下两种核心原因：

• 开发模式的CSP豁免机制：如果你是通过Chrome「加载已解压的扩展程序」功能加载的开发版扩展，Chrome会自动放宽CSP安全策略限制，允许加载未在CSP中声明的外部资源——这是Chrome为方便开发者调试专门做的特殊处理。一旦将扩展打包为正式CRX文件，这个@import就会被CSP规则拦截，因为你的配置未将fonts.cdnfonts.com加入style-src（控制样式表加载）或font-src（控制字体资源加载）的允许列表。

• Manifest V2的CSP实现特性：在Chrome扩展Manifest V2的CSP逻辑中，当你仅自定义default-src和script-src时，部分未明确设置的资源规则（如style-src）可能未严格继承default-src的限制，但这属于非标准行为，仅在特定环境下生效，正式打包后依然会被拦截。

如果要让这个@import在正式环境也正常工作，需要修改CSP配置，添加对应允许源：

"content_security_policy": "default-src 'self'; script-src 'self' https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js; style-src 'self' http://fonts.cdnfonts.com; font-src 'self' http://fonts.cdnfonts.com;"

注意：如果fonts.cdnfonts.com支持HTTPS，建议改用HTTPS链接，避免Chrome的混合内容拦截。

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