本篇文章给大家分享的是有关Vue.js中怎么实现跨站脚本攻击，小编觉得挺实用的，因此分享给大家学习，希望大家阅读完这篇文章后可以有所收获，话不多说，跟着小编一起来看看吧。
vue.js 下的数据绑定常见的vue.js数据绑定是通过双大括号{{}}或者v-text指令进行的数据绑定的。vue.js会自动将对应的模版编译成js代码。
例如：模版代码为
<p v-text="message"></p>vue.js会把这段模版代码编译成：
function anonymous() { with(this) { return _c('p', { domProps: { "textContent": _s(message) } }, []) } }一般情况下，vue.js通过双大括号向html内容中对指定部分进行插值。
而双大括号{{}}和v-text指令上底层上实现主要都是通过元素 DOM属性的textContent值来实现数据插入。
这种情况下一般不会出现注入的问题，因为浏览器的原生api会安全的处理这些值。 但是数据插值有时候需要向页面中插入富文本信息。如果使用{{}} 和 v-text指令的话，富文本会被转义成普通文本。不能实现需求。
这时候可能需要用到v-html标签。v-html标签的模版在vue.js编译的形式如下：
示例模版：
<p v-html="message"></p>vue模版渲染代码：
function anonymous() { with(this) { return _c('p', { domProps: { "innerHTML": _s(message) } }, []) } }可以看的v-html标签底层实际上使用了 Dom元素的innerHTML属性进行数据插入。而 innerHTML属性在被插入不信任数据的时候就会导致JS注入的问题。
安全防御：日常vue.js中数据绑定应该尽量使用{{}}和v-text的方式。v-html是一个有风险的指令，使用时一定要对数据进行过滤处理。
vue.js 下的标签的属性绑定标签属性绑定，其实也是数据绑定的一种。我把它独立出来是因为属性上的数据绑定和上一小街其实的区别还是很大。
web前端开发中除了数据内容填充，同时也需要对标签的属性进行数据绑定操作。
vue中我们使用v-bind 标签属性进行数据绑定，这些数据的插值也是通过浏览器原生api对数据进行转码插入。由于浏览器自身api安全的保障，数据插入一般不会造成闭合属性导致的xss问题。
示例模版：对a标签的href进行数据插入
<a v-bind:href="1234"></a>vue.js编译后的代码：
function anonymous() { with(this) { return _c('a', { attrs: { "href": 1234 } }, []) } }这种场景下，往往是开发人员安全意识缺失，在对标签属性进行数据绑定的时候，忽略对于某些标签的危险属性绑定时的特殊处理。
我们知道，特殊标签的某些属性，可以在属性值可控的情况下进行js代码注入。这样又回到了通用场景下 xss防护应该要注意的问题。
web危险属性大致有：
所有元素的style属性。（应避免用户输入数据绑定到标签的style属性中，防范钓鱼攻击。）
a 标签的 href 属性。（正常情况应保证url 协议是http 和 https）
iframe 标签的 src 属性。（要防止通过 javascript:// 执行js）
object 标签的 data 属性 。（要防止通过 javascript:// 执行js.）
form 的 action 属性（要防止通过 javascript:// 执行js.）
防护知识：对于src 、href 、action 、 data 这类可以赋值为uri的属性要限制好协议和请求的url，尽量保证使用 和 https:// 协议及访问可信的资源服务器 。
Vue.js 服务端模版渲染XSS其实不仅仅是vue，在目前前后端分离开发的趋势下，前端Javascript框架如果使用了服务端模版渲染模版的方式，就都有可能出现服务端模版XSS。（这类XSS的本质是模版注入，并不一定出现都在服务端渲染场景）。
服务端渲染模版本身是为了提前生成html，利于某些站点的seo 和加快页面加载，如果对模版中用户数据处理不当，就会导致模版注入的问题。
举例：
郑重声明：本文版权归原作者所有，转载文章仅为传播更多信息之目的，如作者信息标记有误，请第一时间联系我们修改或删除，多谢。
