XSS系列二：基于vue搭建的网站如何防范XSS攻击

1.对于从接口请求的数据，尽量使用{ {}}加载,而不是v-html

vue中的大括号会把数据解释为普通文本。通常如果要解释成html代码则要用v-html。而此指令相当于innerHTML。虽然像innerHTML一样不会直接输出script标签，但也可以输出img，iframe等标签。

vue文档关于v-html的说明如下所示：

2.对用v-html和innerHTML加载的客户信息进行转义

如果显示内容里面有html片段，一定需要用v-html或者innerHTML加载，例如：

<div v-html="`<span>${message}</span>`"></div>

里面的message是客户自己输入的信息，如果此时是恶意的dom片段肯定会引起XSS攻击。此时我们可以对“<”，">"转译成“&lt;”，“&gt;”。然后再输入到页面。

可以使用lodash里面的escape方法对客户信息进行转译。如下：

import _escape from 'lodash/escape'
Vue.prototype.$escape = _escape

在vue中插入一个全局方法，对需要转译的数据就使用这个方法：

<div v-html="`<span>${$escape(message)}</span>`"></div>