前端XSS攻击

什么是XSS攻击

XSS也称为跨脚本攻击，是一种恶意脚本，可以获取用户得cookie、token、session

XSS攻击的分类

• 反射型
  反射型就是攻击者构造出恶意的url，其中包含了恶意代码，用户点击之后，服务端取出并且返回给到前端，然后在用户端执行了恶意代码，导致用户信息泄露等损失，如网站的搜索、跳转等

• DOM型
  DOM型指的就是攻击者输入恶意的代码前端没有做任何过滤被执行了，然后恶意代码发送到攻击者的网站，模拟用户的行为。

1. 尽量少使用appenChid、innerHTML、outerHTML等标签，而使用innerText、textContent、setAttribute
2. 前端过滤

url: 可以使用encodeURIComponent 进行转义

encodeURIComponent('http://www.baidu.com')
"http%3A%2F%2Fwww.baidu.com"

非url

encodeHtml(str) {
      if(str.length == 0) return "";
    return str.replace(/"/g, '"')
            .replace(/'/g, ''')
            .replace(/</g, '&lt;')
            .replace(/>/g, '&gt;')
            .replace(/&/g,'&amp;')
}

document.write("<script>alert('我是恶意代码')</script>")
document.write(encodeHtml("<script>alert('我是恶意代码')</script>"))

当然这是一个简单的demo，我们常使用Angular、Vue、React框架都帮我们做好了
比如Angular

import { DomSanitizer } from '@angular/platform-browser';

export class myPage1{
  constructor(private sanitizer: DomSanitizer) {
  }

  onInit():void{
      this.html = this.sanitizer.bypassSecurityTrustHtml('html代码');
     // this.sanitizer 还有很多方法
  }
}

Vue的 v-text 、v-html

• 储存型
  储存型和反射型很相似，区别在于储存型是存在数据当中，而反射型是存在URL当中
  常见的话就是商品的评论、发博文等

当然实际情况会跟更复杂，通常对于发生与用户交付的行为，比如input的输入，前端一定要做好校验，限制用户输入的长度、格式等