ホームページ >ウェブフロントエンド >jsチュートリアル >NodeJSによるフロントエンドとバックエンドの分離の考え方と実践 (4) セキュリティ問題の解決策_node.js
NodeJSによるフロントエンドとバックエンドの分離の考え方と実践 (4) セキュリティ問題の解決策_node.js
- WBOYオリジナル
- 2016-05-16 16:35:201738ブラウズ
はじめに
フロントエンドとバックエンドの分離開発モデルにおいて、開発の役割と機能の点で最も明らかな変化の 1 つは、以前はブラウザ環境での開発のみを担当していたフロントエンドの学生が必要になったことです。サーバーレベルのコードを書きます。私たちが直面している根本的な問題は、Web セキュリティをどのように確保するかということです。
この記事では、フロントエンドとバックエンドの分離モードのアーキテクチャに基づいて、Web開発においてフロントエンドで遭遇するセキュリティ問題の解決策とその対策と注意事項を提案します。
クロスサイトスクリプティング攻撃 (XSS) に対する防御
問題と解決策
クロスサイト スクリプティング攻撃 (XSS、クロスサイト スクリプティング) は、Web Web サイトを攻撃する最も一般的かつ基本的な方法です。攻撃者は、攻撃的なコードを含むデータを Web ページ上に公開することができ、閲覧者がその Web ページを閲覧すると、閲覧者のユーザーの ID と権限で特定のスクリプトが実行されます。 XSS は、ユーザー データを簡単に変更したり、ユーザー情報を盗んだり、CSRF 攻撃などの他の種類の攻撃を引き起こす可能性があります。
XSS 攻撃を防ぐ基本的な方法は、HTML ページに出力されるすべてのデータが HTML でエスケープされるようにすることです (HTML エスケープ)。たとえば、次のテンプレート コード:
$description はテンプレート変数 (異なるテンプレートで定義されている変数の構文は異なります。ここでは単なる例です)、ユーザーによって送信されたデータであり、攻撃者は「JavaScript」を含むコードを入力できます。 ", そのため、上記のテンプレートステートメントの結果は次の結果になります:
<テキストエリア名="説明">
<script>alert('hello')'</script>
上記のコードは、ブラウザーでレンダリングされると、JavaScript コードを実行し、画面上で hello を警告します。もちろん、このコードは無害ですが、攻撃者は JavaScript を作成してユーザー情報を変更したり、Cookie データを盗んだりする可能性があります。
解決策は非常に簡単で、$description の値を HTML エスケープすることです。エスケープされた出力コードは次のとおりです。
<テキストエリア名="説明">
<script>alert("hello!")</script>
上記のエスケープされた HTML コードは無害です。
ミッドウェーの解決策
ページ内のすべてのユーザー出力データをエスケープします
データをエスケープするには、いくつかの状況と方法があります:
1. テンプレート内に提供されているメカニズムを使用して
をエスケープします。Midway は、内部でテンプレート言語として KISSY xtemplate を使用します。
xtemplate の実装では、2 つの角括弧 ({{val}}) を使用してテンプレート データを文法的に解析するため、開発者は次のようなテンプレートを作成できます。
2. Midway で明示的にエスケープ関数を呼び出します。
開発者は、次のように、Node.js プログラムまたはテンプレートで Midway が提供する HTML エスケープ メソッドを直接呼び出して、データを明示的にエスケープできます。方法 1: Node.js プログラムで HTML エスケープ データ
//サーバーからのデータ、例: {html:''、other:""}
data.html =Security.escapeHtml(data.html);
xtpl = xtpl.render(data);
注: データがテンプレート内でエスケープされていない場合にのみ、Security.escapeHtml を使用してエスケープします。 そうしないと、テンプレート内およびプログラム内で二重エスケープが重ね合わされ、予期しない出力が発生します。
推奨事項: xtemplate を使用する場合は、テンプレートの組み込みの {{}} を直接使用してエスケープすることをお勧めします。他のテンプレートを使用する場合は、Security.escapeHtml を使用してエスケープすることをお勧めします。
ページ内のユーザーによるリッチ テキスト出力をフィルタリングします
あなたは次のように考えているかもしれません。「実際には、リッチ テキストを出力したいだけです。たとえば、一部の掲示板やフォーラムでは、ユーザーに簡単なフォント サイズ、色、背景、その他の機能が提供されています。では、そのようなリッチ テキストをどのように処理すればよいでしょうか。 XSS を防ぐには？「
」1. Security in Midway が提供するrichText関数を使用します
Midway は、リッチ テキストをフィルタリングし、XSS、フィッシング、Cookie 盗難などの脆弱性を防ぐために特別に使用される richText メソッドを提供します。
メッセージボードがあり、テンプレートコードは次のとおりです:
{{{メッセージ}}}
メッセージはユーザー入力データであるため、メッセージ ボードのコンテンツにはリッチ テキスト情報が含まれます。そのため、xtemplate では 3 つの中括弧が使用され、HTML エスケープはデフォルトで実行されません。その場合、ユーザーが入力したデータは次のようになります。以下に続きます:
上記のリッチ テキスト データをページに直接出力すると、必然的に eval.com サイトの js が現在のページに挿入され、XSS 攻撃が発生します。この脆弱性を防ぐには、テンプレートまたはプログラムで Security.richText メソッドを呼び出して、ユーザーが入力したリッチ テキストを処理するだけで済みます。
呼び出し方法はescapeHtmlと似ており、以下の2通りの方法があります
方法 1: Node.js プログラムで直接呼び出す
message =Security.richText(message);
var html = xtpl.render(メッセージ)
方法 2: テンプレートで
を呼び出すSecurity.richText({{{メッセージ}}})
セキュリティの richText メソッドを呼び出した後の最終出力は次のようになります:
メッセージを残しています
まず、XSS 攻撃を引き起こす可能性のあるスクリプト タグが直接フィルタリングされ、同時に style タグ内の CSS 属性 style:fixed もフィルタリングされることがわかります。最後に無害なHTMLリッチテキストを出力します
XSS 攻撃のその他の考えられる手段について学びます
ページ テンプレートでの XSS 攻撃の可能性に加えて、Web アプリケーションが危険にさらされる可能性のある方法が他にもいくつかあります。
1. エラーページの脆弱性
ページが見つからない場合、システムは 404 Not Found エラーを報告することがあります。例: http://localhost/page/not/found
404 見つかりません
ページ /page/not/found が終了しません
明らかに: 攻撃者はこのページを使用して、http://localhost/