web-dev-qa-db-ja.com

次のコンテンツセキュリティポリシーディレクティブに違反しているため、フレーム 'https://api.xxx.jp/'を拒否しました： "frame-src'self '

ここに行きます：私はグーグルのchrome拡張機能開発に不慣れなので、我慢してください。

次のエラーが発生する拡張機能があります。

次のコンテンツセキュリティポリシーディレクティブに違反しているため、フレーム ' https://api.xxx.jp/ 'を拒否しました： "frame-src'self ' https：//staticxx.facebook .comhttps://Twitter.com https：//*.twimg.com https://5415703.fls.doubleclick.nethttps://player.vimeo.comhttps://pay.Twitter.comhttps://www.facebook.comhttps： //ton.Twitter.comhttps://syndication.Twitter.comhttps://Vine.co Twitter： https：// www.youtube.comhttps://platform.Twitter.comhttps://upload.Twitter.comhttps：// s- static.ak.facebook.comhttps://4337974.fls.doubleclick.nethttps://8122179.fls.doubleclick.nethttps://donate.Twitter.com "。

私のmanifest.jsonファイルには、コンテンツセキュリティポリシーに関して次の設定があります。

{
   "content_security_policy": "script-src 'self' https://ssl.google-analytics.com; object-src 'self'",
   "manifest_version": 2,
}

私のcontent.jsファイルでは、iframeタグ内からAPIを呼び出しています。

<iframe src="'+url+'" name="xxxExtensionsFrame" width="380" height="' + (heightBase - 5) + '" border="0" frameborder="0" scrolling="no"></iframe>

APIのurlは常にhttps形式です。

  • この拡張機能はほとんどのWebサイトで機能しますが、 https://Twitter.com/?lang=en などの一部のWebサイトでは、上記のエラーメッセージを含む灰色のポップアップボックスが表示されます。

Gray pop up box この問題の解決策を見つけるのを手伝ってください。

これが私の拡張機能の例です。

<video class="image-viewer horizontal" poster="https://thumb.gyazo.com/thumb/642_w/_262d5667a035ff8505079ce6994d3c3f-gif.jpg" autoplay="" playsinline="" loop="" style="max-width: 642px; max-height: 100%;"><source src="https://i.gyazo.com/90701bdda37df8282699208efaa215a5.mp4" type="video/mp4"></video>

どんな助けでも大歓迎です。

google-chromegoogle-chrome-extensioncontent-security-policymanifest.json
5
Josimar Lopes

TwitterはContent-Security-Policyヘッダーを使用します。この問題の唯一の解決策は、バックグラウンドスクリプトでchrome.webRequestAPIを使用して応答ヘッダーを変更することです。

次に例を示します。

chrome.webRequest.onHeadersReceived.addListener(info => {
    const headers = info.responseHeaders; // original headers
    for (let i=headers.length-1; i>=0; --i) {
        let header = headers[i].name.toLowerCase();
        if (header === "content-security-policy") { // csp header is found
            // modify frame-src here
            headers[i].value = headers[i].value.replace("frame-src", "frame-src https://domain-you-want-to-iframe.com/");
        }
    }
    // return modified headers
    return {responseHeaders: headers};
}, {
    urls: [ "<all_urls>" ], // match all pages
    types: [ "sub_frame" ] // for framing only
}, ["blocking", "responseHeaders"]);

例は私のブログ投稿から抽出されています ここ 。

3
Usama Ejaz