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
树的修改而实现的。
// 直接将输入打印到页面,造成XSS // 反射型示例
<?php
$XssReflex = $_GET['i'];
echo $XssReflex;
<!-- 构造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
命名规范可以参考下面的链接。
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
每日一题
https://github.com/WindrunnerMax/EveryDay
参考
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