前端框架安全防范
在现代Web开发中，前端框架如Angular和React已经成为构建复杂单页面应用（SPA）的主流工具。然而，随着应用复杂度的增加，安全问题也变得越来越重要。本文将介绍如何在使用Angular和React框架时，防止常见的安全漏洞。
Angular 安全指南
防止跨站脚本攻击（XSS）
跨站脚本攻击（XSS）是指攻击者通过在网页中注入恶意脚本，从而窃取用户信息或执行其他恶意操作的行为。Angular通过以下措施来防止XSS攻击：
-
值的清理：
Angular会将所有值视为不可信的，并根据不同的上下文进行清理。主要的安全上下文包括：- HTML：用于将值解释为HTML，例如绑定到
innerHTML属性时。 - Style：用于将CSS绑定到样式属性时。
- URL：用于URL属性，例如
<a href>。 - Resource URL：用于加载和执行代码的URL，例如
<script src>。
- HTML：用于将值解释为HTML，例如绑定到
-
直接使用DOM API和显式清理：
除非强制使用可信类型，否则内置浏览器的DOM API不会自动保护您免受安全漏洞的影响。建议使用DOMPurify来清理HTML并防止XSS攻击。
<h3>绑定 innerHTML</h3>
<p>绑定值：</p>
<p class="e2e-inner-html-interpolated">{{htmlSnippet}}</p>
<p>绑定到 innerHTML 的结果：</p>
<p class="e2e-inner-html-bound" [innerHTML]="htmlSnippet"></p>
防止跨站请求伪造（CSRF）
跨站请求伪造（CSRF）是一种通过伪造用户请求来执行未经授权操作的攻击。Angular通过其内置的XSRFStrategy来防止CSRF攻击。
-
客户端保护：
Angular的http模块内置了对CSRF防护的支持，默认启用了CookieXSRFStrategy。在发送HTTP请求之前，CookieXSRFStrategy会查找名为XSRF-TOKEN的cookie，并设置一个名为X-XSRF-TOKEN的请求头，其值为该cookie的值。 -
服务器端验证：
服务器需要设置初始的XSRF-TOKENcookie，并在每次状态修改请求中确认请求头中的X-XSRF-TOKEN值与cookie中的值匹配。
React 安全指南
防止跨站脚本攻击（XSS）
React通过以下措施防止XSS攻击：
- 默认数据绑定：
使用花括号{}进行默认数据绑定时，React会自动对其值进行转义，从而防止XSS攻击。这种保护仅在渲染文本内容时有效，而不适用于HTML属性。
<div>{data}</div>
- 避免动态属性值：
避免未经过自定义验证的动态属性值。
// 不推荐的做法
<form action={data}>...
- URL验证：
使用验证函数来避免基于javascript:URL的脚本注入。可以使用本地URL解析函数进行验证，然后将解析后的协议属性匹配到允许列表。
function validateURL(url) {
const parsed = new URL(url);
return ['https:', 'http:'].includes(parsed.protocol);
}
<a href={validateURL(url) ? url : ''}>点击这里</a>
- 安全地插入HTML：
使用dangerouslySetInnerHTML将HTML直接插入DOM节点时，必须事先对内容进行清理。建议使用DOMPurify进行清理。
import purify from "dompurify";
<div dangerouslySetInnerHTML={{ __html: purify.sanitize(data) }} />
- 避免危险的库代码：
避免使用包含dangerouslySetInnerHTML、innerHTML、未经验证的URL或其他不安全模式的库。
参考链接
- Angular Security - Preventing XSS
- DOMPurify
- React Security - Preventing XSS
- XSRF Protection in Angular
