前端安全以及防范

1、XSS----跨站脚本攻击

　　原理：页面渲染的数据中包括可运行的脚本

　　注入点：html节点的内容中；html中DOM元素的属性中；JavaScript代码；富文本

　　防范：①http响应头中添加x-xss-protection，值为0为关闭，值为1为打开（默认）

　　　　　②对特定字符做转义：用&lt;替换<，用&gt;代替>，用&quot;代替"，用&#39;代替'

　　　　　③CPS----内容安全策略：用于指定哪些内容可执行

2、CSRF----跨站请求伪造

　　原理：在第三方网站向本网站发起请求

　　防范：①禁止第三方网站请求本网站的cookie，设置same-site属性，strict表示所有的第三方都不能请求本网站的cookie，lax表示链接可以请求，但是form表单和ajax请求不行

　　　　　②本网站前端添加验证信息：使用验证码和添加token验证

　　　　　③referer验证：禁止来自第三方的请求

　　　　　④使用post请求：使用post请求攻击方必须要构造一个form表单才可以发送请求，稍微麻烦点。但是很多网站都是用get请求，可见前端并不能很有效的阻止攻击，这个是后端主要负责。

3、点击劫持

　　原理：第三方网站通过iframe内嵌某个网站，并且将iframe设置为透明不可见，将其覆盖在其他经过伪装的DOM上，伪装的可点击DOM（按钮等），与实际可点击的那个DOM位置相同，当用户点击伪装的DOM时，实际上点击的是iframe中内嵌的DOM从而触发了请求操作，这个过程用户并不知道。

　　防范：①JavaScript禁止内嵌：当网页没有内嵌时，top和window是相等的，当有内嵌时，top和window是不相等的，可以加以下判断：

　　　　　　<script>
　　　　　　　　if (top.location != window.location) {
   　　　　　　　　 //如果不相等，说明使用了iframe，可进行相关的操作
　　　　　　　　}
　　　　　　</script>

　　　　　　但是这种方法不是万能的，iframe标签中sandbox属性可以禁止内嵌网页的脚本：

　　　　　　<iframe sandbox='allow-forms' src='...'></iframe>

　　　　　②设置X-Frame-Options:DENY（禁止内嵌）/SAMEORIGIN（只允许同域名页面内嵌）/ALLOW-FROM（指定可以内嵌的地址）

　　　　　③验证码操作