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

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

---

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

一、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,"&")
    .replace(/</g,"<")
    .replace(/>/g,">")
    .replace(/ /g," ")
    .replace(/\'/g,"'")
    .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内容。

---

总结

本文主要总结归纳了实践过程中针对XSS漏洞的防护措施，首先针对用户输入源和不可信数据源需要我们做好必要的过滤和校验，其次，通过CSP安全策略和其他HTTP响应头的设置等进一步确保安全性