前端面试题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连接的来源。
• 更多指令请参考MDN文档。

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，显著提升前端应用的安全性。