9

I am not able to load an iframe on the background page of a chrome extension.

I've tried loading iframe separately on html page and its working so, I think this issue has something to do with chrome extension or browser property

for example, if I add this in my chrome extension background page

<iframe id="stackoverflow" src="https://www.stackoverflow.com"></iframe>

I am always getting canceled status

screenshot

WebSocket connection to 'ws://localhost:35729/livereload' failed: Error in connection establishment: net::ERR_CONNECTION_REFUSED

manifest.json:

{
  "name": "__MSG_appName__",
  "short_name": "ixigo",
  "version": "3.1.24",
  "manifest_version": 2,
  "description": "__MSG_appDescription__",
  "icons": {
    "16": "images/16.png",
    "48": "images/48.png",
    "128": "images/128.png"
  },
  "default_locale": "en",
  "background": {
    "scripts": [
      "scripts/chromereload.js",
      "scripts/libs/jquery.min.js",
      "scripts/src/config.js",
      "scripts/src/track.js",
      "scripts/src/userIntentHandler.js",
      "scripts/src/background.js",
      "scripts/src/OneSignal.js",
      "scripts/src/notificationsHandler.js"
    ],
    "persistent": true
  },
  "content_scripts": [
    {
      "matches": [
        "http://*/*",
        "https://*/*"
      ],
      "js": [
        "scripts/contentscript.js"
      ],
      "all_frames": true
    },
    {
      "matches": [
        "*://www.irctc.co.in/*",
        "*://*.ixigo.com/*"
      ],
      "js": [
        "scripts/src/irctcAutofill.js",
        "scripts/src/irctcAutofillEventHandler.js"
      ],
      "all_frames": false
    },
    {
      "matches": [
        "*://*.indianrail.gov.in/*",
        "*://*.ixigo.com/*"
      ],
      "js": [
        "scripts/libs/jquery.min.js",
        "scripts/src/train.js",
        "scripts/src/trainAvailability.js",
        "scripts/src/runningStatus.js"
      ],
      "run_at": "document_end",
      "all_frames": true
    }
  ],
  "chrome_url_overrides": {
    "newtab": "ixitab.html"
  },
  "options_page": "options.html",
  "options_ui": {
    "chrome_style": true,
    "page": "options.html"
  },
  "permissions": [
    "tabs",
    "http://*.indianrail.gov.in/*",
    "*://*.ixigo.com/*",
    "cookies",
    "notifications",
    "gcm",
    "storage"
  ],
  "web_accessible_resources": [
    "images/*",
    "fonts/*",
    "styles/*"
  ],
  "update_url": "http://clients2.google.com/service/update2/crx",
  "content_security_policy": "script-src 'self' https://ssl.google-analytics.com https://api.bing.com/osjson.aspx object-src 'self'"
}
5
  • that was just an example. I am unable to load any iframe in background page put any src url it always get canceled as in the screenshot
    – Alok Singh
    Commented Mar 1, 2017 at 6:00
  • also this problem is occurring in some chrome browsers, some are working fine, please check screenshot
    – Alok Singh
    Commented Mar 1, 2017 at 7:25
  • Try capturing the network log on chrome://net-internals/ page.
    – woxxom
    Commented Mar 1, 2017 at 7:38
  • there is no difference in the logs between, when I add iframe to a HTML page (which is working) and when I add iframe to the background page. also iframe content is empty in the elements panel but requests are made for resources visible in logs chrome://net-internals/
    – Alok Singh
    Commented Mar 2, 2017 at 8:03
  • @wOxxOm, I've captured the requests and they appear to work correctly (response of 200 or 304 with a corresponding read from cache) Commented Mar 14, 2017 at 21:24

2 Answers 2

1

So it appears that Chrome "cancels" the loading of an iframe in a background page, presumably for security reasons. BUT it still processes correctly and can send and receive messages as you'd expect. I have a demo set up here that loads up an iframe in the background page, sends a message to it, and the iframe echos the message back.

Since the request is showing canceled, a third party library I'm using that happens to load up an iframe to try and get a new token, is failing and I'll need to reconfigure it to still hook in to the messaging even though it thinks that it didn't load properly.

You've never been able to access the DOM / window of an iframe directly through the background page, all events have to go through messages as a security precaution.

In addition, and perhaps more importantly to your actual issue, the error in connecting you are getting is to "localhost:35729/livereload", that address isn't defined in your manifest.json permission section and is likely being aborted by chrome due to that.

The code for posterity:

background.js

window.onload = function(){
    var frame = document.createElement('iframe');
    frame.src = 'https://crustyjew.github.io/ChromeExtensionBug/';
    document.body.appendChild(frame);

    window.addEventListener('message',function(e){
      console.log("message received: " + JSON.stringify(e.data));
    });
    console.log('posting message to iframe');
    
    frame.addEventListener('load',function(){
        frame.contentWindow.postMessage("TestMessage","*");
    });
};

manifest.json

{
    "name": "BackgroundIframeBug",
    "short_name": "BGIframeBug",
    "version": "1.0.0",
    "manifest_version": 2,
    "background":{
        "scripts":["background.js"]
    },
    "permissions":[
        "<all_urls>"
    ]
}

echo page to load in iframe

index.js =>

window.onload=function(){
  function receiveMessage(e){
    console.log('received message');
    var origin = event.origin || event.originalEvent.origin; 
    e.source.postMessage({'origin':origin,'message':e.data},"*");
  }
window.addEventListener('message',receiveMessage);}
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
</head>
<body>
  <script src="index.js"></script>
  </body>
</html>

2
  • 1
    Mind that iframe's script must be in a separate file (index.js), not inside <script>...</script>. I also had to add iframe.html into web_accessible_resources. Commented Jun 23, 2017 at 14:18
  • @ilyaigpetrov yes, good point. Scripts in side a <script> tag aren't considered safe to run by the security policy since they can be modified easily by other scripts and/or content on the page. Commented Jun 27, 2017 at 19:40
0

Looks like that server is down. I see the links you're referencing on NTES, but they don't actually go to a webpage right now. Try for yourself:

Additionally, if/when that portion of the site comes online, you would have clicked through a "disclosure page" that likely created a session state that follows you around while you're browsing. Attempting to iframe directly to the inside of such a walled garden would also create that ERR_CONNECTION_REFUSED warning. Which is what happened on this URL:

Its a common method meant to keep content from wandering. :)

1
  • The ERR_CONNECTION_REFUSED is a connection to a localhost socket, not that domain. Also all urls, even functional ones, get the "canceled" response when loaded in an iframe from a background page now. Commented Mar 22, 2017 at 15:40

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.