前端安全思考

    前端开发安全问题网上一搜，基本上就两个csrf和xss。整理了一下，发现很多开发细节中也存在安全问题。

1，xss攻击：跨站脚本攻击，

      本质：恶意代码未经过滤，与网站正常的代码混在一起；浏览器无法分辨哪些脚本是可信的，导致恶意脚本被执行。

      分类：存储型（恶意代码存于数据库中后被读取拼接到html返回给前端），反射型（存于url中拼接html返回）及DOM型（打开带有恶意代码的url）。

     规避：输入过滤，html转义，存储型和反射型采用纯前端渲染。csp（内容安全策略）

2，csrf攻击：跨站请求伪造

      本质：攻击网站利用浏览器策略（sessionId写入cookie,同源（一定条件下）下浏览器自动携带cookie）冒用登陆者登录信息对网站进行攻击

     防御：Referrer 验证(如何设置Referrer 

1. 在CSP设置
2. 页面头部增加meta标签
3. a标签增加referrerpolicy属性

)，csrftoken校验（后端返回csrftoken（时间戳+安全随机数），客户端下次请求带上），双cookie校验(

双重Cookie采用以下流程：

• 在用户访问网站页面时，向请求域名注入一个Cookie，内容为随机字符串（例如csrfcookie=v8g9e4ksfhw）。
• 在前端向后端发起请求时，取出Cookie，并添加到URL的参数中
• 后端接口验证Cookie中的字段与URL参数中的字段是否一致，不一致则拒绝。

)，验证码

3，安全编码：

iframe防嵌入：top.location（主窗口） === self.location（当前窗口）判断是否被iframe嵌入，                              html5 sandbox属性

点击劫持：
       ClickJacking 利用透明 iframe 覆盖原网页诱导用户进行某些操作达成目的
       防御：X-Frame-Options头域及top.location（主窗口） === self.location（当前窗口）

CDN劫持：

      出于性能考虑，前端应用通常会把一些静态资源存放到CDN；如果攻击者劫持了            CDN，或者对CDN中的资源进行了污染，攻击者可以肆意篡改我们的前端页面，对用户实施攻击。现在的CDN以支持浏览器提供的SRI为荣，script 和 link 标签有了新的属性 integrity，这个属性是为了防止校验资源完整性来判断是否被篡改。它通过 验证获取文件的哈希值是否和你提供的哈希值一样来判断资源是否被篡改。使用 SRI 需要两个条件：一是要保证 资源同域 或开启跨域，二是在<script>中 提供签名 以供校验。

每个资源文件都可以有一个SRI值，就像下面这样。它由两部分组成，减号（-）左侧是生成SRI值用到的哈希算法名，右侧是经过Base64编码后的该资源文件的Hash值。

<script src=“https://example.js” integrity=“sha384-eivAQsRgJIi2KsTdSnfoEGIRTo25NCAqjNJNZalV63WKX3Y51adIzLT4So1pk5tX”></script>

浏览器在处理这个script元素的时候，就会检查对应的JS脚本文件的完整性，看其是否和script元素中integrity属性指定的SRI值一致，如果不匹配，浏览器则会中止对这个JS脚本的处理。

第三方依赖选用成熟的依赖包；

不在本地存储加密数据

某些方法使用时注意(如eval会直接把入参当js执行)；文件上传大小，类型的限制；错误提示模棱两可；慎重使用自动填充字段；慎用第三方服务

HSTS（HTTP Strict Transport Security）：http严格传输协议，通过下HTTP Header以及一个预加载的清单，来告知浏览器在和网站进行通信的时候强制性的使用HTTPS，而不是通过明文的HTTP进行通信：Strict-Transport-Security: max-age=<expire-time>; includeSubDomains

参考文章：

8大前端安全问题（下） - 马伟的博客

前端安全系列（一）：如何防止XSS攻击？ - 美团技术团队

前端安全系列（二）：如何防止CSRF攻击？ - 美团技术团队