Vue.js中怎么實現跨站腳本攻擊

本篇文章給大家分享的是有關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，盡量保證使用http:// 和 https:// 協議及訪問可信的資源服務器 。

Vue.js 服務端模版渲染XSS

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

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

舉例：

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

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

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

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

Javascript 中的一切內容都是對象。每個對象都包含一個protoptype （原型），prototype其中有個屬性叫constructor ，它指向的是該對象構造函數。

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

舉個例子：利用toString函數的構造函數，通過賦值構造一個匿名函數。

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

調用這個匿名函數：

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中怎么實現跨站腳本攻擊，小編相信有部分知識點可能是我們日常工作會見到或用到的。希望你能通過這篇文章學到更多知識。更多詳情敬請關注億速云行業資訊頻道。