vue前端 html,Vue.js v-html

v-html

预期：string

详细

更新元素的 innerHTML 。

注意：内容按普通 HTML 插入 - 不会作为 Vue 模板进行编译。

如果试图使用 v-html 组合模板，可以重新考虑是否通过使用组件来替代。

在网站上动态渲染任意 HTML 是非常危险的，因为容易导致 XSS 攻击。只在可信内容上使用 v-html，永不用在用户提交的内容上。

在单文件组件里，scoped 的样式不会应用在 v-html 内部，因为那部分 HTML 没有被 Vue 的模板编译器处理。如果你希望针对 v-html 的内容设置带作用域的 CSS，你可以替换为 CSS Modules 或用一个额外的全局

示例

参考

xss 攻击演示

export default {

name:"app",

data(){

return {

html:''

}

运行之后由于 src 地址对应的资源找不到，会触发 img 标签的 error 事件，最终 alert 弹框。这便是一个最简单的 xss 攻击。

解决 html 指令存在的 xss 漏洞问题

通常我们处理 xss 攻击会使用一个 xss 的 npm 包来过滤 xss 攻击代码。

所以我们要做的就是给指令的 value 包上一层 xss 函数。有同学可能会问，我们在业务代码里使用 xss 函数处理也行。是的可以，但是我们不能保证团队每一个成员都会使用 xss 函数处理。

作为前端的架构师，我们需要从项目整体的考虑来处理这类问题，不能指望通过规范来约束团队成员。

在编译前会将我们从 vue-loader 传入的 compilerOptions.directives 和 baseOptions.directives 进行了合并。

这样我们就能覆盖 html 指令。

引入 xss 包并挂载到 vue 原型上

import xss from 'xss';

Vue.prototype.xss = xss在 vue.config.js 中覆写 html 指令

chainWebpack: config => {

config.module

.rule("vue")

.use("vue-loader")

.loader("vue-loader")

.tap(options => {

options.compilerOptions.directives = {

html(node, directiveMeta) {

(node.props || (node.props = [])).push({

name: "innerHTML",

value: `xss(_s(${directiveMeta.value}))`

});

}

};

return options;

});

}

这样我们就从源头解决了 html 指令存在的潜在 xss 攻击。

可能存在的问题

此外某些情况下，使用{{{}}}符号仍然不能解析 html 标签，但 v-htm 指令却可以，可能是 Vue.js 存在的 bug 。

其它参考

vue前端 html,Vue.js v-html相关推荐

Vue前端自动化测试-Vue Test Utils
Vue Test Utils简介 vue-test-utils是vue官方的单元测试框架,提供了一系列非常方便的工具,使我们更轻松地为vue构建的应用来编写单元测试.主流的JavaScript测试运行 ...
全面掌握前端框架Vue.js
整理自菜鸟教程 Vue.js简介 Vue.js(读音 /vjuː/, 类似于 view) 是一套构建用户界面的渐进式框架. Vue 只关注视图层, 采用自底向上增量开发的设计. Vue 的目标是通过尽 ...
前端vue项目(使用pdf.js) pdf展示及pdf工具栏放大缩小功能实现
前端vue项目(使用pdf.js) pdf展示及pdf工具栏放大缩小功能实现 1.vue项目pdf展示 2.pdf工具栏放大缩小功能文章目录前端vue项目(使用pdf.js) pdf展示及pdf工 ...
node.js后端及Vue前端跨域解决方案
node.js后端及Vue前端跨域解决方案从目前我了解的情况来看,前后端跨域使用的方式有很多种,这里记录我使用最顺手的一种,即在后端使用cors跨域 node.js后端跨域解决方案先看后端的入口文 ...
前端《Vue.js从入门到项目实战》PDF课件+《微信小程序实战入门第2版》PDF代码调试
JS进行开发,正如一切的编程语言都立足于电元信号的正负极,即01码,可为什么软件都不采用二进制编码来进行开发呢?这里面牵扯到一个成本的问题,这正是影响项目领导者进行决策的关键因素.Vue项目与原生J ...
【前端】Vue.js经典开源项目汇总
Vue.js经典开源项目汇总原文链接:http://www.cnblogs.com/huyong/p/6517949.html Vue是什么? Vue.js(读音 /vjuː/, 类似于 view) ...
从零开始创建一个个人博客前端Vue，后端node.js（第一天）
一.前言(具体代码在尾页) 1.创建vue项目可以使用vue ui命令进行快速的搭建 2.由于我是一个新手所以说,前端使用的是element ui快速构造了一个网页(头秃,没有设计稿,ui空白一片), ...
【两万字图文详解】运动会管理系统-前后端分离-项目开发：【后端】SpringBoot, SpringMVC, MyBatis【前端】Vue.js，ElementUI
项目名称:运动会管理系统技术栈: 后端:SpringBoot,SpringMVC,MyBatis,tkmapper,Maven聚合工程等前端:Vue.js,Element-u ...
vue视频教程（Vue.js前端开发基础与项目实战）
适合人群: 适合网页设计与制作人员.网站建设开发人员.院校相关专业的学生.个人网站制作爱好者学习计划: 1.建议每天学习两小时 2.课堂代码可在附件中下载课程目标: 学习Vue前端框架,能使用Vu ...

vue前端 html,Vue.js v-html

vue前端 html,Vue.js v-html相关推荐

最新文章

热门文章