在现代化的Web 开发中，单页应用(Single Page Application, SPA) 已经变成了越来越流行的开发方式。使用 Angular，可以轻松地构建一个基于SPA的Web 应用。然而，在构建 SPA 应用时，通常会涉及到 跨站请求伪造(Cross-Site Request Forgery, CSRF) 攻击，这就需要开发人员采取相应的防御措施。
CSRF 是一种攻击，攻击者利用用户在另一个站点的身份信息，向目标站点发送恶意请求。攻击者的目的通常是利用用户身份访问敏感信息(如个人账户信息、支付信息) 或执行恶意操作(如注入恶意代码等)。为了保护应用，Angular 通过内置的 CSRF 防御机制，为 SPA 应用提供了足够的安全性。
Angular CSRF 防御机制
Angular 通过内置的 HttpClient 拦截器和XSRF-TOKEN 机制，为应用提供了对 CSRF 攻击的保护。当应用发送 HTTP 请求时，Angular 将通过 HttpInterceptors 拦截器，自动向后台发送一个包含名为 X-XSRF-TOKEN 的HTTP 头部的 GET 请求，以获取 XSRF-TOKEN 字符串。然后，Angular 会自动将 XSRF-TOKEN 添加到请求的每个 POST、PUT、DELETE 请求的 HTTP 头部，以确保后台在接收到请求前，已经验证了请求的来源。
以下是一个基本的 Angular HTTP 请求示例，它使用 HttpInterceptor 发送 GET 请求来获取 XSRF-TOKEN 字符串，并将它添加到POST 请求头。
-- -------------------- ---- -------
------ - ---------- - ---- ----------------
------ - ---------------- ----------------------- ------------ ----------- - ---- -----------------------
-------------
------ ----- --------------- ---------- --------------- -
------------------- --------------- ----------------------- --
-------------- ----------------- ----- ------------ -
----- ---------- - ---------------
--- ----- - ------------------------------ -- -------
-- ------ --- ---- -- ----------------------------- -
--- - ----------- -------- --------------------------- ------ ---
-
------ -----------------
-
-SPA 应用实践
在实际开发过程中，应用的安全性是至关重要的。在 SPA 应用中，由于所有的操作都在前端完成，所以必须使用服务器解决方案来保证应用的安全性，以避免遭受CSRF 攻击。使用下面这些技术，可以帮助您加强 SPA 应用的安全特性。
1、使用 HTTPS 协议
使用 HTTPS 协议可以让 SPA 应用获得更高的安全性。因为 HTTPS 协议通过加密HTTP 请求数据，从而确保前端与服务端之间的通信不会受到黑客的攻击。
在Angular 中配置 HTTPS 协议只需在您的 Web 服务器中启用 HTTPS 协议即可。
2、使用 HttpOnly cookie
在 SPA应用中，避免使用JavaScript中的cookie，而是应该使用HttpOnly cookie，HttpOnly cookie只是在服务端有效，保护用户账户信息的安全性。而JS cookie会让用户账户更容易遭到攻击。
以下是一个基本的设置 HttpOnly cookie 的示例，您可以在ngOnInit 生命周期钩子函数中使用它。
-- -------------------- ---- -------
------ - ---------- ------ - ---- ----------------
------ - ------------- - ---- ---------------------
------------
--------- -----------
------------ -----------------------
---------- -----------------------
--
------ ----- ------------ ---------- ------ -
------------------- -------------- -------------- --
----------- ---- -
----- ------- - --- -------
--------------------------------- - ---
--- ------ -
-------------------------------------------------- -
--------------------- -
-------------------
------------------------------------ --------- ---------- ---------- ---------- ------ --------
-
-3、使用 Content Security Policy
Content Security Policy (CSP) 是一种安全策略，可以防止特定 URL 被嵌入到 HTML 文档中。通过 CSP，在 SPA 应用中防止恶意代码注入到页面中，从而保护用户的安全信息。
对于 Angular 应用，开发人员可以通过配置 meta 标签来添加 Content Security Policy，如下所示：
<meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self' 'unsafe-inline' 'unsafe-eval'; connect-src 'self'; img-src 'self'; style-src 'self' 'unsafe-inline'">
结论
Angular 对 CSRF 攻击提供了一定的防御机制，但仅仅依靠 Angular 自带的 CSRF 防御机制仍然不足以保证您的应用的安全性。通常需要借助额外的防御措施，如 HttpOnly Cookie、HTTPS 等来提高 SPA 应用的安全性。在开发应用时，请注意遵循安全开发最佳实践，将安全性放在最高优先级。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/675029c7fbd23cf89073e60c