前端框架安全防范

前端框架安全防范

在现代Web开发中，前端框架如Angular和React已经成为构建复杂单页面应用（SPA）的主流工具。然而，随着应用复杂度的增加，安全问题也变得越来越重要。本文将介绍如何在使用Angular和React框架时，防止常见的安全漏洞。

Angular 安全指南

防止跨站脚本攻击（XSS）

跨站脚本攻击（XSS）是指攻击者通过在网页中注入恶意脚本，从而窃取用户信息或执行其他恶意操作的行为。Angular通过以下措施来防止XSS攻击：

1. 值的清理：
   Angular会将所有值视为不可信的，并根据不同的上下文进行清理。主要的安全上下文包括：

   • HTML：用于将值解释为HTML，例如绑定到innerHTML属性时。
   • Style：用于将CSS绑定到样式属性时。
   • URL：用于URL属性，例如<a href>。
   • Resource URL：用于加载和执行代码的URL，例如<script src>。

2. 直接使用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攻击。

1. 客户端保护：
   Angular的http模块内置了对CSRF防护的支持，默认启用了CookieXSRFStrategy。在发送HTTP请求之前，CookieXSRFStrategy会查找名为XSRF-TOKEN的cookie，并设置一个名为X-XSRF-TOKEN的请求头，其值为该cookie的值。

2. 服务器端验证：
   服务器需要设置初始的XSRF-TOKEN cookie，并在每次状态修改请求中确认请求头中的X-XSRF-TOKEN值与cookie中的值匹配。

React 安全指南

防止跨站脚本攻击（XSS）

React通过以下措施防止XSS攻击：

1. 默认数据绑定：
   使用花括号{}进行默认数据绑定时，React会自动对其值进行转义，从而防止XSS攻击。这种保护仅在渲染文本内容时有效，而不适用于HTML属性。

<div>{data}</div>

2. 避免动态属性值：
   避免未经过自定义验证的动态属性值。

// 不推荐的做法
<form action={data}>...

3. URL验证：
   使用验证函数来避免基于javascript: URL的脚本注入。可以使用本地URL解析函数进行验证，然后将解析后的协议属性匹配到允许列表。

function validateURL(url) {
  const parsed = new URL(url);
  return ['https:', 'http:'].includes(parsed.protocol);
}

<a href={validateURL(url) ? url : ''}>点击这里</a>

4. 安全地插入HTML：
   使用dangerouslySetInnerHTML将HTML直接插入DOM节点时，必须事先对内容进行清理。建议使用DOMPurify进行清理。

import purify from "dompurify";

<div dangerouslySetInnerHTML={{ __html: purify.sanitize(data) }} />

5. 避免危险的库代码：
   避免使用包含dangerouslySetInnerHTML、innerHTML、未经验证的URL或其他不安全模式的库。

参考链接

• Angular Security - Preventing XSS
• DOMPurify
• React Security - Preventing XSS
• XSRF Protection in Angular