v-html可能导致的问题

v-html可能导致的问题

Vue中的v-html指令用以更新元素的innerHTML，其内容按普通HTML插入，不会作为Vue模板进行编译，如果试图使用v-html组合模板，可以重新考虑是否通过使用组件来替代。

描述#

易导致XSS攻击#

v-html指令最终调用的是innerHTML方法将指令的value插入到对应的元素里，这就是容易造成xss攻击漏洞的原因了。Vue在官网对于此也给出了温馨提示，在网站上动态渲染任意HTML是非常危险的，因为容易导致XSS攻击，只在可信内容上使用v-html，永不用在用户提交的内容上。
关于XSS，跨站脚本攻击XSS，是最普遍的Web应用安全漏洞。这类漏洞能够使得攻击者嵌入恶意脚本代码到正常用户会访问到的页面中，当正常用户访问该页面时，则可导致嵌入的恶意脚本代码的执行，从而达到恶意攻击用户的目的。当动态页面中插入的内容含有这些特殊字符如<时，用户浏览器会将其误认为是插入了HTML标签，当这些HTML标签引入了一段JavaScript脚本时，这些脚本程序就将会在用户浏览器中执行。当这些特殊字符不能被动态页面检查或检查出现失误时，就将会产生XSS漏洞。

• 反射型XSS： 攻击者事先制作好攻击链接,需要欺骗用户自己去点击链接才能触发XSS代码，所谓反射型XSS就是将恶意用户输入的js脚本，反射到浏览器执行。
• 存储型XSS：代码是存储在服务器中的，如在个人信息或发表文章等地方，加入代码，如果没有过滤或过滤不严，那么这些代码将储存到服务器中，每当有用户访问该页面的时候都会触发代码执行，这种XSS非常危险，容易造成蠕虫，大量盗窃cookie，也被称为持久型XSS。
• DOM型XSS：类似于反射型XSS，但这种XSS攻击的实现是通过对DOM树的修改而实现的。

Copy
// 直接将输入打印到页面，造成XSS // 反射型示例
<?php 
$XssReflex = $_GET['i'];
echo $XssReflex;

Copy
<!-- 构造url，点击后就可以执行js代码 -->
http://127.0.0.1/xss.php?i=<script>alert("run javascript");</script>

不作为模板编译#

v-html更新的是直接使用元素的innerHTML方法，内容按普通HTML插入，不会作为Vue模板进行编译，如果试图使用v-html组合模板，可以重新考虑是否通过使用组件来替代。另外后端返回<script>标签中的代码是不会直接执行的，这是浏览器的策略，如果需要的话可以在$nextTick回调中动态创建<script>标签然后src引入代码url即可。

scoped样式不能应用#

在单文件组件里，scoped的样式不会应用在v-html内部，因为那部分HTML没有被Vue的模板编译器处理，如果你希望针对v-html的内容设置带作用域的CSS，你可以替换为CSS Modules或用一个额外的全局<style>元素手动设置类似BEM的作用域策略。此外提一下关于样式隔离的话，Shadow DOM也是个不错的解决方案。关于CSS Modules以及BEM命名规范可以参考下面的链接。

Copy
https://zhuanlan.zhihu.com/p/72631379
https://vue-loader.vuejs.org/zh/guide/css-modules.html
https://www.ruanyifeng.com/blog/2016/06/css_modules.html

每日一题#

Copy
https://github.com/WindrunnerMax/EveryDay

参考#

Copy
https://cn.vuejs.org/v2/api/#v-html
https://zhuanlan.zhihu.com/p/72631379
https://juejin.cn/post/6844903918518927367
https://www.cnblogs.com/ming1025/p/13091253.html
https://www.ruanyifeng.com/blog/2017/04/css_in_js.html
https://vue-loader.vuejs.org/zh/guide/css-modules.html
https://www.ruanyifeng.com/blog/2016/06/css_modules.html