CSP与SRI前端资源安全策略实践

---

title: CSP与SRI前端资源安全策略实践

keywords: [CSP, SRI, Content-Security-Policy, Subresource Integrity, nonce]

description: 通过CSP与SRI强化前端资源加载安全，提供可验证的头部与标签示例，防止XSS与非法资源注入。

date: 2025-11-26

categories:

• 文章资讯
• 技术教程

---

概述

• 目标：使用内容安全策略（CSP）与子资源完整性（SRI）限制资源来源并校验哈希，降低XSS风险与供应链攻击。
• 适用：公共网站与管理后台、第三方脚本接入场景。

核心与实战

• 响应头示例（严格CSP）：

Content-Security-Policy: default-src 'none'; script-src 'self' https://cdn.example.com 'nonce-abc123'; style-src 'self' 'unsafe-inline'; img-src 'self' data:; connect-src 'self' https://api.example.com; frame-ancestors 'none'; base-uri 'self'; object-src 'none'

• HTML标签添加SRI与nonce：

<script src="https://cdn.example.com/lib.min.js" integrity="sha384-Base64HashedValue" crossorigin="anonymous"></script>
<script nonce="abc123">/* inline script allowed by nonce */</script>

• 生成哈希（示例命令）：

openssl dgst -sha384 -binary lib.min.js | openssl base64 -A

示例

• 动态nonce注入（后端）：

const nonce = crypto.randomBytes(16).toString('base64')
res.setHeader('Content-Security-Policy', `script-src 'self' https://cdn.example.com 'nonce-${nonce}'`)
res.render('page', { nonce })

• 阻止不可信来源：

-- 测试从不同域加载脚本应被CSP阻止

验证与监控

• 浏览器控制台：
• 观察CSP违反报告与阻止日志；启用Content-Security-Policy-Report-Only进行灰度验证。
• 报告端点：
• 配置report-uri或report-to将违规事件上报以监控。
• SRI校验：
• 修改脚本内容后SRI应失败并阻止加载；确保哈希更新流程加入发布管道。

常见误区

• 过度放宽策略（如unsafe-inline）导致效果下降；尽量使用nonce或严格来源。
• 未更新SRI哈希导致合法更新被阻止；需在构建时自动生成与替换。
• 忽视Report-Only阶段验证直接上线导致功能受影响；应先灰度验证。

结语

• 通过CSP与SRI可显著提升前端资源安全，结合报告与自动化哈希管理在生产稳定落地。