VueでのXSS対策
Vueの自動エスケープ、v-htmlの危険性、サニタイズ用のDOMPurify、Trusted Types
「VueでのXSS対策」はCoddyKit上の無料Vue Academyレッスンです。 これはレッスン1/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはVue Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 Vue Academyコースには全4レッスンが含まれています。
XSSとは
クロスサイトスクリプティング（XSS）は、悪意のあるスクリプトをページに注入し、別のユーザーのブラウザーで実行させる攻撃です。Cookie、トークン、データを盗まれる可能性があります。Vueはデフォルトで保護してくれますが、いくつかのパターンによって脆弱性が再び生じます。
Vueは補間を自動的にエスケープする
mustache補間{{ }}内のテキストは自動的にHTMLエスケープされます。タグを含むユーザー文字列も、実行されずに安全なテキストとして表示されます。
<!-- userInput = "<script>alert(1)</script>" -->
<p>{{ userInput }}</p>
<!-- renders the literal text, no script runs -->属性バインディングも安全
v-bindまたは:attrによるバインディングでも値がエスケープされるため、注入された引用符によって属性の外に抜け出し、ハンドラーを注入されることはありません。
<div :title="userInput">Hover me</div>v-htmlの危険性
v-htmlはinnerHTMLを直接設定します。エスケープは行われないため、スクリプトやイベントハンドラーを含むあらゆるマークアップが、実行可能なHTMLとして表示されます。
<!-- DANGEROUS with untrusted input -->
<div v-html="userInput"></div>v-htmlが悪用される仕組み
scriptタグがなくても、攻撃者が用意したHTMLはイベントハンドラー属性やimg onerrorペイロードを通じてコードを実行できます。
// attacker-supplied value
const userInput = "<img src=x onerror=stealCookies()>";原則：ユーザー入力にv-htmlを使わない
最も簡単な原則は、信頼できないコンテンツをv-htmlに決して渡さないことです。入力元がユーザーによって制御される場合は、エスケープされる通常の補間を使ってください。
HTMLを表示する必要がある場合
リッチHTML（CMSの本文やMarkdownの出力など）が本当に必要になる場合もあります。その場合は、バインディングする前にHTMLをサニタイズする必要があります。
DOMPurifyでサニタイズする
DOMPurifyは安全な書式を残しながら、危険なタグや属性を削除します。インストールして、v-htmlに渡す前にサニタイズしてください。
npm install dompurifyサニタイズしてからバインドする
computed内で値をDOMPurify.sanitizeに通してから、 очищ済みの結果をバインドしてください。
import DOMPurify from "dompurify";
import { computed } from "vue";
const safeHtml = computed(() =>
DOMPurify.sanitize(props.rawHtml)
);
// template: <div v-html="safeHtml"></div>許可するタグを設定する
許可リストを制限して、想定したタグだけがサニタイズ後に残るようにできます。
DOMPurify.sanitize(html, {
ALLOWED_TAGS: ["b", "i", "em", "strong", "a", "p"],
ALLOWED_ATTR: ["href"]
});信頼してはいけないその他の入力元
URLも信頼しないでください。バインドされたリンクのjavascript: hrefはコードを実行できます。hrefを検証またはサニタイズし、ユーザーデータから動的な<script>ソースを決して組み立てないでください。
// reject dangerous protocols
const safe = /^https?:/.test(url) ? url : "#";確認テスト
ユーザーが送信したHTMLを表示する必要があります。安全な方法は何ですか？
まとめ
Vueは{{ }}補間と属性バインディングを自動的にエスケープし、ほとんどのXSSを無効化します。危険な例外はv-htmlで、これは生のHTMLを表示します。ユーザー入力を直接渡してはいけません。リッチHTMLが必要な場合は、まずDOMPurifyでサニタイズし、ユーザーが提供したURLも信頼しないでください。
よくある質問
「VueでのXSS対策」レッスンは無料ですか？
はい。「VueでのXSS対策」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、Vue Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 Vue Academyコースには全4レッスンが含まれています。
「VueでのXSS対策」で何を学びますか？
Vueの自動エスケープ、v-htmlの危険性、サニタイズ用のDOMPurify、Trusted Types ブラウザで直接実行するハンズオンコードでVue Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。
Vue Academyを始めるのに経験は必要ですか？
事前経験は必要ありません。CoddyKitのVue Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン1/4です。
「VueでのXSS対策」レッスンにはどのくらい時間がかかりますか？
ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。
このVue Academyレッスンでコードを書いて実行できますか？
はい。すべてのVue Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。