vue使用csp的簡單示例

Posted on by

在 VUE 中 {{{data}}} 和 v-html 屬性會把內容解析成 html，可能會造成 xss 漏洞；

以及 當使用 SSR（ Server Side Rendering（服務端渲染））， SSR 的時候忘記瞭轉義和過濾而導致 XSS；

vue 使用 csp 時，需要使用 csp 兼容版本

$ npm install vue
# 獲取CSP兼容版本：
$ npm install vue@csp

demo：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="Content-Security-Policy" content=" img-src https://*; script-src * 'unsafe-inline' 'nonce-1'; ">
<script src="vue.min.js"></script>
</head>
<body>
<div id="app">
  {{ message }}
</div>

<div id="test"></div>
<div id="test2"></div>


<script nonce=1>
new Vue({
    el:'#app',
    data: {
        message:'Hello World!'
    }
});
</script>
<script type="text/javascript" nonce=1>
document.getElementById('test').innerHTML = 'xxx';


</script>
<script type="text/javascript" nonce=2>
document.getElementById('test2').innerHTML = 'sss'; 

</script>
</body>
</html>

vue 組件成功執行，nonce=1 的成功執行而 nonce=2 的 js 沒有執行，所以 CSP 策略成功執行。

VUE 官方文檔裡的兼容 CSP 方法：

    當使用運行時隻有建立 WebPACK + Vue 裝載機或 Browserify + vueify，將預編譯渲染模板，能工作在 CSP 環境。

這裡使用 webpack +vue 嘗試，用 npm 搭建 vue 的官方 demo，vue init webpack my-first-vue-project.

改寫 index ，加入 meta

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
   <meta http-equiv="Content-Security-Policy" content=" script-src * 'unsafe-inline' ; ">

    <title>myvue</title>
  </head>
  <body>
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
</html>

npm run dev ，瀏覽器 console 發現報錯

按提示，meta 加入 'unsafe-eval' 後成功運行：

不過無法指定 nonce，因此 VUE 用 webpack 時要限制 script-src 的域名才有安全的 CSP 的策略。

總結：

vue ，react 都對基本數據進行瞭轉義，同時，許多基於 MVVM 框架的單頁面應用不需要刷新 URL 來控制 view。但代碼疏忽還是有 xss 可能性，所以使用 CSP 策略可以雙重保險，避免人為的疏忽導致 XSS 漏洞。

到此這篇關於vue使用csp的文章就介紹到這瞭,更多相關vue使用csp內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet！

推薦閱讀：