本文目录一览：
为什么要同源策略
一个重要原因就是保护cookie，cookie中存着用户的登陆凭证，就相当于用户的账号密码。
想象以下场景，你正吃着火锅唱着歌，突然收到一封邮件说你的银行账号存在安全隐患，点击修复。虽然银行的官方网站是，但是想到你的全部家当24块3毛都在卡里，慌乱的你没有注意这么多点击链接输入帐号密码进行登陆。这个网站其实是
iframe src=""
在你输入帐号密码的时候，如果没有同源策略，外部已经有脚本获取你的输入或者直接通过document.cookie窃取了你的信息并且发送给攻击者了。
那有了同源策略，是不是我们的网站就万无一失了呢。并不是，还有很多其他手段威胁到网站安全，比如xss，csrf，clickJacking，本篇文章就简单阐述一下他们的攻击手段和基础攻防(后续添加)。
xss
Cross Site Script，译为是跨站脚本攻击；其原本缩写是 CSS，但为了和层叠样式表(Cascading Style Sheet)有所区分，因而被迫改名为 XSS。主要分为反射型和储存型。
反射型
反射型的特点是不持久，它的特点是xss的代码出现在访问的链接里，作为一部分输入提交到服务器，然后服务器响应后返回浏览器，然后浏览器执行xss的代码。
一般攻击者通过邮件或者其他途径发送链接，用户点击之后达到攻击目的。
储存型
存储型和反射型的差别仅在于他的攻击代码会存储到服务器。这种攻击的最典型例子就是博客论坛的留言功能，访问包含这条留言的页面时，就会触发攻击代码。
比如某个论坛的个人中心里的个人简介，我们就可以在里面尝试注入代码进行练习，先来测试可用的标签
scriptapimgbodybuttonvardiviframemetaobjectmarqueeisindex inputselectkeygenframesetembedsvgmathvideoaudiotextarea
发现只有a标签存活下来，再来测试属性
a href onmouseover onclick
xss存在的主要原因在于没有对于用户的提交内容和接口的返回内容没有进行严格的过滤。
而防止xss的主要手段也是对输入和url参数进行过滤，对输出进行编码，还有就是cookie设置http-only。像常用的vue就有
const decodingMap = {
'': '',
'': '',
'"': '"',
'': '',
'
': '\n',
' ': '\t',
''': "'"
}
来对输入进行进行过滤，还有百度中输入scriptalert(1)/script也会被转译成scriptalert(1)%2Fscript。
至于http-only，严格来说没有阻止攻击，只是阻止了攻击后的cookie劫持。
vue防止内存泄漏的几点写法
beforeDestroy周期一般是在组件销毁时调用，比如使用v-if进行组件的显示隐藏，或者页面跳转时就会调用到这个周期。
堆内存使用后一定要注意释放，否则gc总不回收就会导致内存泄漏。
比如对dom的引用、事件Listener、总线eventBus等，一定要在beforeDestroy里释放解绑。
当vue中有Dom引用时，需要注意内存释放问题。weakset 和 weakmap 对值的引用都是不计入垃圾回收机制 的。也就是说，如果其他对象都不再引用该对象，那么垃圾回收机制会自动回收该对象所占用的内存。
如果是对router进行了keep-alive，那进行页面跳转时就不会触发beforeDestroy，也就是对组件进行了缓存，不会销毁组件，这时我们可以用路由守卫来确保释放资源。
如果是手动调用监听watch的，也需要释放一下资源。
v-html防止XSS注入
比如说我们在渲染富文本编辑的文章时，使用XSS会把calss，style过滤掉，那样就渲染不出来了。所以使用vue-dompurify-html，防止xss注入
急急急 tp5.1输出原html标签？
使用vue中的v-html指令，否则会因防止xss攻击不渲染html标签
解决方法如下：
1、双大括号会将数据解释为普通文本，而非 HTML 代码。为了输出真正的 HTML，你需要使用 v-html 指令：
pUsing mustaches: {{ rawHtml }}/ppUsing v-html directive: span v-html="rawHtml"/span/p
2、建议去查看vue的相关的文档，这些东西需要前端做，和tp没有关系的