规避使用 vue 的 v-html 指令的方法

一、引言

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

于是，同事用了一个带 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> 标签的，可以戳这里！

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