说起跨域，你可能知道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>。
----------2021/3/11补充------------
我真是个cb，vue源码中的decodingMap是用来处理对 html 实体进行解码的。跟xss啥关系没有，以前可真敢楞往上写。
正确在vue中使用xss的方式是
往v-html里面写<script>alert(1)</script>是不管用的，因为
mdn原文
尽管这看上去像 cross-site scripting 攻击，结果并不会导致什么。HTML 5 中指定不执行由 innerHTML 插入的 <script> 标签。
----------2021/3/11补充完--------
至于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/ //允许指定源可以通过确保网站没有被嵌入到别人的站点里面，从而避免攻击。
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用。你还可以使用@来通知其他用户。