v-html可能導致的問題
阿新 • • 發佈：2021-06-28
v-html可能導致的問題
Vue中的v-html指令用以更新元素的innerHTML，其內容按普通HTML插入，不會作為Vue模板進行編譯，如果試圖使用v-html組合模板，可以重新考慮是否通過使用元件來替代。
描述
易導致XSS攻擊
v-html指令最終呼叫的是innerHTML方法將指令的value插入到對應的元素裡，這就是容易造成xss攻擊漏洞的原因了。Vue在官網對於此也給出了溫馨提示，在網站上動態渲染任意HTML是非常危險的，因為容易導致XSS攻擊，只在可信內容上使用v-html，永不用在使用者提交的內容上。
關於XSS，跨站指令碼攻擊XSS，是最普遍的Web應用安全漏洞。這類漏洞能夠使得攻擊者嵌入惡意指令碼程式碼到正常使用者會訪問到的頁面中，當正常使用者訪問該頁面時，則可導致嵌入的惡意指令碼程式碼的執行，從而達到惡意攻擊使用者的目的。當動態頁面中插入的內容含有這些特殊字元如<
HTML標籤，當這些HTML標籤引入了一段JavaScript指令碼時，這些指令碼程式就將會在使用者瀏覽器中執行。當這些特殊字元不能被動態頁面檢查或檢查出現失誤時，就將會產生XSS漏洞。
- 反射型
XSS： 攻擊者事先製作好攻擊連結,需要欺騙使用者自己去點選連結才能觸發XSS程式碼，所謂反射型XSS就是將惡意使用者輸入的js指令碼，反射到瀏覽器執行。 - 儲存型
XSS：程式碼是儲存在伺服器中的，如在個人資訊或發表文章等地方，加入程式碼，如果沒有過濾或過濾不嚴，那麼這些程式碼將儲存到伺服器中，每當有使用者訪問該頁面的時候都會觸發程式碼執行，這種XSS非常危險，容易造成蠕蟲，大量盜竊cookie，也被稱為持久型XSS。 DOM型XSS：類似於反射型XSS，但這種XSS攻擊的實現是通過對DOM樹的修改而實現的。
// 直接將輸入列印到頁面，造成XSS // 反射型示例
<?php
$XssReflex = $_GET['i'];
echo $XssReflex;
<!-- 構造url，點選後就可以執行js程式碼 -->
http://127.0.0.1/xss.php?i=<script>alert("run javascript");</script>
不作為模板編譯
v-html更新的是直接使用元素的innerHTML方法，內容按普通HTML插入，不會作為Vue
v-html組合模板，可以重新考慮是否通過使用元件來替代。另外後端返回<script>標籤中的程式碼是不會直接執行的，這是瀏覽器的策略，如果需要的話可以在$nextTick回撥中動態建立<script>標籤然後src引入程式碼url即可。
scoped樣式不能應用
在單檔案元件裡，scoped的樣式不會應用在v-html內部，因為那部分HTML沒有被Vue的模板編譯器處理，如果你希望針對v-html的內容設定帶作用域的CSS，你可以替換為CSS Modules或用一個額外的全域性<style>元素手動設定類似BEM的作用域策略。此外提一下關於樣式隔離的話，Shadow DOM也是個不錯的解決方案。關於CSS Modules以及BEM命名規範可以參考下面的連結。
https://zhuanlan.zhihu.com/p/72631379
https://vue-loader.vuejs.org/zh/guide/css-modules.html
https://www.ruanyifeng.com/blog/2016/06/css_modules.html
每日一題
https://github.com/WindrunnerMax/EveryDay
參考
https://cn.vuejs.org/v2/api/#v-html
https://zhuanlan.zhihu.com/p/72631379
https://juejin.cn/post/6844903918518927367
https://www.cnblogs.com/ming1025/p/13091253.html
https://www.ruanyifeng.com/blog/2017/04/css_in_js.html
https://vue-loader.vuejs.org/zh/guide/css-modules.html
https://www.ruanyifeng.com/blog/2016/06/css_modules.html