JavascriptとCSP - ベストプラクティス

Webアプリケーションにコンテンツサイト保護を使用したい。あなたがそれを聞いていないなら、要するに:それは私のWebアプリケーションに埋め込まれたJavaScriptを無効にして、XSSを防ぐのを助けるだろう。

結果は、私のjavascriptコードはすべて外部ファイルになければなりません。

ほとんどのJavaScriptの 'ライブラリ/フレームワーク'コードは既にありますが、通常はマイページには少なくとも数行のJSコードが含まれ、特定のページに関連するコンポーネントをインスタンス化します。

たとえば、私は仮説的な登録ページを持っています。登録ページの下部に、私は次のコードを持っています:

var registrationForm = new MyApp.registrationValidator($('.regform'));
registrationForm.init();

この仮想コードは登録フォームへの参照を取得し、すべての検証コードを登録することができます。

今度は、このコードを外部ファイルに移動する必要があります。私はできた:

Option A: create a small .js file for every page, that only executes code specific for that page.

  • 長所 - 簡単で比較的速い
  • 短所 - これはすべてのページの余分なjsファイルです。リクエストを減らすためにすべてのjavascriptを1つのファイルに最小化できる方が好きです。

Option B: Execute all my 'instantiating code' in a JavaScript file. I'll just detect if there's any '.regForm' CSS classes on the page and only instantiate my objects if they appear on the page.

  • 長所 - インスタンス化のための単一の場所。正しいCSSクラスがあれば、ページ上のコンポーネントが魔法のように動作し始めます。
  • 短所 - アプリケーションがかなり大きくなった場合、特定のページで不要な初期化コードが多数発生します。

Option C: Give my <body> tag an id or class, and execute the correct code based on a big switch.

  • 長所:1つの.jsファイルに圧縮することはできますが、ページごとに.jsファイルは必要ありません。
  • 短所:これはちょっと醜いと思います。

私は、コードを初期化するのは大したことではないと感じていたのであれば、オプションBはすばらしいことです。

私が主に思っているのは、あなたはこの状況での経験がありますか?それをどうやって解決しましたか?

4

2 答え

オプションD(AとBのバリエーション):複数のjavascriptソースファイルをコンパイル(および縮小)するデプロイメントシステムを見て、そのページに必要なファイルだけを考慮してください。

PHPの場合、 Assetic はそのようなシステムです。

3
追加された
ありがとう!これは良い提案であり、大きな疑問を抱く大きなプロジェクトです。ほとんどのページの新しいダウンロードではなく、最終的にユーザーに1つの大きなjsパッケージを与えることができたらと思っています。
追加された 著者 Evert,

jQuery(外部のJavaScriptを動的にロードして実行する)のようなフレームワークを使用したい場合は、AとBを組み合わせたメリットがあります。どのページにも同じ.jsがロードされ、どの.jsファイルが動的にロードされるか(dom要素の有無によって)決定されます。

1
追加された
クライアント側で初期化コードを取り除きたい場合は、php/asp/jspにどの.jsをhtml出力に添付するかを決定させることができます。 PHPのために、私は確かに、あなたはdom xml traversingを行うことができることを知っています。
追加された 著者 maddrag0n,
バックボーンと同様にjQueryも使用しています。私はオプションBでこれを暗示しようとしていましたが、私が何を意味しているかを説明するより良い仕事をしてくれてありがとう:)
追加された 著者 Evert,
JavaScript - 日本のコミュニティ
JavaScript - 日本のコミュニティ
2 参加者の

日本人コミュニティのjavascript