前端安全-XSS攻击

1. XSS攻击简介

XSS: 跨站脚本攻击，一个网站如果运行了非本站的脚本，那就可能产生XSS攻击。一旦发生了XSS，那攻击者就能够根据XSS漏洞来做很多事情。比如

• 获取页面数据
• 获取cookie
• 劫持前端逻辑
• 发送请求

这样可能带来诸多的危害，比如：

• 偷取网站的任意数据
• 偷取用户资料
• 偷取用户密码和登录态
• 欺骗用户

2. XSS分类

XSS攻击可以分为两大类

• 反射型：url参数直接注入
• 存储型：存储到DB后读取时注入

3.XSS攻击的注入点

• HTML节点内容

比如用户提交的文本中包含了一段script标签<script>alert(1)</script>。如果这样这段脚本如果不经过任何转义直接插入到页面之后，就会产生XSS攻击。

• HTML属性

这个攻击通常用在img标签中。比如图片的url来自用户输入的内容

<img src="#{image}" alt="">
# 如果用户输入的内容为`1 onerror="<script>alert(1)</script>`
<img src="1 onerror="<script>alert(1)</script>" alt="">

这样就又导致了XSS攻击

• JavaScript代码

此类攻击通常是由于js代码中有一部分是来自于用户输入

<script >
const data = "#{content}";
// 比如用户输入的内容为 1"; alert(1);
const data = "1"; alert(1);
</script>

• 富文本

富文本里面是直接可以输入html标签的，这里如果不对用户输入的html标签进行过滤，就很可能产生XSS攻击。

4. 如何防御XSS攻击

• X-XSS-Protection

如果参数出现在HTML内容或属性中，可以设置响应头X-XSS-Protection: 1，这个选项浏览器是默认打开的，它的用途也十分有限，如果它检测到有危害的输入直接被插入到html内容或者属性中，会直接屏蔽这个网页。
这个设定对JavaScript和富文本是无效的，也仅仅只能针对反射型的XSS。

• 防范HTML内容被XSS

将尖括号转义

function escape(str) {
  return str.replace(/</g, '&lt;')
    .replace(/>/g, '&gt;');
}

• 防范HTML属性被XSS

将引号转义(单引号和双引号)，空格

function escape(str) {
  return str.replace(/"/g, '&quto;')
    .replace(/'/g, ''')
    .replace(/s/g, ' ');
}

• 防范JS代码被XSS

将内容转化为JSON字符串

function escape(str) {
  return JSON.stringify(str);
}

• 防范富文本被XSS

采用按白名单过滤的方式，比如Node中我们可以配合cheerio这个库来处理

function xssFilter(html) {
  if (!html) return '';
  const cheerio = require('cheerio');
  const $ = cheerio.load(html);
  const whileList = {
    img: ['src'],
    font: ['color', 'size'],
    a: ['href']
  };
  $('*').each((index, ele) => {
    if (!whileList[ele.name]) {
      $(ele).remove();
      return;
    }
    for (var attr in ele.attribs) {
      if (whileList[ele.name].indexOf(attr) === -1) {
        $(ele).attr(attr, null);
      }
    }
  })
  return $.html();
}

• CSP 内容安全策略

用来指定哪一部分可执行，哪一部分不可执行。比如我们可以在响应头中添加

ctx.set(`Content-Security-Policy`, `default-src 'self'`) // 仅信任同域脚本，内联脚本和其他域下的脚本将不会被执行

更多前端相关问题，请关注我的github: https://github.com/GuoLizhi/awesomejs/