web-dev-qa-db-ja.com

Chrome拡張機能-コンテンツセキュリティポリシー-インラインコードの実行

chrome拡張機能で外部JavaScriptライブラリを使用しています。インライン実行しているため、次のようなエラーが発生します

（コンソールで発生するエラー）

次のコンテンツセキュリティポリシーディレクティブ「script-src 'self' chrome-extension：//」に違反しているため、JavaScript URLの実行を拒否しました。インライン実行を有効にするには、「unsafe-inline」キーワード、ハッシュ（「sha256 -...」）、またはナンス（「nonce -...」）のいずれかが必要です。

エラーメッセージは、可能な回避策があることを明確に示しています。

Chrome-コンテンツセキュリティポリシー は不可能だと述べています。多くの関連する質問がこのリンクを引用しました。

ブログ このブロガーは可能だと言っていますが、おそらくこれは古いchrome拡張機能にのみ適用されます。

可能な回避策はありますか？

PS：私が使用しているライブラリ全体を変更したくない/変更できない。

編集：インライン実行を有効にするためにハッシュまたはノンスを使用する方法。

google-chromegoogle-chrome-extensioncontent-security-policy
20
Amit G

いいえ、このポリシーを緩和することはできません。 unsafe-inlineは、Chrome拡張機能によって明確に無視されます。マニフェストバージョン2以降の拡張機能です。

ドキュメント （私の強調）：

インラインJavaScriptの実行に対する制限を緩和するメカニズムはありません。 特に、「unsafe-inline」を含むスクリプトポリシーを設定しても効果はありません。

エラーメッセージにはいくつかの可能な方法が記載されていますが、ドキュメントでは、CSPがインラインスクリプトを許可せず、unsafe-inlineは対策の1つにすぎません。

更新

Chrome 46以降、インラインスクリプトは、ポリシーでソースコードのbase64エンコードハッシュを指定することでホワイトリストに登録できます。このハッシュには、使用するハッシュアルゴリズム（sha256、sha384、またはsha512をプレフィックスとして付ける必要があります。 ）例については、要素のハッシュの使用を参照してください。

ホワイトリストの詳細については この回答 を参照してください。

17
Xan

同様の質問への私の回答からコピー ここ 。 Chrome（46+）の最近のバージョンでは、現在の答えは真実ではありません。unsafe-inlineはまだ効果がありません（マニフェストとmetaヘッダータグの両方で） ）、ただし documentation に従って、説明されている手法 here を使用して制限を緩和できます。

<script>要素のハッシュの使用法

script-srcディレクティブを使用すると、開発者は、許可されたスクリプトのソースとしてハッシュを指定することにより、特定のインラインスクリプトをホワイトリストに登録できます。

使い方は簡単です。サーバーは特定のスクリプトブロックのコンテンツのハッシュを計算し、その値のbase64エンコーディングをContent-Security-Policyヘッダーに含めます。

Content-Security-Policy: default-src 'self';
                     script-src 'self' https://example.com 'sha256-base64 encoded hash'

例として、次のことを考慮してください。

manifest.json：

{
  "manifest_version": 2,
  "name": "csp test",
  "version": "1.0.0",
  "minimum_chrome_version": "46",
  "content_security_policy": "script-src 'self' 'sha256-WOdSzz11/3cpqOdrm89LBL2UPwEU9EhbDtMy2OciEhs='",
  "background": {
    "page": "background.html"
  }
}

background.html：

<!DOCTYPE html>
<html>
  <head></head>
  <body>
    <script>alert('foo');</script>
  </body>
</html>

結果：
alert dialog from inline script

また、該当するディレクティブをマニフェストではなくmetaタグに配置することもテストしました。コンソールメッセージに示されているCSPにはタグのコンテンツが含まれていましたが、インラインスクリプトは実行されませんでした（Chrome 53））。

新規background.html：

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Security-Policy" content="script-src 'self' 'sha256-WOdSzz11/3cpqOdrm89LBL2UPwEU9EhbDtMy2OciEhs='">
  </head>
  <body>
    <script>alert('foo');</script>
  </body>
</html>

結果：
console error messages about content security policy

11
Chris Hunt

ログインページに シンプルなチェックボックス を追加してパスワードの表示を切り替えた後、この問題が発生しました。これが問題を修正した方法です。

  • チェックボックスのonclickイベントの使用をやめたため、chrome）のシークレットモードでこの問題が発生し、代わりにチェックボックスにIDが付与されました。

前

<div class="form__row">
        <div class="form__controls">
            <label class="checkbox"><input type="checkbox" onclick="togglePasswordVisibility()"> Show password</label>
        </div>
    </div>

後

<div class="form__row">
        <div class="form__controls">
            <label class="checkbox"><input type="checkbox" id="checkboxTogglePasswordVisibility"> Show password</label>
        </div>
    </div>
  • Script.jsファイルを作成し、それにイベントリスナーメソッドを追加して、チェックボックスのonclickイベントを処理してジョブを実行しました。

まだ参照していない場合は、jsファイルを参照してください。このように単純に参照できます。

<script src="../Scripts/Script.js"></script>

そして、これがScript.jsに追加したイベントリスナーです。

$(document).ready(function () {
    addEventListenerForCheckboxTogglePasswordVisibility()
});

function addEventListenerForCheckboxTogglePasswordVisibility() {
    var checkbox = document.getElementById("checkboxTogglePasswordVisibility");
    if (checkbox !== null) {
        checkbox.addEventListener('click', togglePasswordVisibility);
    }
}

function togglePasswordVisibility() {
    var passwordElement = document.getElementById("password");
    if (passwordElement.type === "password") {
        passwordElement.type = "text";
    } else {
        passwordElement.type = "password";
    }
}

修正前のエラー。

enter image description here

1
Nurhak Kaya