关于前端的安全问题

前端安全涉及到哪些内容？

1. 浏览器同源策略

这是最常见的，也是经常碰到的一个问题。为了保护数据安全，当前数据请求的接口，如果遇到不同源的JS请求的时候，就会报错。
比如当前源是 a.com.
以下几种都会出现跨域问题：

1. a.com 原因：协议不同，一个http,一个https
2. a.com:81 原因：端口号不同
3. b.a.com 原因： host不同

2. xss

全程Cross Site Script Attack，即 跨站脚本攻击。
简单理解，即通过某种手段，在当前网站中，植入一些可执行的脚本，以达到攻击的目的。
比如：

1. 通过评论，或者提交某些内容的形式，将攻击代码作为内容提交
2. url上带一些可执行脚本

xss的类型一般分为：

1. 存储型 即将一些攻击代码以保存内容的形式，存储到数据库中，下次加载这条数据的时候，里面的攻击代码将会被执行
2. 反射性 将代码注入到某些链接当中，比如a.com?code=. 如果没有做任何处理，那么在打开a.com的时候，就会弹出一个111的弹框。
3. DOM型 如 innerHTML 插入一些元素，比如src上带有攻击脚本的img标签
   还有 location，document.referer，document.write等

如何防范xss？

1. 永远不要信任用户提交的内容，对提交的内容进行编码。
2. 尽量避免使用react或者vue的dangerouslySetInnerHTML或者v-html，如果确实需要使用，请参考第一条，保证插入的数据有进行编码。
3. 内容安全策略CSP（Content-Security-Policy），可以在http header里添加，也可以在网页的里添加，具体使用为：Content-Security-Policy: default-src ;
   仅允许本源的 Content-Security-Policy: default-src 'self';
   允许来自信任的域名及其子域名 Content-Security-Policy: default-src 'self' *.trust.com;
4. http header配置set-cookie = httponly，可以禁止JS访问cookie，保护cookie不被恶意插入的攻击代码获取。

3. csrf

即：cross-site request forgery 跨站点请求伪造。
诱导用户进入一个网站，然后利用用户在被攻击网站的身份凭证，绕过被攻击网站后台的用户验证，发送请求。 防范方法：

1. Cookie SameSite：
   Strict： 完全禁止第三方网站获取cookie，但是这样做也有问题，就是比如使用第三方登录的时候，会永远都处于未登录状态。
   Lax： 除了get请求，其他方式都禁止cookie的获取
   None： 必须同时设置Secure属性（Cookie 只能通过 HTTPS 协议发送），否则无效
2. 设置request header里的referer，后台验证referer是否在自己的白名单内来进行是否是合法提交的请求。
3. 使用token代替cookie，并且将其放到header的自定义字段内。
4. 使用验证码或者其他需要用户手动操作的方式，来确保该请求确实用户主动发起，且是在合法网站内发起。

4. hsts

网站开启HSTS（HTTP Strict Transport Security） ，简单概括就是强制客户端使用HTTPS访问页面的。

5. x-frame-options

iframe和image一样，src上可以被带上攻击代码，
通过这个可以设置是否允许嵌套iframe，来达到防止xss攻击的目的

1. DENY：设置之后，完全不允许嵌套iframe，哪怕是同域名的。
2. SAMEORIGIN: 允许同域名的iframe嵌套。
3. ALLOW-FROM uri: 允许uri的iframe嵌套。