前端安全防护体系的全景设计：CSP、SRI、Trusted Types 的深度配置

前端安全防护体系的全景设计CSP、SRI、Trusted Types 的深度配置前端安全常被视为后端的事但 XSS 攻击的主流入口恰恰是前端——用户输入、URL 参数、第三方脚本。浏览器的安全机制CSP、SRI、Trusted Types提供了强大的原生防护能力但多数项目的配置停留在开启 report-only 模式阶段远未发挥其真正价值。一、前端安全威胁的全景地图对应防护层攻击类型防护机制生效层级XSSContent-Security-Policy (CSP)HTTP 响应头 / meta 标签脚本完整性Subresource Integrity (SRI)HTML 属性DOM 注入Trusted TypesJavaScript API点击劫持X-Frame-Options / frame-ancestorsHTTP 响应头二、CSP 的深度配置CSP 是最核心的前端安全策略但正确的配置远比开启 CSP复杂。一个过于宽松的 CSP 等同于没有 CSP。2.1 渐进式 CSP 部署策略2.2 生产级 CSP 配置# 第一阶段Report-Only 模式仅收集违规报告 Content-Security-Policy-Report-Only: default-src self; script-src self unsafe-inline unsafe-eval; style-src self unsafe-inline; img-src self data: https:; font-src self; connect-src self https://api.example.com; report-uri /api/csp-report; # 第二阶段强制策略但仍保留部分兼容 Content-Security-Policy: default-src self; script-src self https://cdn.example.com; style-src self unsafe-inline; img-src self data: https://cdn.example.com; font-src self https://fonts.gstatic.com; connect-src self https://api.example.com https://analytics.example.com; frame-src self https://www.youtube.com; upgrade-insecure-requests; report-uri /api/csp-report; # 第三阶段严格策略使用 nonce 替代 unsafe-inline Content-Security-Policy: default-src self; script-src self nonce-{RANDOM} strict-dynamic; style-src self nonce-{RANDOM}; img-src self data: https:; font-src self; connect-src self https://api.example.com; frame-ancestors none; base-uri self; form-action self; report-uri /api/csp-report;2.3 CSP nonce 的服务端生成/** * 服务端 CSP nonce 生成中间件 * 每个请求生成唯一的 nonce防止重放攻击 */ import { randomBytes } from crypto; class CSPMiddleware { /** * 生成 CSP nonceBase64 编码的 16 字节随机数 */ generateNonce(): string { return randomBytes(16).toString(base64); } /** * 构建完整 CSP 头 */ buildCSPHeader(nonce: string): string { const directives [ default-src self, script-src self nonce-${nonce} strict-dynamic, style-src self nonce-${nonce}, img-src self data: https:, font-src self, connect-src self https://api.example.com, frame-ancestors none, base-uri self, form-action self, report-uri /api/csp-report, ]; return directives.join(; ); } /** * Express/Koa 中间件处理函数 */ middleware(req: any, res: any, next: () void): void { // 为每个请求生成独立 nonce const nonce this.generateNonce(); const cspHeader this.buildCSPHeader(nonce); // 设置响应头 res.setHeader(Content-Security-Policy, cspHeader); // 将 nonce 注入模板上下文供 HTML 模板使用 res.locals.cspNonce nonce; next(); } }2.4 CSP 违规报告处理/** * CSP 违规报告接收端点 */ interface CSPViolationReport { csp-report: { document-uri: string; violated-directive: string; blocked-uri: string; original-policy: string; source-file?: string; line-number?: number; column-number?: number; }; } /** * CSP 违规报告处理器 */ class CSPReportHandler { private violations: CSPViolationReport[] []; private deduplicationWindow new Mapstring, number(); /** * 接收并处理 CSP 违规报告 */ handleReport(report: CSPViolationReport): void { const csp report[csp-report]; if (!csp) return; // 去重同一违规 5 分钟内只记录一次 const dedupKey ${csp[violated-directive]}_${csp[blocked-uri]}_${csp[document-uri]}; const now Date.now(); if (this.deduplicationWindow.has(dedupKey)) { const lastReported this.deduplicationWindow.get(dedupKey)!; if (now - lastReported 5 * 60 * 1000) { return; // 5 分钟内重复跳过 } } this.deduplicationWindow.set(dedupKey, now); // 分析违规严重程度 const severity this.classifyViolation(csp[violated-directive]); // 记录和上报 console.warn([CSP Violation ${severity}], { directive: csp[violated-directive], blocked: csp[blocked-uri], page: csp[document-uri], source: csp[source-file], line: csp[line-number], }); // 持久化或发送到监控系统 this.persistViolation({ ...report, severity, timestamp: now }); } /** * 按违规指令类型分类严重程度 */ private classifyViolation(directive: string): critical | warning | info { if (directive.startsWith(script-src)) return critical; if (directive.startsWith(frame-ancestors)) return warning; return info; } private persistViolation(violation: CSPViolationReport { severity: string; timestamp: number }): void { // 写入日志系统或发送到监控平台 // 实际生产环境中使用日志聚合系统如 ELK、Datadog } }三、SRI脚本完整性校验第三方 CDN 脚本可能被篡改或劫持SRI 通过对脚本内容计算哈希来确保完整性。3.1 生成 SRI 哈希# 使用 openssl 计算文件哈希并生成 SRI integrity 属性 cat script.js | openssl dgst -sha384 -binary | openssl base64 -A # 输出: sha384-xxxxx... # 或使用 Node.js 脚本 echo console.log(hello) /tmp/test.js node -e const crypto require(crypto); const fs require(fs); const content fs.readFileSync(/tmp/test.js); const hash crypto.createHash(sha384).update(content).digest(base64); console.log(sha384- hash); 3.2 生产环境使用!-- 带 SRI 校验的第三方脚本引入 -- script srchttps://cdn.example.com/analytics/2.5.1/analytics.min.js integritysha384-oqVuAfXRKap7fdgcCY5dn7vic6Ln7VBIxjG3YOvqLVmJYi7GB45eRZCIy4rAGPp crossoriginanonymous defer /script !-- 带 SRI 的 CSS 引入 -- link relstylesheet hrefhttps://cdn.example.com/ui/1.0.0/theme.css integritysha384-abc123... crossoriginanonymous / !-- 多哈希支持兼容多个安全的版本 -- script srchttps://cdn.example.com/lib/1.x/lib.min.js integritysha384-version1 sha384-version2 crossoriginanonymous /script3.3 构建时自动生成 SRI/** * Vite 插件自动为输出资源生成 SRI 哈希 */ import crypto from crypto; import fs from fs; import path from path; interface SRIOptions { /** 哈希算法 */ algorithm?: sha256 | sha384 | sha512; /** 输出 SRI 映射文件路径 */ outputFile?: string; } function viteSRI(options: SRIOptions {}) { const { algorithm sha384, outputFile dist/sri-manifest.json } options; const sriMap: Recordstring, string {}; return { name: vite-plugin-sri, enforce: post as const, // 在 bundle 生成后计算哈希 generateBundle(_options: any, bundle: any) { for (const [fileName, chunk] of Object.entries(bundle)) { if (chunk.type chunk || (chunk.type asset /\.(js|css)$/.test(fileName))) { const source chunk.type chunk ? chunk.code : (chunk as any).source; if (typeof source ! string) continue; const hash crypto .createHash(algorithm) .update(source) .digest(base64); sriMap[/${fileName}] ${algorithm}-${hash}; } } // 输出 SRI 映射文件供服务端注入 integrity 属性 this.emitFile({ type: asset, fileName: path.basename(outputFile), source: JSON.stringify(sriMap, null, 2), }); }, }; } export default viteSRI;四、Trusted Types从根源防御 DOM XSSTrusted Types 是 CSP 的补充机制要求所有注入 DOM 的字符串都必须通过可信类型创建。它是目前防御 DOM XSS 最彻底的方案。4.1 Trusted Types 策略配置# CSP 中启用 Trusted Types Content-Security-Policy: require-trusted-types-for script; trusted-types default dompurify;4.2 默认策略实现/** * Trusted Types 默认策略 * 在启用 Trusted Types 后所有危险 API 调用都必须通过此策略 */ if (typeof window ! undefined window.trustedTypes) { // 创建默认策略 const defaultPolicy window.trustedTypes.createPolicy(default, { /** * 创建可信 HTML * 使用 DOMPurify 清洗输入确保不会包含恶意脚本 */ createHTML: (input: string) { // 生产环境必须使用 DOMPurify 等专业清洗库 // 以下为示例实际项目应引入 DOMPurify return sanitizeHTML(input) as unknown as TrustedHTML; }, /** * 创建可信脚本 URL * 严格白名单校验只允许受信任的脚本来源 */ createScriptURL: (url: string) { const allowedDomains [ cdn.example.com, static.example.com, www.googletagmanager.com, ]; try { const urlObj new URL(url); if (allowedDomains.some(domain urlObj.hostname domain || urlObj.hostname.endsWith(.${domain}))) { return url as unknown as TrustedScriptURL; } } catch { // URL 解析失败 } throw new TypeError(不允许的脚本来源: ${url}); }, /** * 创建可信脚本 * 默认策略拒绝创建动态脚本必须使用专用策略 */ createScript: (_script: string) { throw new TypeError(不允许通过默认策略创建动态脚本); }, }); } /** * 简单的 HTML 清洗函数示意生产环境使用 DOMPurify */ function sanitizeHTML(html: string): string { // 移除危险标签和属性 const dangerous /script\b[^]*(?:(?!\/script)[^]*)*\/script/gi; const sanitized html.replace(dangerous, ); // 移除事件处理器 const events /\s(on\w)/gi; return sanitized.replace(events, >/** * DOM Purify 专用策略 * 用于 DOMPurify 库的 Trusted Types 集成 */ if (window.trustedTypes) { window.trustedTypes.createPolicy(dompurify, { createHTML: (input: string) { // DOMPurify.sanitize 返回的本身就是安全的 HTML // 实际项目中引入: import DOMPurify from dompurify; return input as unknown as TrustedHTML; }, }); } /** * 安全的 innerHTML 设置辅助函数 * 替代直接使用 element.innerHTML xxx */ function safeSetHTML(element: HTMLElement, html: string): void { if (typeof window ! undefined window.trustedTypes) { // Trusted Types 已启用使用策略创建 const policy window.trustedTypes.getPolicy(dompurify) || window.trustedTypes.getPolicy(default); if (policy) { element.innerHTML policy.createHTML(html) as unknown as string; return; } } // Trusted Types 未启用直接设置降级 element.innerHTML html; }五、安全头配置的完整清单一个生产环境应配置的完整 HTTP 安全响应头响应头作用推荐值Content-Security-Policy资源加载白名单严格 nonce 策略Strict-Transport-Security强制 HTTPSmax-age31536000; includeSubDomainsX-Content-Type-Options禁止 MIME 嗅探nosniffX-Frame-Options防点击劫持DENY或用 CSP frame-ancestorsReferrer-Policy控制 Referrer 信息strict-origin-when-cross-originPermissions-Policy控制浏览器 API 权限camera(), microphone(), geolocation()/** * 安全响应头中间件 * 统一配置所有安全相关响应头 */ function securityHeadersMiddleware(req: any, res: any, next: () void): void { // HSTS强制浏览器使用 HTTPS res.setHeader(Strict-Transport-Security, max-age31536000; includeSubDomains; preload); // 禁止 MIME 类型嗅探 res.setHeader(X-Content-Type-Options, nosniff); // XSS 过滤器旧版浏览器 res.setHeader(X-XSS-Protection, 0); // 现代浏览器已弃用设为 0 避免副作用 // 控制 referrer 信息 res.setHeader(Referrer-Policy, strict-origin-when-cross-origin); // 权限策略 res.setHeader(Permissions-Policy, camera(), microphone(), geolocation(self)); // 跨域隔离大项目可选 // res.setHeader(Cross-Origin-Opener-Policy, same-origin); // res.setHeader(Cross-Origin-Embedder-Policy, require-corp); next(); }总结前端安全防护体系的建设是一个从开启到严格执行的渐进过程CSP从 Report-Only 收集基线数据逐步收紧策略。最终状态是 nonce-based 严格策略不再依赖unsafe-inline。SRI所有从第三方 CDN 加载的脚本和样式必须附带integrity属性。在构建流程中自动生成哈希值避免手动维护。Trusted Types从根源杜绝 DOM XSS——要求所有注入 DOM 的字符串必须通过可信类型策略。配合 DOMPurify 等清洗库将 XSS 攻击面降到最低。其他安全头HSTS、X-Content-Type-Options、Referrer-Policy 等作为防御深度的一环。安全配置的难点不在于知道该怎么做而在于在业务迭代中持续执行。建议将 CSP 违规率、SRI 覆盖率纳入团队的代码质量看板作为 CI 的一道检查门禁。