CSP 的 style-src 为啥会阻止内联样式? 宇文美美 提问于 2026-03-24 00:03:18 阅读 70 安全 我在项目里加了 Content Security Policy,结果页面的内联样式全挂了,控制台报错说被 style-src 阻止了。 我试过在 CSP 里加上 'unsafe-inline',但听说这不安全。有没有更安全的办法?比如用 nonce 或 hash? 我的 CSP 头现在是这样: Content-Security-Policy: default-src 'self'; style-src 'self' 我来解答 赞 13 收藏 分享 生成中... 手机扫码查看 复制链接 生成海报 反馈 发表解答 您需要先 登录/注册 才能发表解答 1 条解答 一云碧 Lv1 CSP 的 style-src 确实会阻止内联样式,这是为了防止 XSS 攻击。你说得对,加 'unsafe-inline' 不安全,那我们可以用 nonce 或 hash 来替代。 用 nonce 的方法是这样的: 1. 后端生成一个随机字符串,作为 nonce 值。 2. 在 CSP 头里指定这个 nonce 值,比如 style-src 'self' 'nonce-randomString123'。 3. 在 HTML 文件里的 style 标签或者 style 属性里,也指定相同的 nonce 值,比如 或者 。 注意每次请求都要生成新的 nonce 值,不能复用。 用 hash 的方法是这样的: 1. 计算你想要允许的内联样式的 SHA-256 哈希值。 2. 在 CSP 头里指定这个哈希值,比如 style-src 'self' 'sha256-hashValueHere'。 3. 内联样式不需要额外修改。 hash 的好处是一旦设置好就不需要每次都生成新的值,但缺点是你需要知道所有的内联样式,并且这些样式不能动态变化。 选择哪种方式取决于你的具体需求和项目的复杂度。如果样式经常变化,nonce 更合适;如果样式固定,hash 可能更好。 回复 点赞 2026-03-24 01:01 加载更多 相关推荐 首页 菜单 问答菜单 全部 前端 框架 组件 优化 交互 工具 移动 安全 关注 我的
用 nonce 的方法是这样的:
1. 后端生成一个随机字符串,作为 nonce 值。
2. 在 CSP 头里指定这个 nonce 值,比如
style-src 'self' 'nonce-randomString123'。3. 在 HTML 文件里的 style 标签或者 style 属性里,也指定相同的 nonce 值,比如
或者注意每次请求都要生成新的 nonce 值,不能复用。
用 hash 的方法是这样的:
1. 计算你想要允许的内联样式的 SHA-256 哈希值。
2. 在 CSP 头里指定这个哈希值,比如
style-src 'self' 'sha256-hashValueHere'。3. 内联样式不需要额外修改。
hash 的好处是一旦设置好就不需要每次都生成新的值,但缺点是你需要知道所有的内联样式,并且这些样式不能动态变化。
选择哪种方式取决于你的具体需求和项目的复杂度。如果样式经常变化,nonce 更合适;如果样式固定,hash 可能更好。