安全.md

常见的 web 前端攻击方式

• XSS 跨站请求攻击
• CSRF 跨站请求伪造

XSS-跨站脚本攻击

简单来讲就是 攻击者想方设法的把js代码在被攻击网站运行, 它有分为永久攻击和暂时攻击

永久攻击: js 代码被嵌入网页中并存储在数据库中, 比如输入框回帖, 结果是要插入网站的, 所以以后每一个人访问这个帖子, 都会运行插入代码

暂时攻击: 利用URL传参的特性, 将 代码 插入, 但是攻击性小于第一种方式

**如何防范? **

永远不要相信用户的输入

最常见也是最方便的就是将用户的输入转义为 html 编码

function escape(str) {
  str = str.replace(/&/g, '&')
  str = str.replace(/</g, '&lt;')
  str = str.replace(/>/g, '&gt;')
  str = str.replace(/"/g, '&quto;')
  str = str.replace(/'/g, '&#39;')
  str = str.replace(/`/g, '&#96;')
  str = str.replace(/\//g, '&#x2F;')
  return str
} // 转义为html编码

// 只允许我接受的东西
escape('<script>alert(1)</script>')
// 转义为 &lt;script&gt;alert(1)&lt;&#x2F;script&gt;

这种方式的缺点就是富文本不能这样转义, 会转义掉其样式

另一种防范方式, 白名单 CSP

白名单可以告诉浏览器哪些外部资源可以执行, 我们需要配置规则, 如何拦截是浏览器来实现

1. 可以设置 http 响应头, Content-Security-Policy
2. 也可以在 html 头部使用 meta 标签

Content-Security-Policy: default-src 'self' // 只允许加载本站资源
Content-Security-Policy: img-src 'https://' // 只允许https加载
Content-Security-Policy: child-src 'none' // 没有限制

也可以使用 http-only 设置 cookie 只用于 http, 不能被 js 读取

CSRF-跨站请求伪造

网站的一些提交行为, 被黑客利用, 你在访问黑客网站的时候, 进行的操作, 会被作用在其他网站上

防范

1. 服务端设置 GET 请求不对数据进行修改
2. 不让第三方网站访问到自己网站的 cookie
3. 阻止第三方请求接口
4. 可以设置 token 来增强提高, 每一次服务器的相应都会有一个新的 token, 客户端的提交则会携带上一次的 token, 否则为垃圾请求
5. 尽量使用 POST, 虽然不能真正的防范, 但增加攻击成本