规避使用 vue 的 v-html 指令的方法
来源:互联网 发布:淘宝买家信誉度是什么 编辑:程序博客网 时间:2024/05/18 01:21
一、引言
前一阵子在写业务的时候,发现公司的代码里,有个场景是这样的:需要用户定义一些活动规则,然后在左边的手机预览图中,实时显示出这些活动规则。
于是,同事用了一个带 v-html
指令的 <textarea>
标签,并且将双向数据绑定之后的变量 str 直接用 v-html="str"
将 str 绑定在 DOM 上,然后用户输入的规则显示在左边的预览图中。
二、思考
但我们在学 vue 的教程的时候,都学到过 v-html
指令的简介里有这么一句话:
你的站点上动态渲染的任意 HTML 可能会非常危险,因为它很容易导致 XSS 攻击。请只对可信内容使用 HTML 插值,绝不要对用户提供的内容插值。
其实业务场景蛮简单的,面向的用户也一般不会输入标签这些东西,这样使用固然省事,但是却留下了一个很明显的安全隐患。于是,我就开始思考怎样去避免 XSS 攻击。
三、解决办法
我一开始想用一个 <div>
标签以文本插值的方式,即 <div>{{str}}</div>
来实现。结果,可想而知,str 里头的换行符——\n
被显示成一个空格,加 <br>
则直接被当成字符串直接显示了出来!!!
在我 Google 了一番下,终于找到了一个比较优雅的方式,来解决上面的问题。即仍然使用文本差值,不过使用 <pre>
标签替换掉 <div>
标签。下图为示例代码:
总的来说,利用的就是 <pre>
标签的这个功能:被包围在 <pre>
元素中的文本通常会保留空格和换行符,并且文本也会呈现为等宽字体。
四、更多
想了解更多关于 <pre>
标签的,可以戳这里!
关于这个办法的来源,源自于 我是程序员 网的这个页面。欲知详情,请戳这里~
- 规避使用 vue 的 v-html 指令的方法
- Vue- v-html指令
- vue.js 中v-bind指令的使用
- vue的v-text和v-html
- vue的v-for使用
- Vue.js入门-内置指令v-html
- vue.js指令v-for使用以及下标索引的获取
- vue.js指令v-for使用以及下标索引的获取
- 9-Vue指令之V-text/V-html
- Vue自定义指令的使用
- vue自定义指令(扩展的HTML)
- 浅谈 Vue v-model指令的实现原理
- Vue初体验(二),以 v- 前缀的指令
- 自定义类似于Jquery UI Selectable 的Vue指令v-selectable
- 关于v-model的使用,(vue)
- Vue框架的使用-v-model
- vue中v-text,v-html, v-model, {{}}之间的异同
- vue中v-text,v-html, v-model, {{}}之间的异同
- Spring 4.0 学习日记(8) ---AOP切面注解实现五种通知
- Storm流式处理框架概述
- mot文件的单行校验与全局校验
- Spring boot 实践(日志log4J,修改端口)
- SessionFilter session的创建和销毁监听
- 规避使用 vue 的 v-html 指令的方法
- C++实现单例模式
- NP难问题与过拟合
- PHP变量
- 【shell】变量内容的删除和替换
- 构造函数、析构函数、拷贝构造函数,常函数
- 数据结构之树的一些基本操作
- Eclipse Debug不为人知的秘密
- jQuery学习笔记01