在第 1 部分中，我们介绍了基本的前端安全概念，以帮助您了解 xss、csrf 和点击劫持等常见漏洞。在这篇文章中，我们将深入研究实用的动手技术以保护您的前端应用程序免受这些和其他威胁。我们将探讨一些重要主题，例如管理第三方依赖项、清理输入、设置强大的内容安全策略 (csp) 以及保护客户端身份验证。

---

1.确保依赖管理的安全

现代 web 应用程序严重依赖第三方库，通常会引入不安全或过时的软件包带来的风险。依赖管理通过降低利用第三方代码漏洞进行攻击的风险，在前端安全中发挥着至关重要的作用。

• 审核软件包：npmaudit、snyk 和 dependabot 等工具会自动扫描依赖项中是否存在漏洞，提醒您注意关键问题并提供建议的修复方案。

• 锁定依赖项版本：在 package.json 中指定依赖项的确切版本或锁定文件（如 package-lock.json），以防止可能引入漏洞的意外更新。

  立即学习“前端免费学习笔记（深入）”；

• 定期更新：设置更新依赖项和审核漏洞的时间表，确保您使用最新、最安全的版本。

---

2.输入验证和数据清理

输入验证和数据清理是保护您的应用程序免受各种注入攻击（尤其是xss）的关键实践。

• 清理用户输入：使用 dompurify 等库来清理 html，在用户输入呈现在页面上之前从用户输入中剥离任何恶意代码。

• 特定于框架的安全功能：许多现代框架，例如 react 和 angular，都通过自动转义变量来提供针对 xss 的内置保护。但是，请谨慎使用 react 中的angerlysetinnerhtml 等方法，并在使用原始 html 之前始终进行清理。

• 服务器端验证：用服务器端验证补充客户端验证，以确保跨层的数据完整性和安全性。

javascript 中的 dompurify 示例: import dompurify from 'dompurify'; const sanitizedinput = dompurify.sanitize(userinput);

---

3.实施内容安全策略 (csp)

内容安全策略 (csp) 是一个强大的工具，可以限制脚本、图像和样式表等资源的加载位置，从而显着降低 xss 攻击的风险。

设置基本 csp

• 定义指令：使用 csp 指令指定脚本、样式和其他资源的可信源。例如，script-src 'self' https://trusted-cdn.com 将脚本源限制为您的域和受信任的 cdn。

• 测试和优化 csp：首先将 csp 设置为仅报告模式，以检测任何违规行为而不强制执行策略。确认后，以强制模式应用该政策。

示例 csp 标头:

Content-Security-Policy: default-src 'self'; script-src 'self' https://trusted-cdn.com;

实践中使用 csp

在 web 服务器配置中应用 csp，例如通过 http 标头或 标记。这将为访问您的应用程序的浏览器强制执行资源加载限制。

---

4.保护身份验证和授权

身份验证和授权对于控制访问和确保客户端数据安全至关重要。

• 使用安全令牌：应安全存储会话令牌和 json web 令牌 (jwt)（通常在 httponly cookie 中以防止 javascript 访问）并针对敏感操作进行加密。

• 正确配置 cors：跨源资源共享 (cors) 限制哪些域可以访问您的 api。使用严格的方法和凭据配置配置 cors 标头以仅允许受信任的来源。

• 基于角色的访问控制 (rbac)：在客户端和服务器上实施 rbac 来控制哪些用户可以访问某些资源和功能，从而降低未经授权操作的风险。

---

5.结论和要点

通过遵循这些实际步骤，您将向安全前端迈出重大一步。保护依赖关系、清理输入、应用 csp 和使用安全令牌是任何现代应用程序的重要措施。在第 3 部分中，我们将了解先进的前端安全技术，包括进一步完善 csp、安全处理敏感数据以及使用安全工具进行审核和测试。

---