共计 2183 个字符，预计需要花费 6 分钟才能阅读完成。
说起跨域，你可能知道 JSONP，CORS，http proxy，nginx 等，那为什么会存在跨域，你可能知道因为同源策略，那为啥会有同源策略呢。
我认为一个重要原因就是保护 cookie，cookie 中存着用户的登陆凭证，就相当于用户的账号密码。
想象以下场景，你正吃着火锅唱着歌，突然收到一封邮件说你的银行账号存在安全隐患，点击 www.shazilai.com 修复。虽然银行的官方网站是 www.anquan.com，但是想到你的全部家当 24 块 3 毛都在卡里，慌乱的你没有注意这么多点击链接输入帐号密码进行登陆。这个网站其实是
<iframe src="www.anquan.com">在你输入帐号密码的时候，如果 没有 同源策略，外部已经有脚本获取你的输入或者直接通过 document.cookie 窃取了你的信息并且发送给攻击者了。
那有了同源策略，是不是我们的网站就万无一失了呢。并不是，还有很多其他手段威胁到网站安全，比如 xss，csrf，clickJacking，本篇文章就简单阐述一下他们的攻击手段 和基础攻防(后续添加)。
xss
Cross Site Script，译为是跨站脚本攻击；其原本缩写是 CSS，但为了和层叠样式表 (Cascading Style Sheet) 有所区分，因而被迫改名为 XSS。主要分为反射型和储存型。
反射型
反射型的特点是不持久，它的特点是 xss 的代码出现在访问的链接里，作为一部分输入提交到服务器，然后服务器响应后返回浏览器，然后浏览器执行 xss 的代码。
一般攻击者通过邮件或者其他途径发送链接，用户点击之后达到攻击目的。
储存型
存储型和反射型的差别仅在于他的攻击代码会存储到服务器。这种攻击的最典型例子就是博客论坛的留言功能，访问包含这条留言的页面时，就会触发攻击代码。比如某个论坛的个人中心里的个人简介，我们就可以在里面尝试注入代码进行练习，先来测试可用的标签
<script><a><p><img><body><button><var><div><iframe><meta><object><marquee><isindex ><input><select>><keygen><frameset><embed><svg><math><video><audio><textarea>发现只有 a 标签存活下来，再来测试属性<a href onmouseover onclick >
xss 存在的主要原因在于没有对于用户的提交内容和接口的返回内容没有进行严格的过滤。
而防止 xss 的主要手段也是对输入和 url 参数进行过滤，对输出进行编码，还有就是 cookie 设置 http-only。像常用的 vue 就有
const decodingMap = {
'<': '<',
'>': '>',
'"': '"','&':'&',' ':'\n','	':'\t',''':"'"
}来对输入进行进行过滤，还有百度中输入 <script>alert(1)</script> 也会被转译成 <script>alert(1)<%2Fscript>。
至于 http-only，严格来说没有阻止攻击，只是阻止了攻击后的 cookie 劫持。
csrf
Cross-site request forgery, 跨站请求伪造，简单来说就是盗用了你的身份 (cookie)，以你的名义发送恶意请求，
从另一篇讲的很不错的文章里偷的图来说明 csrf 的攻击过程
对于 csrf 的防范，主要就是要证明是用户而不是攻击者发起了请求。
1、简单有效的 referer
在 HTTP 头中有一个字段叫 Referer，它记录了该 HTTP 请求的来源地址。所以可以检查请求是否来自合法的 ” 源 ”。
2、添加独有验证
这个小标题起的好垃圾，话糙理不糙，前文也说了，csrf 是盗用用户身份，那么我们可以在请求中放入攻击者所不能伪造的信息来拦截攻击。
比如常见的验证码，由服务端发给客户端一个验证码，用户发起的请求携带验证码来证明自己是自己。或者在客户端的请求中添加一个生成的随机 token，服务端进行验证用户是用户，道理都是一样的。
click jacking
点击劫持，攻击者将一个透明的、不可见的 iframe 覆盖在一个网页上，通过调整 iframe 页面位置，诱使用户在页面上进行操作，在不知情的情况下用户的点击恰好是点击在 iframe 页面的一些功能按钮上。
比如你听说一个视频网站，里面有好康的，决定冒着危险前去瞅一眼，视频加载完了，你决定点播放按钮，但是你不知道的是播放按钮上面盖着一个 opacity：0 的 iframe，你的点击操作实际作用于 iframe 上，并且触发了非常危险的代码:alert(123)。攻击完成。
看到这里，你可能觉得这是个憨憨手法，但是随着触屏的发展，由于手机屏幕范围有限，手机浏览器为了节省空间把地址栏隐藏起来，因此在手机上的视觉欺骗更容易实施。
常见的防御手段
X-Frame-Options, 这个头表示该网站被 iframe 引用的几种处理方式，可选值有
X-Frame-Options: deny // 不允许
X-Frame-Options: sameorigin // 允许同源
X-Frame-Options: allow-from https://example.com/ // 允许指定源可以通过确保网站没有被嵌入到别人的站点里面，从而避免攻击。
