More than 3 years have passed since last update.

Chrome拡張でFirebaseを利用する際にSecurity Policyのエラーが発生した場合の対処

Last updated at 2020-03-08Posted at 2020-03-08

【目的】Chrome拡張でFirebase機能を利用する
【問題】下記のようにFirebaseを読み込むとエラー
　"Refused to load the script '' because it violates the following Content Security Policy directive: "script-src 'self' blob: filesystem:". Note that 'script-src-elem' was not explicitly set, so 'script-src' is used as a fallback. "
　が発生する

Firebase機能の読み込み

    <script src="https://www.gstatic.com/firebasejs/7.8.2/firebase-app.js"></script>
    <script src="https://www.gstatic.com/firebasejs/7.8.0/firebase-auth.js"></script>  
    <script src="https://www.gstatic.com/firebasejs/7.8.0/firebase-database.js"></script>
    <script src="https://www.gstatic.com/firebasejs/7.8.0/firebase-firestore.js"></script>

【対処】manifest.json に"content_security_policy"を設定する

    "content_security_policy": "script-src 'self' https://www.gstatic.com/; object-src 'self'",

【参考にしたサイト】Chrome機能拡張のコンテンツセキュリティポリシー（CSP）について

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up