一、引言
前一阵子在写业务的时候，发现公司的代码里，有个场景是这样的：需要用户定义一些活动规则，然后在左边的手机预览图中，实时显示出这些活动规则。
于是，同事用了一个带
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>
元素中的文本通常
会保留空格和换行符
，并且文本也会呈现为等宽字体。
四、更多