コンテンツセキュリティポリシーを使用してクライアントスクリプトにサーバデータを渡す

Webサーバ（https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP）にコンテンツセキュリティポリシーヘッダを設定すると、最新のブラウザでインラインスクリプトがブロックされます。すべてのjavascriptを.jsファイルに配置し、これらの.jsファイルがホストされているドメインを認可するようにポリシーを設定することをお勧めします。コンテンツセキュリティポリシーを使用してクライアントスクリプトにサーバデータを渡す

私の質問は、サーバー側のアプリケーションからクライアントスクリプトにデータを渡す方法です。

たとえば、サーバー側の値を入力とするjs関数を呼び出す場合、ブロックされているページ本文で、以下のコード（MVC.Net Razor View）のような関数を呼び出す必要があります。

<body> 
... 
<input type="button" value="Test" onclick="DoSomething('@ViewData["SomeValue"]');" /> 
... 
</body>

私は、クエリ文字列スクリプトのsrc属性（http://feather.elektrum.org/book/src.html）にデータを渡すためにいくつかの方法を見つけたが、私はそれが最善の解決策であるかわかりません。私は特に、srcクエリ文字列の変数のキャッシュ問題について心配しています。それを行う良い方法はありますか？

出典

2017-07-12 Jonathan

ファイルそのことを聞いたことはありません「いずれかのインラインスクリプトは、最近のブラウザでブロックされています」。 – Seblor

@Seblor：編集 – Jonathan

を参照してください。たとえば、サーバー側の値を入力とするjs関数を呼び出す場合は、ブロックされているページの本文で関数を呼び出す必要があります。ここでやるクライアントは、「データ」の要求を作成し、「データ」を受信し、データが呼び出された後に任意の関数を自由に呼び出すことができます。あなたのシナリオはJSONPと同じですか？ – bhantol

最初のリクエストで初期データを持つのは非常に一般的なので、ここでは簡単な方法です。必要なものがすべてデータである場合には、実際のスクリプトを作成する必要はありません。

<script type="application/json" id="data">{"foo": "bar"}</script>

次に、あなたのJavaScriptで

var data = JSON.parse(document.querySelector('#data').innerHTML); 
alert(data.foo);

出典

2017-07-12 18:01:36 Prinzhorn

これはかなり良いとクリーンなソリューション、私はこれまでのところ、うまく動作したいくつかのテストのようです、ありがとう – Jonathan

@ジョナサンは、私はinnerHTMLにtextContentを変更したことに注意してください – Prinzhorn

動的に値を挿入したインラインJavaScriptをサーバーに出力させる代わりに、必要なデータを返すサーバー上のエンドポイント（REST APIなど）をJavaScriptで呼び出す必要があります。この制限はインライン・スクリプトでのみ行われます。 XMLHttpRequestを使用して、実行時にサーバーから任意のデータを取得することができます。

また、インラインスクリプトと同じように動作するが、別々に実行される動的に生成されたjsファイルを提供できます。これは可能性がありますが、実際の利点はありません。

出典

2017-07-12 17:26:14 Adrian

私はそれも考えていましたが、サーバーへの余分なHTTPリクエストが心配でしたが、これは担当の状況がパフォーマンスを傷つける可能性があります – Jonathan

それは現代のWebアプリケーションでは非常に一般的です。あなたがインラインで行うことができない場合、データを取得するためのサーバコールを作成します。 – Adrian

コンテンツセキュリティポリシーを使用してクライアントスクリプトにサーバデータを渡す

答えて

関連する問題