vue使用csp的簡(jiǎn)單示例

更新時(shí)間：2022年08月17日 10:05:23 作者：D-0

Vue是一套用于構(gòu)建用戶界面的漸進(jìn)式框架,與其它大型框架不同的是,Vue被設(shè)計(jì)為可以自底向上逐層應(yīng)用,下面這篇文章主要給大家介紹了關(guān)于vue使用csp的相關(guān)資料,需要的朋友可以參考下

在 VUE 中 {{{data}}} 和 v-html 屬性會(huì)把內(nèi)容解析成 html，可能會(huì)造成 xss 漏洞；

以及當(dāng)使用 SSR（ Server Side Rendering（服務(wù)端渲染））， SSR 的時(shí)候忘記了轉(zhuǎn)義和過(guò)濾而導(dǎo)致 XSS；

vue 使用 csp 時(shí)，需要使用 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 組件成功執(zhí)行，nonce=1 的成功執(zhí)行而 nonce=2 的 js 沒(méi)有執(zhí)行，所以 CSP 策略成功執(zhí)行。

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

當(dāng)使用運(yùn)行時(shí)只有建立 WebPACK + Vue 裝載機(jī)或 Browserify + vueify，將預(yù)編譯渲染模板，能工作在 CSP 環(huán)境。

這里使用 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 發(fā)現(xiàn)報(bào)錯(cuò)

按提示，meta 加入 'unsafe-eval' 后成功運(yùn)行：

不過(guò)無(wú)法指定 nonce，因此 VUE 用 webpack 時(shí)要限制 script-src 的域名才有安全的 CSP 的策略。

總結(jié)：

vue ，react 都對(duì)基本數(shù)據(jù)進(jìn)行了轉(zhuǎn)義，同時(shí)，許多基于 MVVM 框架的單頁(yè)面應(yīng)用不需要刷新 URL 來(lái)控制 view。但代碼疏忽還是有 xss 可能性，所以使用 CSP 策略可以雙重保險(xiǎn)，避免人為的疏忽導(dǎo)致 XSS 漏洞。

到此這篇關(guān)于vue使用csp的文章就介紹到這了,更多相關(guān)vue使用csp內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

相關(guān)文章

vant3中使用List組件的一些坑
這篇文章主要介紹了vant3中使用List組件的一些坑及解決，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2023-01-01
使用Vue實(shí)現(xiàn)網(wǎng)頁(yè)截圖和截屏功能
網(wǎng)頁(yè)截圖與截屏功能在許多Web應(yīng)用程序中都非常有用,Vue.js作為一個(gè)流行的JavaScript框架,提供了許多工具和庫(kù)來(lái)簡(jiǎn)化網(wǎng)頁(yè)截圖和截屏的實(shí)現(xiàn),本文將介紹如何使用Vue來(lái)實(shí)現(xiàn)一個(gè)網(wǎng)頁(yè)截圖和截屏功能的示例,包括使用html2canvas庫(kù)和vue-cropper庫(kù),需要的朋友可以參考下
2023-10-10
老生常談vue2中watch的使用
watch的基本用法是在Vue實(shí)例中定義一個(gè)watch對(duì)象,該對(duì)象內(nèi)部包含需要監(jiān)聽(tīng)的數(shù)據(jù)項(xiàng)和對(duì)應(yīng)的回調(diào)函數(shù)，這篇文章主要介紹了vue2中watch的使用,需要的朋友可以參考下
2024-01-01
vue+Element中table表格實(shí)現(xiàn)可編輯(select下拉框)
這篇文章主要介紹了vue+Element中table表格實(shí)現(xiàn)可編輯，實(shí)現(xiàn)select下拉框，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2020-05-05
vue3.2?Composition?API項(xiàng)目依賴升級(jí)
這篇文章主要為大家介紹了vue3.2?Composition?API項(xiàng)目依賴升級(jí)示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2022-08-08
vue中使用axios post上傳頭像/圖片并實(shí)時(shí)顯示到頁(yè)面的方法
今天小編就為大家分享一篇vue中使用axios post上傳頭像/圖片并實(shí)時(shí)顯示到頁(yè)面的方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
2018-09-09
vue-cli中安裝方法(圖文詳細(xì)步驟)
這篇文章主要介紹了vue-cli中安裝方法(圖文詳細(xì)步驟)，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2018-12-12
Vue實(shí)現(xiàn)動(dòng)態(tài)路由導(dǎo)航的示例
本文主要介紹了Vue實(shí)現(xiàn)動(dòng)態(tài)路由導(dǎo)航的示例，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2023-02-02
vue-router實(shí)現(xiàn)webApp切換頁(yè)面動(dòng)畫效果代碼
本篇文章主要介紹了vue實(shí)現(xiàn)app頁(yè)面切換效果實(shí)例代碼，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2017-05-05
vue項(xiàng)目中應(yīng)用ueditor自定義上傳按鈕功能
這篇文章主要介紹了vue項(xiàng)目中應(yīng)用ueditor自定義上傳按鈕功能，文中以vue-cli生成的項(xiàng)目為例給大家介紹了vue項(xiàng)目中使用ueditor的方法，感興趣的朋友跟隨腳本之家小編一起學(xué)習(xí)吧
2018-04-04