本篇文章給大家分享的是有關(guān)Vue.js中怎么實現(xiàn)跨站腳本攻擊，小編覺得挺實用的，因此分享給大家學(xué)習(xí)，希望大家閱讀完這篇文章后可以有所收獲，話不多說，跟著小編一起來看看吧。

本篇文章給大家分享的是有關(guān)Vue.js中怎么實現(xiàn)跨站腳本攻擊，小編覺得挺實用的，因此分享給大家學(xué)習(xí)，希望大家閱讀完這篇文章后可以有所收獲，話不多說，跟著小編一起來看看吧。vue

.js 下的數(shù)據(jù)綁定常見的vue.js數(shù)據(jù)綁定是通過雙大括號{{}}或者v-text指令進行的數(shù)據(jù)綁定的

站在用戶的角度思考問題，與客戶深入溝通，找到樂東黎族網(wǎng)站設(shè)計與樂東黎族網(wǎng)站推廣的解決方案，憑借多年的經(jīng)驗，讓設(shè)計與互聯(lián)網(wǎng)技術(shù)結(jié)合，創(chuàng)造個性化、用戶體驗好的作品，建站類型包括：成都網(wǎng)站制作、成都網(wǎng)站建設(shè)、企業(yè)官網(wǎng)、英文網(wǎng)站、手機端網(wǎng)站、網(wǎng)站推廣、主機域名、網(wǎng)絡(luò)空間、企業(yè)郵箱。業(yè)務(wù)覆蓋樂東黎族地區(qū)。

。vue.js會自動將對應(yīng)的模版編譯成js代碼。

例如：模版代碼為

vue.js會把這段模版代碼編譯成：

function anonymous() {  with(this) {    return _c('p', {      domProps: {        "textContent": _s(message)      }    }, [])  }}

一般情況下，vue.js通過雙大括號向html內(nèi)容中對指定部分進行插值。

而雙大括號{{}}和v-text指令上底層上實現(xiàn)主要都是通過元素 DOM屬性的textContent值來實現(xiàn)數(shù)據(jù)插入。

這種情況下一般不會出現(xiàn)注入的問題，因為瀏覽器的原生api會安全的處理這些值。 但是數(shù)據(jù)插值有時候需要向頁面中插入富文本信息。如果使用{{}} 和 v-text指令的話，富文本會被轉(zhuǎn)義成普通文本。不能實現(xiàn)需求。

這時候可能需要用到v-html標簽。v-html標簽的模版在vue.js編譯的形式如下：

示例模版：

vue模版渲染代碼：

function anonymous() {  with(this) {    return _c('p', {      domProps: {        "innerHTML": _s(message)      }    }, [])  }}

可以看的v-html標簽底層實際上使用了 Dom元素的innerHTML屬性進行數(shù)據(jù)插入。而 innerHTML屬性在被插入不信任數(shù)據(jù)的時候就會導(dǎo)致JS注入的問題。

安全防御：日常vue.js中數(shù)據(jù)綁定應(yīng)該盡量使用{{}}和v-text的方式。v-html是一個有風(fēng)險的指令，使用時一定要對數(shù)據(jù)進行過濾處理。vue

.js 下的標簽的屬性綁定

標簽屬性綁定，其實也是數(shù)據(jù)綁定的一種。我把它獨立出來是因為屬性上的數(shù)據(jù)綁定和上一小街其實的區(qū)別還是很大。web前端開發(fā)中除了數(shù)據(jù)內(nèi)容填充

，同時也需要對標簽的屬性進行數(shù)據(jù)綁定操作。vue中我們使用v-bind 標簽屬性進行數(shù)據(jù)綁定，這些數(shù)據(jù)的插值也是通過瀏覽器原生api對數(shù)據(jù)進行轉(zhuǎn)碼插入。由于瀏覽器自身api安全的保障

，數(shù)據(jù)插入一般不會造成閉合屬性導(dǎo)致的xss問題。

示例模版：對a標簽的href進行數(shù)據(jù)插入

vue.js編譯后的代碼：

