前端安全你知多少？

最新推荐文章于 2026-04-07 09:41:45 发布

原创

最新推荐文章于 2026-04-07 09:41:45 发布 · 2k 阅读

标签

#安全

不知道大家感受到了没有，这几年系统安全越来越受到重视，不仅仅是公司层面，而是国家层面的，比如最近就有国家层面的安全攻防演练，专门的安全公司来“找茬”。

安全不仅仅是后端关注的，前端在这方面也有很多的点需要注意，不仅是日常工作中，在面试中对于安全也是重点的考察方向。今天带来一篇前端安全相关的文章，比较详细的介绍了前端面临的一些安全问题以及应对办法，希望大家看完有收获。

前言

在前端开发领域，前端安全经常被公司忽视，这些公司大部分都是以业务为中心的公司，认为前端只是页面仔，画个页面调个接口，能有多大安全隐患？下面我将举几个前端安全相关的例子！

下面这些内容都还是基于前端开发层面的思考和总结，在处理安全漏洞方面，前端是存在一定的局限性，所以前端的防护措施只是第一道防线，后端的安全验证和防护同样很重要。

先给自己挖个坑，后面我会把文中提到的每一项漏洞攻击都单独写一篇详细的文章，争取可以把这些内容写的更细更全，感兴趣的同学可以关注一波。

跨站脚本攻击（XSS）

什么是XSS

它指的是攻击者通过在网页中注入恶意的脚本代码（一般是 JavaScript 代码），当其他用户访问该网站时，浏览器会执行这些恶意脚本。恶意脚本可以窃取用户的会话 Cookie 信息，从而劫持用户会话，获取用户的登录凭证，或者篡改网页内容，将用户重定向到恶意网站，还能够收集用户的敏感信息。

例如，一个论坛网站允许用户发表评论，如果攻击者在评论中插入一段恶意的 JavaScript 代码，当其他用户查看该评论时，浏览器就会执行这段恶意代码。因为当浏览器加载网页时，它会按照 HTML 规范来解析和执行其中的代码，攻击者插入的恶意 JavaScript 代码被包含在网页中，浏览器就会视为它是合法的脚本来执行。
XSS 攻击通常发生在以下场景
1. 页面没有对表单输入内容进行充分的过滤。
2. 直接将用户输入的数据在页面上输出，没有进行编码处理。

XSS 攻击解决方案

通过设置 HTTP 响应头来限制页面可以加载和执行的资源。以 Apache 服务器和Nginx 服务器为例：
在将用户输入的数据输出到页面时，进行适当的编码，以防止脚本被执行。
encodeURI() 函数：对整个 URI 进行编码，除了一些特殊字符（如 : 、 / 、 ? 、 # 、 [ 、 ] 、 @ 、 ! 、 $ 、 & 、 ' 、 ( 、 ) 、 * 、 + 、 , 、 ; 、 = ）不会被编码。
encodeURIComponent() 函数：对 URI 的组成部分进行编码，会对更多的字符进行编码，包括 / 等。
```
    // 以使用 encodeURIComponent() 函数为示例
    function outputUserData(userInput) {
         let encodedInput = encodeURIComponent(userInput);
         document.write(encodedInput);
    }

   let userData = "<script>alert('XSS')</script>";
   outputUserData(userData);
```
在实际应用中，需要根据具体的输出场景选择合适的编码函数。通常，如果要将用户输入作为 URL 的一部分输出，使用 encodeURIComponent() 更合适。如果是要在页面中直接显示用户输入的内容，可能需要根据具体情况进一步处理编码后的结果。
对用户输入的内容进行严格的验证，只允许符合预期格式和内容的数据通过。
使用白名单机制，明确规定允许的输入字符和格式。
对输入数据进行消毒处理，去除可能的恶意脚本代码或特殊字符。

输入验证与消毒

    // 一段简单的示例，用于防止 XSS 攻击的 JavaScript 输入验证和清理函数
    function sanitizeInput(input) {
        // 去除 HTML 和 XML 标签
        input = input.replace(/<[^>]*>|&[^;]*;/g, '');

        // 编码特殊字符
        input = encodeURIComponent(input);

        // 去除换行符和制表符
        input = input.replace(/\n|\r|\t/g,'');

        // 限制输入长度
        if (input.length > 1000) {
            input = input.substring(0, 1000);
        }

        return input;
    }

    // 使用示例
    let userInput = "<script>alert('XSS')</script>";
    let sanitizedInput = sanitizeInput(userInput);
    console.log(sanitizedInput);  // "alert('XSS')"

输出编码
使用内容安全策略（CSP）

    // Apache 服务器在 .htaccess 文件中添加以下内容来设置 CSP 响应头
    Header set Content-Security-Policy "default-src 'elf'; script-src 'elf' https://example.com; style-src 'elf' https://fonts.googleapis.com"
    
    //  Nginx 服务器可以在 server 或 location 块中添加类似以下的配置
    add_header Content-Security-Policy "default-src 'elf'; script-src 'elf' https://example.com; style-src 'elf' https://fonts.googleapis.com";
    
    // 配置完成后，重新启动服务器以使更改生效

跨站请求伪造（CSRF）

什么是CSRF

它利用用户在已登录的受信任网站上的身份认证信息，在用户不知情的情况下，以用户的名义向网站发送恶意请求，所以CSRF 攻击通常依赖于网站对用户请求的信任和浏览器在发送请求时自动包含登录凭证（如 Cookie）的特性。

例如，我们登录了一个银行网站，该网站在登录期间会信任我们的浏览器发出的请求。如果攻击者设法诱使我们访问了一个恶意网站，这个恶意网站可能会向银行网站发送一个请求，比如转账请求，而由于我们的浏览器在银行网站的登录状态仍然有效，银行网站可能会处理这个恶意请求，导致资金被非法转移。
CSRF 攻击通常发生在