動的ボタンによるコンテンツセキュリティポリシー

サイトにコンテンツセキュリティポリシー（CSP）を実装しています。以下は私がテストしているCSPポリシーです。動的ボタンによるコンテンツセキュリティポリシー

Content-Security-Policy: script-src 'self' 'nonce-random' 'strict-dynamic';

このサイトでは、サードパーティのjsスクリプトライブラリを使用しています。スクリプトライブラリは動的コンテンツをページに挿入します。動的コンテンツにはインラインイベントハンドラがあります。以下は、サイト+サードパーティのライブラリの動作を模倣した単純なHTMLページです。

<!DOCTYPE html> 
<html> 
<head> 
    <title>CSP Test Page</title> 
    <script nonce="random"> 
     document.addEventListener('DOMContentLoaded', function (event) { 
      var el = document.createElement('button'); 
      el.innerHTML = 'Click Me'; 
      el.setAttribute('onclick', "doSomething()"); 
      document.body.appendChild(el); 
     }); 

     function doSomething() { 
      alert('I did something.'); 
     } 
    </script> 
</head> 
<body> 
</body> 
</html>

動的に追加したボタンのインラインイベントハンドラ

はクロームコンソールで次のエラーメッセージをトリガー： "：それはコンテンツセキュリティポリシーディレクティブ以下に違反しているため、インラインイベントハンドラを実行することを拒否

script-src 'self' 'nonce-random' 'strict-dynamic' "となります。インライン実行を有効にするには、 'unsafe-inline'キーワードハッシュ（ 'sha256 -...'）またはノンス（ 'nonce -...'）のいずれかが必要です。

CSPの観点からこの問題を解決する方法に関する提案はありますか？インラインイベントハンドラで動的に生成されたコンテンツを追加するサードパーティライブラリのコードを変更することはできません。

出典

2017-10-30 dnickels

CSPは、サードパーティのライブラリによって追加されたコードを含め、すべてのインラインイベントハンドラをブロックします。残念ながら、CSPと互換性のない依存関係をリファクタリングすることなくこの問題を解決する簡単な方法はありません。

長期的には、CSP3は、'unsafe-hashed-attributes'機能を使用してイベントハンドラ内の信頼できるスクリプトをホワイトリストに登録する機能を提供する可能性がありますが、安定したブラウザではまだ出荷されていません。

一方、考えられる回避策の1つは、外部ライブラリを呼び出した後、インラインイベントハンドラを使用して属性を手動で削除することです。それはCSPに来るときのonclickの設定とは対照的に、onclickプロパティに機能を割り当てること、直接、大丈夫であることをHTML要素の属性、ある

var el = document.createElement('button'); 
library.doStuff(el); 

// Now that the library has run we will change the DOM to be compatible with CSP. 
el.onclick = function() { doSomething() }; 
el.removeAttribute('onclick');

注：つまり、あなたは何かなどを行うことができます文字列をコードに変換するため、CSPによってブロックされます。これはCSP違反を回避しますが、ライブラリ内にインラインイベントハンドラのインスタンスが少数存在する場合にのみ意味を持ちます。さもなければ、これはかなり退屈になる可能性があります。

補足として、に似た'strict-dynamic'をサポートしていない古いブラウザでは、CSPが恩恵を受ける可能性があります。

出典

2017-10-31 10:08:50

https://developer.chrome.com/extensions/contentSecurityPolicy#interactionsにある「コンテンツスクリプト」（HTMLコンテンツを生成するjsスクリプトの名前）のトピックに関する追加情報があります。このページでは、コンテンツスクリプトのニュアンスについて議論しています。 – dnickels

動的ボタンによるコンテンツセキュリティポリシー

答えて

関連する問題