LIBOT Labs

Appearance

XSS リスク ― v-html 104箇所。全部危険か？ ​

📖この章のキーワード
用語意味なぜ重要か
XSSCross-Site Scripting。悪意あるスクリプトをページに注入する攻撃Cookie 窃取やセッションハイジャック
v-htmlVue で HTML をエスケープなしで描画するディレクティブ便利だが XSS リスク
エスケープHTML タグを無害な文字列に変換することVue の は自動エスケープ
サニタイズ危険な HTML タグやスクリプトを除去することv-html を安全に使う手段

Phase 1: 観察 ​

LIBOT の Vue コンポーネントには v-html ディレクティブが 約 104 箇所 あります。

v-html は HTML をそのまま描画します。

vue
<!-- 危険な場合 -->
<p v-html="userInput"></p>
<!-- ユーザーが <script>alert('XSS')</script> を入力したら？ -->

<!-- 安全な場合 -->
<p v-html="$t('welcome_message')"></p>
<!-- 翻訳ファイルの固定文字列。ユーザー入力は含まれない -->

104 箇所の内訳（傾向）:

カテゴリ割合リスク
翻訳文字列の描画多い低
リッチテキスト（管理者入力）中程度中
ユーザー入力の直接描画少ない高

Phase 2: 判断 ​

AI禁止ゾーン
  • 104 箇所の v-html を 全て今すぐ排除 すべきですか？
  • 危険な v-html と 安全な v-html をどう見分けますか？
  • 優先的に対処 すべきはどの箇所ですか？

AIに聞く前に、自分の頭で考えてみましょう。

テキストを入力すると有効になります