Disable cross-origin frame in Chrome or Firefox - google-chrome

I want to have a webextension with an iframe http://localhost:8080. So I can test my option page. I want to get access to extension API. So I don't care about security for developing.
So made a page
chrome-extension://abcdefghijklmnopqrstuvw/page/index.html
<html>
<body>
<iframe id="myFrame" src="http://localhost:8080" crossorigin="anonymous">
</iframe>
<script src="script.js"></script>
</body>
</html>
localhost:8080
<html>
<head>
</head>
<body>
<h1>I can't get this working :{</h1>
<script>
console.log(parent);
</script>
</body>
</html>
I also send a header: "Access-Control-Allow-Origin": "*"
Of course I got this error:
DOMException: Blocked a frame with origin "http://localhost:8080" from accessing a cross-origin frame.
I tried to disable web security
google-chrome-stable --disable-site-isolation-trials --disable-web-security --user-data-dir="~/tmp"
But the error is still there. I also tried web-ext to disable web security.

I made a simple setup to test if I could access the parent object from another origin. So I have http://localhost:1111 with an iframe http://localhost:2222. Now :2222 is calling parent.testAlert(), in a normal browser this will be blocked because of security enabled. But I am able to access parent.testAlert() when I have disabled the security.
<html>
<body>
One <br>
<script>
function testAlert() {
alert("Yes");
}
setTimeout(() => {
console.log("window ", window.name);
}, 1000)
</script>
<iframe src="http://localhost:2222"></iframe>
</body>
</html>
<html>
<body>
Two
<script>
console.log("two: ");
console.log("parent ", parent);
parent.testAlert()
</script>
</body>
</html>
This only works when I disable the security, like:
google-chrome-stable --disable-web-security --user-data-dir=~/tmp --disable-site-isolation-trails
Nice.
Now lets try it with the chrome-extension:// url...
<html>
<body>
page.html
<iframe src="http://localhost:2222"></iframe>
</body>
</html>
I still get the same Error:
(index):7 Uncaught DOMException: Blocked a frame with origin "http://localhost:2222" from accessing a cross-origin frame.
at console.log (<anonymous>)
at http://localhost:2222/:7:13
It seems that a chrome-extension CORS / SOP is not disabled.
I made a simple example https://github.com/zoutepopcorn/iframe-blocked

Related

Embedding an HTML page keeps redirecting me?

I'm attempting to write a simple html doc to automatically refresh every 5 seconds. However, I want to embed a web page into this. I've tried embed tags, object tags, and iframe tags. However, each time the page refreshes I am automatically redirected to the page that I am trying to embed. My current code version is here:
<html>
<head>
<title>MEETME REFRESHER</title>
<script>
window.setInterval("reloadIFrame();", 30000);
function reloadIFrame()
{
document.frames["meetframe"].location.reload();
}
</script>
</head>
<body>
<iframe src="http://www.meetme.com/apps/home" name="meetframe"></iframe>
</body>
</html>
Am I using incorrect tags or is there something obvious that I'm missing here?
I have been on about 10 sites similar to W3Schools, however to no avail. Could it be an issue localized to Chrome? I remember doing something similar to this back in school, though using Internet Explorer. Any help or input is much appreciated!
Try this. Using sandbox attribute of an iframe. Source and more information here.
<html>
<head>
<title>MEETME REFRESHER</title>
<script>
window.setInterval("reloadIFrame();", 3000);
function reloadIFrame()
{
var fr=document.getElementById('meetframe');
if(fr!=null) document.getElementById("container").removeChild(fr);
var iframehtml="<iframe sandbox='allow-same-origin allow-scripts allow-popups allow-forms' src='http://www.meetme.com/apps/home' id='meetframe'></iframe>";
document.getElementById("container").innerHTML=iframehtml;
}
</script>
</head>
<body>
<div id = "container">
<iframe sandbox="allow-same-origin allow-scripts allow-popups allow-forms" src="http://www.meetme.com/apps/home" name = "meetframe" id="meetframe"></iframe>
</div>
</body>
</html>

dojo mobile with phonegap doesn't work properly

