什么是同源策略
两个页面地址中的协议，域名，端口号一致，则表示同源
为什么需要同源策略
设置同源策略的主要目的是为了安全，如果没有同源限制，在浏览器中的cookie等其他数据可以任意读取，不同域下的DOM任意操作，ajax任意请求其他网站的数据，包括隐私数据。
XSS
XSS（Cross Site Script）跨站脚本攻击：指的是攻击者向网页注入恶意的客户端代码，通过恶意的脚本对客户端网页进行篡改，从而在用户浏览网页时，对用户浏览器进行控制或者获取用户隐私数据的一种攻击方式。
XSS的本质
- 恶意代码未经过滤，与网站正常的代码混在一起；浏览器无法分辨哪些脚本是可信的，导致恶意脚本被执行。
- 而由于直接在用户的终端执行，恶意代码能够直接获取用户的信息，或者利用这些信息冒充用户向网站发起攻击者定义的请求。
- 在部分情况下，由于输入的限制，注入的恶意脚本比较短。但可以通过引入外部的脚本，并由浏览器执行，来完成比较复杂的攻击策略。
XSS 攻击类型
- 存储型：即攻击被存储在服务端，常见的是在评论区插入攻击脚本，如果脚本被储存到服务端，那么所有看见对应评论的用户都会受到攻击。例如 2015 年喜马拉雅的专辑名称允许用户编写
<script> 标签。
- 反射型：攻击者将脚本混在 URL 里，服务端接收到 URL 将恶意代码当做参数取出并拼接在 HTML 里返回，浏览器解析此 HTML 后即执行恶意代码。例如 Q 群或者邮件中发送恶意链接，用户点击恶意链接，然后解析 URL 执行恶意代码。
- DOM 型：攻击者通过各种手段将恶意脚本注入用户的页面中。例如通过网络劫持（WiFi 路由器劫持、本地恶意软件劫持等）在页面传输过程中修改 HTML 页面内容。
XSS 防范措施
- 输入检查：对输入内容中的 script 和 <iframe> 等标签进行转义或者过滤
- 设置 httpOnly：设置此属性可防止 JavaScript 获取 Cookie，只能在 HTTP 请求过程中使用 Cookie
- 开启 CSP 白名单：即开启白名单，可阻止白名单以外的资源加载和运行
CSRF
- CSRF（Cross-site request forgery）跨站请求伪造：攻击者诱导受害者进入第三方网站，在第三方网站中，向被攻击网站发送跨站请求。
- 利用受害者在被攻击网站已经获取的注册凭证，绕过后台的用户验证，达到冒充用户对被攻击的网站执行某项操作的目的。
CSRF的本质
- 攻击一般发起在第三方网站，而不是被攻击的网站。被攻击的网站无法防止攻击发生。
- 攻击利用受害者在被攻击网站的登录凭证，冒充受害者提交操作；而不是直接窃取数据。
- 整个过程攻击者并不能获取到受害者的登录凭证，仅仅是“冒用”。
- 跨站请求可以用各种方式：图片URL、超链接、CORS、Form提交等等。部分请求方式可以直接嵌入在第三方论坛、文章中，难以进行追踪。
- CSRF通常是跨域的，因为外域通常更容易被攻击者掌控。但是如果本域下有容易被利用的功能，比如可以发图和链接的论坛和评论区，攻击可以直接在本域下进行，而且这种攻击更加危险。
CSRF 攻击类型
GET类型的CSRF：
<!DOCTYPE html>
<html>
<body>
<h1>黑客的站点：CSRF 攻击演示</h1>
<img src="https://jsliang.top/index.html?user=hacker&number=100">
</body>
</html>
- 黑客将转账的请求接口隐藏在 img 标签内，欺骗浏览器这是一张图片资源。
- 当该页面被加载时，浏览器会自动发起 img 的资源请求，如果服务器没有对该请求做判断的话，那么服务器就会认为该请求是一个转账请求，于是用户账户上的 100 块就被转移到黑客的账户上去了。
POST类型的CSRF
<!DOCTYPE html>
<html>
<body>
<h1>黑客的站点：CSRF 攻击演示</h1>
<form id='hacker-form' action="https://jsliang.top" method=POST>
<input type="hidden" name="user" value="hacker" />
<input type="hidden" name="number" value="100" />
</form>
<script>
document.getElementById('hacker-form').submit();
</script>
</body>
</html>
- 在页面中构建了一个隐藏的表单，该表单的内容就是极客时间的转账接口。
- 当用户打开该站点之后，这个表单会被自动执行提交；当表单被提交之后，服务器就会执行转账操作。
- 因此使用构建自动提交表单这种方式，就可以自动实现跨站点 POST 数据提交。
链接类型的CSRF
<a href="http://test.com/csrf/withdraw.php?amount=1000&for=hacker" taget="_blank">
重磅消息！！
<a/>
链接类型的CSRF并不常见，比起其他两种用户打开页面就中招的情况，这种需要用户点击链接才会触发
CSRF 防范措施
- 验证 Token：浏览器请求服务器时，服务器返回一个 token，之后每个请求都需要同时带上 token 和 Cookie 才会被认为是合法请求
- 验证 Referer：通过验证请求头的 Referer 来验证来源站点，但请求头很容易伪造
- 设置 SameSite：设置 Cookie 的 SameSite，可以让 Cookie 不随跨站请求发出，但浏览器兼容不一
其他攻击类型
- SQL 注入
- 流量劫持（DNS 劫持 & HTTP 劫持）
参考文献
前端安全系列（一）：如何防止XSS攻击？
前端安全系列（二）：如何防止CSRF攻击？
网络安全
什么是同源策略
两个页面地址中的协议，域名，端口号一致，则表示同源
为什么需要同源策略
设置同源策略的主要目的是为了安全，如果没有同源限制，在浏览器中的cookie等其他数据可以任意读取，不同域下的DOM任意操作，ajax任意请求其他网站的数据，包括隐私数据。
XSS
XSS（Cross Site Script）跨站脚本攻击：指的是攻击者向网页注入恶意的客户端代码，通过恶意的脚本对客户端网页进行篡改，从而在用户浏览网页时，对用户浏览器进行控制或者获取用户隐私数据的一种攻击方式。
XSS的本质
XSS 攻击类型
<script>标签。XSS 防范措施
CSRF
CSRF的本质
CSRF 攻击类型
GET类型的CSRF：
POST类型的CSRF
链接类型的CSRF
链接类型的CSRF并不常见，比起其他两种用户打开页面就中招的情况，这种需要用户点击链接才会触发
CSRF 防范措施
其他攻击类型
参考文献
前端安全系列（一）：如何防止XSS攻击？
前端安全系列（二）：如何防止CSRF攻击？
网络安全