前端学习系列（12）：前端安全防护与最佳实践

最新推荐文章于 2025-04-06 16:08:17 发布

DoYangTan

最新推荐文章于 2025-04-06 16:08:17 发布

阅读量719

点赞数 26

分类专栏：前端学习系列文章标签：前端前端框架学习

本文链接：https://blog.youkuaiyun.com/Azperk/article/details/146324539

版权

前端学习系列专栏收录该内容

15 篇文章

订阅专栏

前端学习系列（12）：前端安全防护与最佳实践

一、回顾与引入

在上一期，我们深入探讨了前端性能优化的多种实战技巧，致力于提升用户的访问体验。而在网络安全问题日益严峻的当下，前端安全同样不容忽视。本期，我们将聚焦前端安全领域，深入剖析常见的安全漏洞，学习相应的防护策略以及构建安全前端应用的最佳实践。

二、常见前端安全漏洞剖析

2.1 XSS（跨站脚本攻击）

XSS攻击是指攻击者在网页中注入恶意脚本，当用户访问该网页时，恶意脚本会在用户浏览器中执行，从而窃取用户数据、破坏页面功能或进行其他恶意操作。XSS攻击主要分为反射型、存储型和DOM - Based型。

反射型XSS：攻击者通过构造恶意链接，诱导用户点击。例如，在一个搜索框中，攻击者构造链接https://example.com/search?q=<script>alert('XSS')</script>，当用户点击链接进行搜索时，恶意脚本会在用户浏览器中执行。
存储型XSS：恶意脚本被存储在服务器端，当用户访问相关页面时，恶意脚本会从服务器获取并在浏览器中执行。常见于留言板、评论区等用户可输入内容的地方，若服务器未对用户输入进行严格过滤，攻击者可将恶意脚本作为留言内容提交，其他用户查看留言时就会触发攻击。
DOM - Based型XSS：利用浏览器DOM的动态特性进行攻击。攻击者通过修改页面的DOM结构，注入恶意脚本。比如，在一个可拖拽元素的页面中，攻击者通过操纵拖拽事件，修改DOM元素的innerHTML属性，从而插入恶意脚本。

2.2 CSRF（跨站请求伪造）

CSRF攻击是指攻击者诱导用户访问一个包含恶意请求的页面，利用用户已登录的身份，在用户不知情的情况下，以用户的名义向目标网站发送恶意请求，执行一些对用户不利的操作，如修改密码、转账等。例如，用户已登录银行网站，此时攻击者发送一封包含恶意链接的邮件，链接指向银行网站的转账接口，并且填充了攻击者的收款账号。当用户点击该链接时，若银行网站未做好CSRF防护，就会执行转账操作。

2.3 SQL注入（前端涉及较少，但需了解）

虽然SQL注入主要是后端漏洞，但前端在数据交互中也可能间接引发。当前端对用户输入数据验证不严格，后端又直接将未经过滤的数据拼接到SQL语句中时，就会发生SQL注入。例如，在登录表单中，若前端未对用户名和密码输入进行过滤，攻击者可在用户名输入框中输入' OR '1'='1，如果后端使用拼接SQL语句的方式验证登录，就可能导致非法登录或数据泄露。

三、前端安全防护策略

3.1 防范XSS攻击

输入验证与过滤：前端对用户输入的数据进行严格验证，确保输入的数据符合预期格式，不包含恶意脚本。可以使用正则表达式等方式进行验证。例如，验证邮箱格式：

function validateEmail(email) {
    const re = /\S+@\S+\.\S+/;
    return re.test(email);
}

输出编码：在将用户输入的数据显示在页面上时，对数据进行编码，将特殊字符转换为HTML实体，防止恶意脚本被解析执行。在React中，可以使用dangerouslySetInnerHTML属性结合DOMPurify库进行安全的HTML渲染。

import DOMPurify from 'dompurify';

const clean = DOMPurify.sanitize('<script>alert("XSS")</script>');
// clean的值为转义后的字符串：&lt;script&gt;alert(&quot;XSS&quot;)&lt;/script&gt;

设置HTTP Only Cookie：对于存储敏感信息的Cookie，设置HttpOnly属性，防止通过JavaScript获取Cookie，降低XSS攻击窃取Cookie的风险。在后端设置Cookie时添加该属性，如在Node.js中：

res.cookie('token', 'your - token - value', { httpOnly: true });

3.2 防范CSRF攻击

CSRF Token机制：在表单或重要请求中添加CSRF Token。后端在生成页面时，为每个用户生成一个唯一的Token，并将其存储在用户会话中。前端在发送请求时，将Token包含在请求参数中，后端验证Token的有效性。例如，在HTML表单中添加Token：

<form action="/transfer" method="post">
    <input type="hidden" name="_csrf" value="{{ csrfToken }}">
    <input type="text" name="amount">
    <input type="submit" value="转账">
</form>

Same - Site Cookie属性：设置Cookie的Same - Site属性，限制Cookie在跨站请求中的发送。Same - Site有Strict、Lax和None三个值。Strict模式下，Cookie仅在同站请求时发送；Lax模式下，在一些安全的跨站请求（如链接跳转）中会发送Cookie；None模式下，跨站请求时会发送Cookie，但需要同时设置Secure属性（表示仅在HTTPS连接下发送）。在后端设置Cookie时添加该属性，如在PHP中：

setcookie('token', 'your - token - value', [
   'samesite' => 'Lax',
   'secure' => true
]);

3.3 防范SQL注入（前端层面辅助）

前端在数据提交前，对可能用于SQL查询的输入数据进行严格验证和过滤，确保数据不会导致SQL注入风险。例如，在输入用户名和密码时，限制特殊字符的输入：

function validateInput(input) {
    const specialChars = /[;,'"*]/;
    return!specialChars.test(input);
}

四、构建安全前端应用的最佳实践

4.1 安全的代码编写习惯

最小权限原则：在JavaScript代码中，只授予变量和函数必要的权限。避免在全局作用域中定义过多变量和函数，防止变量被意外修改或恶意利用。例如，将函数封装在模块中，通过导出必要的接口来使用：

// module.js
const privateFunction = () => {
    // 私有逻辑
};

export const publicFunction = () => {
    // 调用私有函数或执行其他公开逻辑
    privateFunction();
};

避免使用不安全的API：尽量避免使用一些可能存在安全风险的API，如eval()函数。eval()会执行传入的字符串作为JavaScript代码，如果传入的字符串来自用户输入，就可能导致XSS攻击。可以使用更安全的方式来实现相同功能，如使用Function构造函数代替eval()，但也要谨慎使用。

4.2 安全的依赖管理

定期更新依赖库：前端项目通常依赖大量的第三方库，这些库可能存在安全漏洞。定期更新依赖库到最新版本，以获取安全补丁。可以使用工具如npm - check - updates来检查并更新项目中的依赖。
审查依赖库安全性：在引入新的依赖库时，审查其安全性。查看库的文档、社区反馈、安全报告等，确保库没有已知的安全漏洞。避免使用一些维护不活跃或存在安全隐患的库。

4.3 安全测试与监控

安全测试工具使用：利用安全测试工具对前端应用进行定期扫描，检测潜在的安全漏洞。例如，使用ESLint的安全插件（如eslint - plugin - security）来检查JavaScript代码中的安全问题，使用OWASP ZAP等工具对应用进行渗透测试。
实时监控与报警：建立前端应用的实时监控机制，监控应用的运行状态和安全事件。当检测到异常请求、XSS攻击尝试等安全事件时，及时发出报警通知，以便及时采取措施进行处理。