本篇文章给大家分享的是有关Vue.js中怎么实现跨站脚本攻击,小编觉得挺实用的,因此分享给大家学习,希望大家阅读完这篇文章后可以有所收获,话不多说,跟着小编一起来看看吧。
例如:模版代码为
& lt; p v-text=癿essage"祝辞& lt;/p>
Vue.js会把这段模版代码编译成:
function 匿名(),{
,,(这),{
,,,return _c (& # 39; p # 39;,, {
,,,,,domProps:, {
,,,,,,,“textContent":, _(消息)
,,,,,}
,,,},,[])
,,}
} 一般情况下,vue。js通过双大括号向html内容中对指定部分进行插值。
而双大括号{{}}和v-text指令上底层上实现主要都是通过元素DOM属性的textContent值来实现数据插入。
这种情况下一般不会出现注入的问题,因为浏览器的原生api会安全的处理这些值。但是数据插值有时候需要向页面中插入富文本信息。如果使用{{}}和v-text指令的话,富文本会被转义成普通文本。不能实现需求。
这时候可能需要用到v-html标签.v-html标签的模版在vue.js编译的形式如下:
示例模版:
& lt; p v-html=癿essage"祝辞& lt;/p>
vue模版渲染代码:
function 匿名(),{
,,(这),{
,,,return _c (& # 39; p # 39;,, {
,,,,,domProps:, {
,,,,,,,“innerHTML":, _(消息)
,,,,,}
,,,},,[])
,,}
} 可以看的v-html标签底层实际上使用了Dom元素的innerHTML属性进行数据插入。而innerHTML属性在被插入不信任数据的时候就会导致JS注入的问题。
安全防御:日常vue。js中数据绑定应该尽量使用{{}}和v-text的方式.v-html是一个有风险的指令,使用时一定要对数据进行过滤处理。
标签属性绑定,其实也是数据绑定的一种。我把它独立出来是因为属性上的数据绑定和上一小街其实的区别还是很大。
示例模版:对一个标签的href进行数据插入
& lt; a v-bind: https://www.yisu.com/zixun/href=" 1234 ">
vue.js编译后的代码:
function 匿名(),{
,,(这),{
,,,return _c(& # 39;一个# 39;,,{
,,,,,attrs:, {
,,,,,,,“href": 1234
,,,,,}
,,,},,[])
,,}
} 这种场景下,往往是开发人员安全意识缺失,在对标签属性进行数据绑定的时候,忽略对于某些标签的危险属性绑定时的特殊处理。
我们知道,特殊标签的某些属性,可以在属性值可控的情况下进行js代码注入。这样又回到了通用场景下xss防护应该要注意的问题。
web危险属性大致有:
所有元素的风格属性。(应避免用户输入数据绑定到标签属的风格性中,防范钓鱼攻击)。
标签的href属性。(正常情况应保证url协议是http和https)
iframe标签的src属性。(要防止通过javascript://,执行js)
对象标签的数据属性。(要防止通过javascript://,执行js)。
form 的行动属性(要防止通过javascript://,执行js。)
防护知识:对于src, href、行动,数据这类可以赋值为uri的属性要限制好协议和请求的url,尽量保证使用http://和https://协议及访问可信的资源服务器。
Vue。js服务端模版渲染XSS
其实不仅仅是vue,在目前前后端分离开发的趋势下,前端Javascript框架如果使用了服务端模版渲染模版的方式,就都有可能出现服务端模版XSS。(这类XSS的本质是模版注入,并不一定出现都在服务端渲染场景)。
服务端渲染模版本身是为了提前生成html,利于某些站点的搜索引擎优化和加快页面加载,如果对模版中用户数据处理不当,就会导致模版注入的问题。
举例:
如果你在vue。js开发的网站中输入了{{2 + 2}},后端服务器给返回了4的时候。你可以断定这里存在模版解析的问题(服务端将用户输入直接放到模板中作为模板的一部分解析返回)。
那么,如何攻击vue。js模版注入漏洞?
但在vue组件模版中,我们不能直接调用底层javascript函数。利用vue的模版注入一般使用的是javascript的原型的特性。
首先我们知道,vue会把模版解析成js代码。那么对于模版注入漏洞,我们只需要将注入数据在解析结果里变成一段想要的js代码就可以了。
javascript中的一切内容都是对象。每个对象都包含一个protoptype(原型),其原型中有个属性叫构造函数,它指向的是该对象构造函数。
函数也是一个对象,函数对象的构造函数是一个允许动态生成函数的函数。这只个构造函数要简单把代码字符串赋值给它就可以构造一个匿名的js函数。
Vue.js中怎么实现跨站脚本攻击
