問題タブ [content-security-policy]

外部ツールに対して適切な GitHub リポジトリのコンテンツを実行するためにまとめた単純な Javascript ブックマークレットがあります。

Chrome または IE で実行すると (Daring Fireball の JS ブックマークレット ビルダーを介して実行した後、正常に動作します。Firefox では、コンテンツ セキュリティ ポリシー エラーが生成されます。

トピックに関するこの SE の質問と、CSP に関する github ブログ投稿を読みました。CSPはブックマークレットに干渉すべきではないことを認めていますが、その時点 (2013 年 4 月) では、「これを正しく理解しているブラウザはありません。」現在、Firefox はまだこれを間違えているのですが、Chrome と IE は間違っていますか?

また、ユーザー スクリプトと CSP に関するブログ投稿も見つけました。著者は、github リポジトリのコードを含めることで、この問題に対処できました。ブックマークレットを次のように変更して、それを試しました。

しかし、当然のことながら、呼び出しコードはまだブラウザーから来ているため、ブックマークレットでは機能しませんでした。

要するに、このブックマークレットを Firefox で動作させる方法についてのアイデアはありますか?

https://* ページに追加するために chrome 拡張機能を使用していますが、http://* からページをロードしたい場合、chrome は次のように言ってページをブロックしました:

[ブロック] https://* のページで、http://* からの安全でないコンテンツが実行されました。

そのような状況を回避する方法やAPIはありますか？

スクリプト評価に関する Content-Security-Policy (CSP) 制限に違反することなく、 ES6 テンプレート リテラル(例: )のスタイルでテンプレートを解析するテンプレート エンジンはありますか?"string ${var}"

スクリプト評価に関するCSP の制限により、、、evalおよびが防止new Functionされます。setTimeout(string)setInterval(string)

John Resig のMicroTemplates、 lodash _.template 、 DoT.jsなど、ES6 スタイルのテンプレート リテラルのようなものを提供または提供するように変更できるテンプレート エンジンが多数あります。ただし、すべてを使用して CSP に違反しているようですnew Function。

制限のない Javascript を使用できると便利な場合varもありますが、明らかな理由により、これは不可能な場合があります。ただし、必要に応じて出力をフォーマットするようにエンジンを変更できる必要があります。

この状況では、パフォーマンスは問題ではなく、テンプレートを事前にコンパイルすることはできません。他の人は事前コンパイルについて議論しています。

追加の制限として、コンテンツは HTML ではなくテキストです。結果として、Knockout や PURE などの DOM 指向のテンプレート エンジンが効果的に機能しないとは思いません。

私の最初の考えは、mustache.jsから始めてそこから変更することです (つまりmustache.tags = ['${', '}']、変更またはDIY ソリューションですが、CSP とテンプレートに関する議論がかなり不足しているように見えるため、このトピックに関する一般的な考えに感謝します。 .

Chrome 拡張アプリケーションで JavaScript を使用して「iframe」にさまざまなコンテンツ (pdf、swf など) を読み込もうとしています。コンテンツは、データ URL スキームを次のように使用してロードされます。

// この JavaScript は html ファイルに登録され、LoadFunction はボタンのクリックで DOMContentLoaded イベント内に登録されます。

ただし、上記の関数が呼び出されるとすぐに、コンテンツ セキュリティ ポリシー エラーが次のように発生します。

'data:application/pdf;base64,JVBERi0xLjQNCiXi48/TDQoxIDAgb2JqDQo8PA0KL1R5cGU…mRvYmoNCjkgMCBvYmoNCjw8DQovVHlwZSAvRm9udA0KL1N1YnR5cGUgL1R5cGUxDQovQmFz PolicyZUZ' からのプラグイン データの読み込みを拒否しました。

しかし驚くべきことに、データの URL が 'data:image/png;base64,' + 'base64 encoded data'; に変更された場合、このエラーは発生しません。画像が iframe に正常に読み込まれます。

私の知る限り、このエラーはインライン コードが html ファイルに直接実行された場合にのみ発生しますが、ここではそうではありません。

また、manifest.json ファイルでコンテンツ セキュリティ ポリシーを「content_security_policy」:「script-src 'self'; object-src 'self' ; frame-src 'self' data:」に設定しようとすると、

その後、エラーは次のように変わり ます: 'data:application/pdf;base64' からのプラグイン データの読み込みを拒否しました。これは、次のコンテンツ セキュリティ ポリシー ディレクティブに違反しているためです:

おそらく object-src を設定する必要がありますが、どうすればよいかわかりません。

以下のコンテンツ セキュリティ ポリシー (CSP) スニペットをコードのどこに適用すればよいかわかりません。

それはHTMLにあるべきですか？

以下のコード スニペットのように、JavaScript で実装するのが最適でしょうか?

私の Chrome アプリには次のマニフェストがあります。

を実行するスクリプト ファイルがありますeval。CSPとサンドボックスについて読みましたが、それでも次のエラーが発生します。

「unsafe-eval」は次のコンテンツ セキュリティ ポリシー ディレクティブで許可されているスクリプトのソースではないため、文字列を JavaScript として評価することを拒否しました: "default-src 'self' chrome-extension-resource:". 「script-src」は明示的に設定されていないため、「default-src」がフォールバックとして使用されることに注意してください。

ノックアウトでセキュアバインディングを使いたい。そのためには、knockout-secure-binding.jsを使用します。

次のコードが機能しない理由を誰が説明できますか? エラーをスローします `

キャッチされていない #< Object > knockout-secure-binding.js:74`

行の後にko.applyBindings(new viewModel());