一、引言

前一阵子在写业务的时候,发现公司的代码里,有个场景是这样的:需要用户定义一些活动规则,然后在左边的手机预览图中,实时显示出这些活动规则。

于是,同事用了一个带 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> 标签。下图为示例代码:

规避使用 *vue* 的 <code>v-html</code> 指令的方法

总的来说,利用的就是 <pre> 标签的这个功能:被包围在 <pre> 元素中的文本通常会保留空格和换行符,并且文本也会呈现为等宽字体。

四、更多

想了解更多关于 <pre> 标签的,可以戳这里!

关于这个办法的来源,源自于 我是程序员 网的这个页面。欲知详情,请戳这里~

Logo

前往低代码交流专区

更多推荐