I start write application using phonegap and dojo in Eclipse. Phonegap, without dojo work properly on android emulator and in chrome with ripple addon. Problem is when I added dojo to project. I use phonegap 2.7.0 and dojo 1.9.0.
I was using: http://www.ibm.com/developerworks/web/library/wa-mobappdev1/ tutorial to setup this.
How I setup dojo:
index.html file:
<!DOCTYPE HTML>
<html>
<head>
<title>PhoneGap</title>
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no"/>
<meta name="apple-mobile-web-app-capable" content="yes" />
<link rel="stylesheet" href="libs/dojo/dojox/mobile/themes/android/android.css" type="text/css" media="screen" title="no title" charset="utf-8"/>
<script type="text/javascript" src="libs/dojo/dojo/dojo.js" djConfig="parseOnLoad:true"></script>
<script type="text/javascript" charset="utf-8" src="cordova-2.7.0.js"></script>
<script type="text/javascript" charset="UTF-8" src="funkcja.js"></script>
<script type="text/javascript">
dojo.require("dojox.mobile.parser");
dojo.require("dojox.mobile");
dojo.require("dojox.mobile.app");
dojo.require("dojox.mobile.Button");
</script>
</head>
<body>
<div dojoType="dojox.mobile.View" id="site" selected="true">
<h1 dojoType="dojox.mobile.Heading">Index</h1>
<div>
<input dojoType="dojox.mobile.Button" type="button" id="submit" name="submit" value="Button" onclick="loguj()"/>
</div>
</div>
</body>
</html>
In emulator I get a blank screen.
In chrome using ripple I get just html without dojo scripts. Scripts are include. In console I get an errors:
Console was cleared ripple.js:37
Ripple :: Environment Warming Up (Tea. Earl Gray. Hot.) ripple.js:37
Uncaught SyntaxError: Unexpected token u Insertion.js:1
GET http://localhost/config.xml 404 (Not Found) ripple.js:50
cordova :: Initialization Finished (Make it so.) ripple.js:37
GET http://localhost/libs/dojo/dojo/fx/Toggler.js 404 (Not Found) ripple.js:50
Error {src: "dojoLoader", info: "xhrFailed"} dojo.js:15
GET http://localhost/cordova_plugins.json 404 (Not Found) ripple.js:50
Uncaught SyntaxError: Unexpected token < cordova-2.7.0.js:6816
GET http://localhost/libs/dojo/dojo/resources/blank.gif 404 (Not Found) app.js:15
deviceready has not fired after 5 seconds. cordova-2.7.0.js:6672
Channel not fired: onPluginsReady cordova-2.7.0.js:6665
Channel not fired: onCordovaReady cordova-2.7.0.js:6665
Channel not fired: onCordovaConnectionReady cordova-2.7.0.js:6665
deviceready has not fired after 5 seconds. cordova-2.7.0.js:6672
Channel not fired: onPluginsReady cordova-2.7.0.js:6665
Channel not fired: onCordovaReady cordova-2.7.0.js:6665
Channel not fired: onCordovaConnectionReady cordova-2.7.0.js:6665
Dojo tries to load his js files, but can't. I think this answer may work for you too:
PhoneGap / Cordova 1.6 and dojo 1.7.2 AMD works from web, not from local?
Set the djConfig of dojo.js to djConfig="async:false,parseOnLoad:true"
AND load cordova.js before dojo.js !
If it doesnt work & you want to start developing, try to use dojo.js from the web.
Just create a cordova_plugins.json file into www with {} inside.
Alternatively, you can comment out lines 6395->6415 from cordova-2.7.0.js.
I followed the same tutorial on IBM Website and it also did not work.
To make it work I had to do the following:
Remove djConfig="parseOnLoad:true"
Replace
dojo.require("dojox.mobile.parser");
dojo.require("dojox.mobile");
dojo.require("dojox.mobile.app");
dojo.require("dojox.mobile.Button");
with:
require(["dojox/mobile/parser", "dojox/mobile", "dojox/mobile/app", "dojox/mobile/Button", "dojo/domReady!"],
function(parser) {
parser.parse();
}
);

Can't get Getters from SoundCloud HTML5 Widget API

I'm struggeling with the Soundcloud HTML5 Widget API. The Methods and Events are working fine, but i can't log the getters. I've been looking around in the Soundcloud API documentation but i can't find the problem. The Soundcloud Playground is working fine, but the examples they give in their blog http://developers.soundcloud.com/blog/html5-widget-api, arent. So i'm wondering, am i missing something here, or is there something wrong with the API? This is my stripped HTML, wich is not working:
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="http://w.soundcloud.com/player/api.js" type="text/javascript"></script>
<script>
$(document).ready(function() {
var widget = SC.Widget(document.getElementById('sc-widget'));
widget.bind(SC.Widget.Events.READY, ready());
function ready() {
widget.getDuration(function(durationSC) {
console.log('Duration: ' + durationSC);
});
}
$('button').click(function() {
widget.toggle();
});
});
</script>
</head>
<body>
<iframe id="sc-widget" src="http://w.soundcloud.com/player/?url=https://api.soundcloud.com/tracks/39804767&show_artwork=false&liking=false&sharing=false&auto_play=false" height="195" scrolling="no" width="480" frameborder="no"></iframe>
<button>Play / Pause</button>
</body>
</html>
Thanks for reporting this. There is indeed a problem with the API right now – a quick fix will be to use https in the widget's iframe src.
We'll try to deploy the fix as soon as possible and fix the documentation to point at https which should be used.

