Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Refused to frame 'https://api.xxx.jp/' because it violates the following Content Security Policy directive: "frame-src 'self'

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.

like image 645
Josimar Lopes Avatar asked Jan 23 '18 23:01

Josimar Lopes


1 Answers

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.

like image 156
Usama Ejaz Avatar answered Sep 16 '22 13:09

Usama Ejaz