function anonymous() {  with(this) {    return _c('a', {      attrs: {        "href": 1234      }    }, [])  }}

這種場景下，往往是開發(fā)人員安全意識缺失，在對標簽屬性進行數(shù)據(jù)綁定的時候，忽略對于某些標簽的危險屬性綁定時的特殊處理。

我們知道，特殊標簽的某些屬性，可以在屬性值可控的情況下進行js代碼注入。這樣又回到了通用場景下 xss防護應(yīng)該要注意的問題。

web危險屬性大致有：

所有元素的style屬性。（應(yīng)避免用戶輸入數(shù)據(jù)綁定到標簽的style屬性中，防范釣魚攻擊。）

a 標簽的 href 屬性。（正常情況應(yīng)保證url 協(xié)議是http 和 https）
iframe 標簽的 src 屬性。（要防止通過 javascript://  執(zhí)行js）

object 標簽的 data 屬性 。（要防止通過 javascript://  執(zhí)行js.）

form  的 action 屬性（要防止通過 javascript://  執(zhí)行js.）

防護知識：對于src 、href 、action 、 data 這類可以賦值為uri的屬性要限制好協(xié)議和請求的url，盡量保證使用http:// 和 https:// 協(xié)議及訪問可信的資源 。

Vue.js 服務(wù)端模版渲染XSS

其實不僅僅是vue，在目前前后端分離開發(fā)的趨勢下，前端Javascript框架如果使用了服務(wù)端模版渲染模版的方式，就都有可能出現(xiàn)服務(wù)端模版XSS。（這類XSS的本質(zhì)是模版注入，并不一定出現(xiàn)都在服務(wù)端渲染場景）。

服務(wù)端渲染模版本身是為了提前生成html，利于某些站點的seo 和加快頁面加載，如果對模版中用戶數(shù)據(jù)處理不當(dāng)，就會導(dǎo)致模版注入的問題。

舉例：

如果你在vue.js開發(fā)的網(wǎng)站中輸入了{{ 2+2 }}，后端服務(wù)器給返回了4的時候。你可以斷定這里存在模版解析的問題（服務(wù)端將用戶輸入直接放到template 中作為template的一部分解析返回）。

那么，如何攻擊vue.js模版注入漏洞？

但在vue組件模版中，我們不能直接調(diào)用底層javascript函數(shù)。利用vue的模版注入一般使用的是javascript的prototype的特性。

首先我們知道，vue會把模版解析成js代碼。那么對于模版注入漏洞，我們只需要將注入數(shù)據(jù)在解析結(jié)果里變成一段想要的js代碼就可以了。

Javascript 中的一切內(nèi)容都是對象。每個對象都包含一個protoptype （原型），prototype其中有個屬性叫constructor ，它指向的是該對象構(gòu)造函數(shù)。

函數(shù)也是一個對象，函數(shù)對象的constructor是一個允許動態(tài)生成函數(shù)的函數(shù)。這個constructor只要簡單把代碼字符串賦值給它就可以構(gòu)造一個匿名的JS 函數(shù)。

舉個例子：利用toString函數(shù)的構(gòu)造函數(shù)，通過賦值構(gòu)造一個匿名函數(shù)。

toString.constructor("consolo.log(1)")();

調(diào)用這個匿名函數(shù)：

Vue 的模版注入payload 原理就就是這樣，常用的測試payload有：

{{constructor.constructor('alert(1)')()}}{{_c.constructor('alert(1)')()}}{{_v.constructor('alert(1)')()}}{{_s.constructor('alert(1)')()}}

還有很多payload , 大家可以到參考資料中的xss-cheat-sheet中查找。防護知識：對于模版注入，我們可以通過v-pre指令對模版中的用戶輸入進行處理。v-pre 指令可以跳過指定點的模版編譯

。將起用在用戶輸入上可以防止用戶輸入造成的模版注入問題。

新聞標題：Vue.js中怎么實現(xiàn)跨站腳本攻擊
URL標題：http://weahome.cn/article/ejisop.html