Loading content using AJAX and jQuery

I am a newbie to jQuery and was trying to load content dynamically using AJAX and jQuery using the following code but its not working.
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function()
{
$("button").click(function()
{
$(".text").load("http://api.jquery.com/get/");
});
});
</script>
<title>AJAX with jQuery</title>
</head>
<body>
<div class="text">Sushil</div>
<button>Load Text</button>
</body>
</html>
You are violating the same origin policy. Just open your console and see the error message when you click the button. Things will become clearer to you. If not please get back
I ran your code and I got this error:
XMLHttpRequest cannot load http://api.jquery.com/get/. Origin null is not allowed by Access-Control-Allow-Origin.
I googled it and I got this: Origin null is not allowed by Access-Control-Allow-Origin

How to preload JavaScript and CSS files in the background, to have them ready in the browser cache when the user goes to the main page?

I want to preload a JS file and a CSS file from the landing page to optimize the main site load, after the conversion in the landing. I was looking for information about this and finally tried to get this done using:
var xhr = new XMLHttpRequest();
xhr.open('GET', 'jsUrl');
xhr.send('');
xhr = new XMLHttpRequest();
xhr.open('GET', 'cssUrl');
xhr.send('');
With Firefox this great, but with Chrome it seems that the XHR calls are cached in a different cache than the css and js files.
We don´t use JQuery, the landing page must be lightweight (less load, more conversion rate).
Do you have any recommendation of another way to solve the original problem? (preload components)
Do you know how to make Chrome cache these requests?
This is a tested solution in a high volume site that works.
First, to avoid a competition between the landing page resources and the preloaded resources for the bandwith you could delay the load with javascript:
var prevOnLoad=window.onload;
function onLoadPreloadComponents() {
if(prevOnLoad) {
try{
prevOnLoad();
}catch(err){
}
}
preloadSiteComponents();
}
window.onload=onLoadPreloadComponents;
This is not the way I solved this because in my use case a flash event (using the Flash to JS brigde) signals when the landing was finally loaded. But the previous code must works as well. When the load page event is fired by the browser this function will execute previous onLoad code and the preloading.
I put an empty div cointainer where the iframe will be loaded.
<div id="mainSiteComponentsContainer" style="display: none;">
</div>
And the function code is:
function preloadSiteComponents() {
try{
document.getElementById('mainSiteComponentsContainer')
.innerHTML=
"<iframe src=\"http://www-components.renxo-cdn.net/preload-site-components-data-url-scheme-version-1.2.84-css-1.0.53.html\" frameborder=\"no\" height=\"0px\" width=\"0px\"></iframe>";
}catch(err) {
}
}
As you could see, the link url to iframe is dynamic, it changes between differents plataform versions (different deployments) to avoid unwanted browser cache with a new deployments.
The HTML that will be in the iframe could be something like this (for example):
<html class=" gecko win js" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta content="noindex,nofollow" name="robots">
<script src="http://www-components.renxo-cdn.net/scripts/lib-1.2.84.js" type="text/javascript">
<link href="http://www-components.renxo-cdn.net/styles/skin-data-url-scheme-1.0.53.css" media="all" type="text/css" rel="stylesheet">
</head>
<body> </body>
</html>
Here you could see the links to the components that I want to preload.
Finally, the div cointainer will have the iframe. After the onLoad event:
<div id="mainSiteComponentsContainer" style="display: none;">
<iframe width="0px" height="0px" frameborder="no" src="http://www-components.renxo-cdn.net/preload-site-components-data-url-scheme-version-1.2.84-css-1.0.53.html">
<html class=" gecko win js" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta content="noindex,nofollow" name="robots">
<script src="http://www-components.renxo-cdn.net/scripts/lib-1.2.84.js" type="text/javascript">
<link href="http://www-components.renxo-cdn.net/styles/skin-data-url-scheme-1.0.53.css" media="all" type="text/css" rel="stylesheet">
</head>
<body> </body>
</html>
</iframe>
</div>
You could see the working solution here.
Use Firebug to see the delayed load of this components.
Random thought:
Maybe you could include a hidden IFrame in your landing page which loads a page that does nothing but include your javascript and CSS files. If you trigger the loading of that IFrame in your javascript then it shouldn't block the landing page's loading or rendering, yet the script and css files would be loaded by the browser in the same way that it would for any other page.
Haven't tried this but adding this to the BOTTOM of your landing HTML should work:
<!-- Preload -->
<img src="/path/to/preload.js" style="display:none">
<img src="/path/to/preload.css" style="display:none">
The browser doesn't actually care that the resources aren't images it should fetch and cache them anyway. Browser typically load resources in page order so you wont delay other elements and with display:none you probably won't block rendering either.
Downside is you won't preload images defined in the CSS or #imports unless you preload them manually.