5

Here we go: I am new to google's chrome extension development, so please bear with me.

I have an extension which is giving me the following error:

Refused to frame 'https://api.xxx.jp/' because it violates the following Content Security Policy directive: "frame-src 'self' https://staticxx.facebook.com https://twitter.com https://*.twimg.com https://5415703.fls.doubleclick.net https://player.vimeo.com https://pay.twitter.com https://www.facebook.com https://ton.twitter.com https://syndication.twitter.com https://vine.co twitter: https://www.youtube.com https://platform.twitter.com https://upload.twitter.com https://s-static.ak.facebook.com https://4337974.fls.doubleclick.net https://8122179.fls.doubleclick.net https://donate.twitter.com".

My manifest.json file has the following settings regarding Content Security Policy:

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

In my content.js file, I'm calling an api through inside an iframe tag:

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

The api's url is always in https form.

  • This extension works for most websites but in some websites like https://twitter.com/?lang=en, it displays a gray pop up box with the error message described above.

Gray pop up box Please help me find the solution to this issue.

Here is an example of my extension at work:

<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>

Any help is welcome.

Josimar Lopes
  • 156
  • 1
  • 2
  • 9
  • possible duplicate of https://stackoverflow.com/questions/31211359/refused-to-load-the-script-because-it-violates-the-following-content-security-po – ReyAnthonyRenacia Jan 24 '18 at 08:43
  • @noogui Not a duplicate, I have checked all other solutions but none addresses the issue of frame/iframe. If you know how to solve it, please provide a specific answer. – Josimar Lopes Jan 25 '18 at 01:11

1 Answers1

5

Twitter uses Content-Security-Policy header. The only solution to your problem is to modify response headers using the chrome.webRequest API in your background script.

Here is an example:

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"]);

Example is extracted from my blog post here.

Usama Ejaz
  • 1,105
  • 10
  • 20
  • 1
    @Josimar Lopes can you please mark the answer as solution so the question doesn't show up in unanswered questions anymore? – Worp Dec 18 '18 at 14:10