前端安全之XSS攻击（跨域脚本攻击）

最新推荐文章于 2025-06-16 18:52:44 发布

原创最新推荐文章于 2025-06-16 18:52:44 发布 · 2w 阅读

7 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #安全 #xss

前端常见问题和解决方案汇总专栏收录该内容

24 篇文章

订阅专栏

本文详细阐述了XSS攻击的类型，包括反射性XSS、存储型XSS和DOM/本地XSS，介绍了HTML转义、XSS库过滤和HttpOnly cookie策略，以提升网站安全防护能力。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

提示：前端查漏补缺，仅代表个人观点，不接受任何批评

提示：以下是本篇文章正文内容，下面案例可供参考

一、XSS是什么？

全称：跨站脚本漏洞（Cross Site Scripting，简写作XSS）是Web应用程序在将数据输出或者展示到网页的时候存在问题，导致攻击者可以将对网站的正常功能造成影响甚至窃取或篡改用户个人信息，其诱发的主要原因是没有针对用户输入来源的数据以及不可信数据源的过滤。

二、XSS 类型划分

1.反射性XSS （Reflected XSS）

常见情况是攻击者通过构造一个恶意链接的形式，诱导用户传播和打开，由于链接内所携带的参数会回显于页面中或作为页面的处理数据源，最终造成XSS攻击。

2.存储型XSS （Stored XSS）

存储型XSS是持久化的XSS攻击方式，通过用户输入个人信息或者发表文章的方式将恶意代码存储于服务器端，当其他用户再次访问页面时触发，造成XSS攻击。

3.基于DOM或本地的XSS攻击（DOM-based or local XSS）

同样也是利用对数据源不可靠，缺乏过滤，由于开发过程中，不可避免部分数据需要回填到DOM中，例如href、src、

三、XSS防范手段

1.htmlencode转义特殊字符

大部分的论坛或者博客平台，注册账号都会允许用户填写个人信息，包括昵称、邮箱和个性签名等，此类文本信息属于非富文本类型，最常见的方法就是对尖括号标签转义成实体字符存储，由于是非富文本信息，并且以标签内容的形式展示，如果不使用框架渲染，直接原生js通过docoment.getElementById(‘xxx’).innerText = 'your name’展示回页面

代码如下（示例）：

const htmlEncode = function (handleString){
    return handleString
    .replace(/&/g,"&amp;")
    .replace(/</g,"&lt;")
    .replace(/>/g,"&gt;")
    .replace(/ /g,"&nbsp;")
    .replace(/\'/g,"&#39;")
    .replace(/\"/g,"&quot;");
}

2.引入XSS库针对用户输入源过滤，设置标签白名单（node.js）

通过限定白名单，仅允许常见的文本展示标签以及图片img标签进入白名单，这部分会再过滤后被保留，并且标签内的class和style属性也会被保留；其他属性和诸如script、iframe等标签都会被直接过滤掉。

代码如下（示例）：

import * as xss from 'xss';
function handleXss(content: Content) {
  // 设置HTML过滤器的白名单
  const options = {
    whiteList: {
      p: ['class', 'style'],
      em: ['class', 'style'],
      strong: ['class', 'style'],
      br: ['class', 'style'],
      u: ['class', 'style'],
      s: ['class', 'style'],
      blockquote: ['class', 'style'],
      li: ['class', 'style'],
      ol: ['class', 'style'],
      ul: ['class', 'style'],
      h1: ['class', 'style'],
      h2: ['class', 'style'],
      h3: ['class', 'style'],
      h4: ['class', 'style'],
      h5: ['class', 'style'],
      h6: ['class', 'style'],
      span: ['class', 'style'],
      div: ['class', 'style'],
      img: ['src', 'class', 'style', 'width'],
    },
  }; 
  // 自定义规则
  const myxss = new xss.FilterXSS(options);
  // 直接调用 myxss.process() 即可
  content.content = myxss.process(content.content);
  return content;
}

style属性也不容忽视，因此我们需要在option参数中额外为style属性设置白名单，确保style属性安全可控：

   css: {
      whiteList: {
        color: true,
        'background-color': true,
      },
    }

3.cookie设置HttpOnly，配合token或验证码防范

针对信息源的过滤，针对不可信数据源的过滤，已经能达到初步的效果，但这远远不够，毕竟没有绝对的安全。
由于大部分攻击者会想要获取到用户的cookie去做别的坏事，所以我们需要在http的响应头set-cookie时设置httpOnly，让浏览器知道不能通过document.cookie的方式获取到cookie内容。