From 3e56746823efea7f12f6e7512b1ff3471d2028e2 Mon Sep 17 00:00:00 2001 From: oohira Date: Wed, 5 Feb 2020 08:37:56 +0900 Subject: [PATCH] [Doc]: add non-trusted template rule to security guide #1992 * cherry-pick & translate vuejs/vuejs.org@9790624 --- src/v2/guide/security.md | 15 ++++++++++++++- 1 file changed, 14 insertions(+), 1 deletion(-) diff --git a/src/v2/guide/security.md b/src/v2/guide/security.md index d3caa5fcd..5c95d490b 100644 --- a/src/v2/guide/security.md +++ b/src/v2/guide/security.md @@ -1,6 +1,6 @@ --- title: セキュリティ -updated: 2019-11-18 +updated: 2020-02-05 type: guide order: 504 --- @@ -11,6 +11,19 @@ order: 504 新たな脆弱性の発見はめったにありませんが、常に Vue とその公式ライブラリの最新バージョンを使用し、アプリケーションのセキュリティを可能な限り維持することをお勧めします。 +## ルール No.1: 信頼できないテンプレートを絶対に使わない + +Vue を使うときの最も基本的なセキュリティルールは、**信頼できないコンテンツをコンポーネントのテンプレートとして絶対に使わない** ということです。そうすることは、あなたのアプリケーション内で任意の JavaScript 実行を許してしまうことと同じです。さらに悪いことに、コードがサーバーサイドレンダリング中に実行された場合には、サーバー側の欠陥につながります。例えば、次のような使い方です: + +``` js +new Vue({ + el: '#app', + template: `
` + userProvidedString + `
` // 絶対にしてはいけない +}) +``` + +Vue のテンプレートは JavaScript にコンパイルされ、テンプレート中の式はレンダリング処理の過程で実行されます。式は特定のレンダリングコンテキストで評価されますが、潜在的にはグローバルに実行される複雑な実行環境となるため、Vue のようなフレームワークでパフォーマンスの非現実的なオーバーヘッドを受けることなく悪意のあるコード実行を完全に防ぐことは困難です。この手の問題を回避する最も直接的な方法は、完全にあなたの管理下にある信頼されたコンテンツだけを Vue テンプレートのコンテンツにすることです。 + ## Vue が行っているセキュリティ対策 ### HTML コンテンツ