前端面试题49（如何集成和使用CSP 来增强前端安全性？）
前端面试题49（如何集成和使用CSP 来增强前端安全性？）
Content Security Policy (CSP) 是一种帮助防止跨站脚本(XSS)和其他代码注入攻击的安全策略。通过明确指定浏览器可以加载或执行哪些资源，CSP 有效限制了恶意内容的执行。下面是如何在实际项目中集成和使用 CSP 的步骤：
1. 确定CSP策略
首先，你需要确定你的CSP策略。这包括决定允许从哪些源加载内容，比如脚本、样式、图片、字体等。CSP策略主要通过HTTP头部Content-Security-Policy
来设置，你可以定义如下指令：
default-src: 设定默认的加载来源，如果没有为特定类型指定来源，则使用此设置。script-src: 允许的脚本来源。style-src: 允许的样式表来源。img-src: 允许的图片来源。connect-src: 允许的WebSocket或XMLHttpRequest连接的来源。
2. 添加CSP HTTP头部
在服务器端配置中添加Content-Security-Policy
头部。以下是设置一个基本CSP的例子，它只允许从当前域加载资源，并且只允许内联脚本（出于演示目的，实际生产中应尽量避免内联脚本）：
Content-Security-Policy: default-src 'self'; script-src 'self' 'unsafe-inline'; style-src 'self' 'unsafe-inline'; img-src 'self' data:;
3. 使用报告模式测试CSP
在正式实施之前，建议先使用CSP的报告模式(report-only)来监控策略的影响，这样不会阻止任何内容加载，但会报告违反策略的行为。修改头部为：
Content-Security-Policy-Report-Only: default-src 'self'; script-src 'self' 'unsafe-inline'; style-src 'self' 'unsafe-inline'; img-src 'self' data:;
并确保设置了报告接收地址：
Content-Security-Policy-Report-Only: ..., report-uri /csp-violation-report;
4. 处理CSP报告
根据报告调整策略，直到你确信策略既安全又不干扰正常功能。报告通常以POST请求发送到指定的URI，包含违反策略的具体信息。
5. 非HTTPS环境的考量
如果网站不是全站HTTPS，需要注意CSP对非安全上下文的限制可能更严格，因为许多现代浏览器要求某些类型的资源必须通过HTTPS加载。
6. 使用nonce或hashes替代'unsafe-inline'
为了进一步提高安全性，避免使用'unsafe-inline'
，而是为内联脚本和样式使用nonce（一次性数字）或基于哈希的规则。例如：
Content-Security-Policy: script-src 'self' 'nonce-{nonce}'; style-src 'self' 'sha256-{hash}';
这里，{nonce}
是服务器生成的一次性随机字符串，需要在每个页面加载时动态生成并附加到内联脚本的nonce
属性上；{hash}
是对内联样式内容的哈希值。
7. 使用工具和库辅助管理CSP
考虑到CSP配置的复杂性，可以考虑使用如csp-generator这样的工具来生成和评估策略，或使用诸如Helmet（针对Node.js应用）之类的库来简化集成过程。
通过上述步骤，你可以在实际项目中有效地集成和使用Content Security Policy，显著提升前端应用的安全性。