iframe in chrome extension background page is always getting cancelled - google-chrome

Question

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
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'"
}

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

Answer 2

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:
http://www.indianrail.gov.in/pnr_Enq.html
http://www.indianrail.gov.in/seat_Avail.html
http://www.indianrail.gov.in/
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:
http://enquiry.indianrail.gov.in/ntes/
Its a common method meant to keep content from wandering. :)