style-src指令仅控制外部CSS加载源，不约束内联样式；若未显式禁用'unsafe-inline'，浏览器默认允许style=""和标签执行，故仅配'self'无法阻止内联样式注入。

style-src 指令本身不防止样式注入，它只控制「哪些来源的 CSS 可以被加载和应用」；真正阻止内联样式执行（如 style="..." 或 ）的关键，是**不配 'unsafe-inline'**。

为什么加了 style-src 'self' 还能执行内联样式？

因为 style-src 默认不约束内联样式 —— 浏览器会把内联样式（

、）当作“本地生成”，不走源匹配逻辑。除非你显式禁止，否则它们照常生效。

常见错误现象：

• 页面加了 Content-Security-Policy: style-src 'self'，但
  仍能触发（老 IE）或现代等效攻击（如 CSS injection via @import 或 url(javascript:...)）
• 用户提交的富文本含 块，后端没剥离，前端直接 innerHTML 插入，CSP 没拦住

解决思路：

• 若业务允许，移除所有 'unsafe-inline'，强制所有样式走外部 CSS 文件 + 'self' 或明确域名
• 若必须支持内联样式（如 CMS 编辑器实时预览），则需配合服务端 HTML 清洗（例如用 DOMPurify 处理用户输入），不能只靠 CSP
• style-src 'nonce-...' 对内联 有效，但对 style="" 属性无效 —— 后者只能靠属性级过滤

style-src 能拦住哪些实际攻击？

它主要拦截的是「通过外部链接注入恶意样式」的行为，比如：

• → 若未在 style-src 中声明该域名，会被浏览器拒绝加载
• → 同样被拦（前提是没配 https: 或通配符）
• 通过 JS 动态创建 并设置 href 指向非白名单地址 → 加载失败，控制台报 Refused to load the stylesheet...

注意：style-src 不影响 document.styleSheets 的 JS 操作，也不阻止已加载样式表里的恶意规则（如含 url(data:text/html,...) 的 data URI）—— 这些得靠内容审查或 sandbox 隔离。


使用华数设计生成高保真HTML原型、演示文稿、动画和设计评审
使用经过文档化的设计技能，从真实的品牌或项目背景中生成HTML原生原型、幻灯片、动态演示、可视化图表和评审流程。
下载

配 'unsafe-inline' 还是用 nonce？

绝大多数场景下，'unsafe-inline' 是妥协产物，不是安全选项。它的存在会让以下攻击绕过 CSP：

• 攻击者诱导用户点击含 onmouseover="..." 的链接，再通过 JS 注入 块并修改 DOM 样式实现 UI 仿冒
• 利用 CSS 属性选择器 + :has() 或 ::before/after 提取页面敏感信息（如 input[type=password]:valid::after { content: 'password is valid'; }）
• 结合 font-src 和自定义字体 glyph，实现隐蔽信道外泄

更稳妥的做法：

• 对静态内联 ，用构建时计算哈希： style-src 'sha256-abc123...'
• 对服务端动态生成的 ，每次响应生成唯一 nonce，并在 header 和标签中同步使用：Content-Security-Policy: style-src 'nonce-RANDOM123' +
• 彻底禁用内联样式（包括 style="" 属性）→ 需前端框架配合（如 React 的 CSS-in-JS 库默认不输出 style 属性，但要注意 dangerouslySetInnerHTML）

最易被忽略的一点：CSP 的 style-src 策略对 标签内的 @import、@charset、@layer 等规则仍然生效，但对 style="" 属性中的 CSS 值完全无感 —— 这部分必须靠输入清洗或属性级沙箱控制，不能指望 CSP。