About configuring content_security_policy for Chrome extensions

I am developing a Chrome extension that displays iframe within the website.
I am having trouble displaying iframe due to an error related to content_security_policy on the Twitter page.
(Iframe can be displayed on non-Twitter pages.)

I think it would be better to set the content_security_policy of manufest.json accordingly.
I tried many things after looking at the reference, but it didn't work at all.
Even if someone doesn't solve the problem, could you give me instructions and advice?
Thank you in advance.

● Error contents output to Chrome console

Refused to frame'https://domain.com/' because it violates the following Content Security Policy directive: "frame-src 'self' https://twitter.com https://*.twimg.com https://player.vimeo.com https://pay.twitter.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".

Failed to execute 'postMessage' on 'DOMWindow': The target origin provided('https://localhost:8080') does not match the recipient window's origin('null').

●manufest.json

{
    "manifest_version"—2,
    "content_security_policy": "default-src 'self' https://sample.com/; child-src 'self' https://sample.com/; object-src 'self' https://sample.com/; frame-src 'self' https://sample.com/ https://twitter.com https://*.twimg.com https://player.vimeo.com https://pay.twitter.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;";",
    "name": "sample",
    "description": "sample",
    "content_scripts":[
      {
        "matches": [***],
        "js": ["contentScript.js",
        "run_at": " document_end"
      }
    ],
    "permissions": [
      "storage"
    ],
    "version": "0.672"
}

chrome-extension

2022-09-29 21:38

1 Answers

The error has little to do with content_security_policy in manifest.json.It specifies the security of the script that runs in the context of the extension.
On the other hand, this error is caused by the CSP that Twitter is configuring.
ContentScript runs on each website (or on the Twitter website if you are viewing Twitter), so it is affected by the CSP that you configure.

This section describes how to bypass the CSP using web_accessible_resources as answered with a similar question in

web_accessible_resources is, as the name implies, the extension declares the resources provided within the web page.The resources declared here are available from contentScript (not limited to the CSPs configured on the web page).
Therefore, prepare a page called frame.html within the extension and read it from the contentScript.This contentScript is not on Twitter's web page, but on an extension, so you can embed more pages without being affected by the CSP that Twitter has set up.

To do this, first declare web_accessible_resources in manifest.json and add frame.html.

{
    "manifest_version"—2,
    "name": "sample",
    "description": "sample",
    "content_scripts":[
      { 
        "matches": ["*://*/*"],
        "js": ["contentScript.js",
        "run_at": " document_end"
      }
    ],
    "permissions": [
      "storage"
    ],
    "web_accessible_resources":[
      "frame.html"
    ],
    "version": "0.672"
}

From contentScript.js, you can obtain the URL of frame.html using chrome.runtime.getURL.

//Generate iframe in the appropriate location
const iframe= document.createElement('iframe');
// Embed frame.html with extensions instead of embedding external sites directly
const frameURL = chrome.runtime.getURL('frame.html');
iframe.src=frameURL;

// make appropriate prominence
Object.assign(iframe.style, {
    position: 'absolute',
    left: '100px',
    top: '100px',
    width: '500px',
    height: '500px',
    border: '5px solid black',
});

document.body.appendChild(iframe);

Then embed the desired site using iframe in frame.html.

<!doctype html>
<html>
  <head>
    <title> </title>
    <style>
      US>html,body{
        margin:0;
        width: 100%;
        height —100%;
        font-size:0;
      }
      iframe{
        width: 100%;
        height —100%;
        border: none;
      }
    </style>
  </head>
  <body>
    <!-- Embed the desired site on full screen-->
    <iframe src="https://example.com/"></iframe>
  </body>
</html>

In the above way, we were able to embed external sites even on sites with CSP like Twitter.
The external site to be embedded this time is solidly written in frame.html, but if you need to specify it dynamically, you can communicate with postMessage.

2022-09-29 21:38

If you have any answers or tips

Popular Tags

python x 4647

android x 1593

java x 1494

javascript x 1427

c x 927

c++ x 878

ruby-on-rails x 696

php x 692

python3 x 685

html x 656