Using easyxdm to read Cross-Domain Cookie data - javascript

I've got 2 domains - domain1.com and domain2.com - where domain1.com is my parent site and domain2.com is the child site. I'm setting cookies on domain1.com, but domain2.com needs access to those cookies.
I've researched a ton about this subject - JSONP, CORS, pick anything. EasyXDM seemed to offer a great solution. The messaging between domain2.com and domain1.com works as expected, but certain browsers, namely Chrome and IE, are not reading the cookie and therefore passing blank data.
Domain1.com has a page called status.php with the following data:
<?php
$guid = $_COOKIE['user_guid'];
?>
<!doctype html>
<html>
<head>
<title>easyXDM.Transport test</title>
<script type="text/javascript" src="/js/easyxdm/easyXDM.debug.js"></script>
</head>
<body>
<script>
var socket = new easyXDM.Socket({
onReady: function() {
socket.postMessage('<?php echo $guid; ?>');
}
});
</script>
</body>
</html>
Domain2.com has the following setup to receive the message from domain1.com:
var socket = new easyXDM.Socket({
remote: "http://domain1.com/status.php",
onMessage: function(message, origin)
{
alert("Received '" + message + "' from '" + origin + "'");
}
});
This works like a champ in FireFox, but Chrome and IE are returning an empty string, not getting the cookie data. Can anyone nudge me in the right direction with this? I can't set cookies on both domains, I just need to be able to grab the ID from the first one by any means necessary. Thanks!
As requested in the comments, here's the full code for Domain 2:
<!doctype html>
<html>
<head>
<title>Domain 2</title>
<script type="text/javascript" src="/js/easyxdm/easyXDM.debug.js"></script>
</head>
<body>
<script>
var socket = new easyXDM.Socket({
remote: "http://domain1.com/status.php",
onMessage: function(message, origin)
{
alert("Received '" + message + "' from '" + origin + "'");
}
});
</script>
<p>Hello World!</p>
</body>
</html>

Solved this with xdomain instead: https://github.com/jpillora/xdomain
Easy to implement and solved the problem of cross-domain data. Far from perfect, but until CORS is better supported and older browsers drop off, it worked.

Related

How to open url from script html file and run query in new tab

I am trying to open a url from script html file and run the query there. I am able to open the page but my query doesn work in there. Can someone have any idea ?
<html>
<head>
<title></title>
</head>
<body>
<script type="text/javascript">
window.location = "https://www.google.com/"
window.onload = function ()
{
alert("Hello World!");
}
</script>
</body>
</html>
Basicly you can't do this for security reasons. Here is some info about this. Tabs must have the same origin (port, protocol, host) to be able to interact with each other.
In your example problem is that u use onload in your CURRENT window, not in a new one. Here is correct code for https://www.google.com origin:
let windowProxy = window.open('https://www.google.com/');
windowProxy.addEventListener('load', () => {
windowProxy.alert('Hello');
});
But if you want to make interaction between two tabs with same origin there are better descisions: Broadcast API for example.

Force JavaScript to load additional resources over https

I am using the Virtual Keyboard (Deprecated) from Google in my current project. Unfortunately it loads some additionale js-resources from an insecure source. Is there a way to force the script to use https instead of http?
The problem is the language file which is used to display the correct letters. The stylesheet e.g. is loaded over https.
Here is my script:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Virtual Keyboard | Google APIs</title>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
</head>
<body>
<input id="language">
<script>
google.load("elements", "1", {
packages: "keyboard"
});
function onLoad() {
var kbd1 = new google.elements.keyboard.Keyboard(
[google.elements.keyboard.LayoutCode.SWEDISH],
['language']);
}
google.setOnLoadCallback(onLoad);
</script>
</body>
</html>
Update:
The only resource, which is loaded over normal http is the language-file, in this case the swedish version.
The language-file is loaded in the function onLoad during the var kb1 = new google.....
Based on the answer to another question
it seems possible to redefine the src property of a <script> element, which is used to load
the javascript code for the swedisch keyboard. If you make sure the following code is executed
before the new google.elements.keyboard.Keyboard call, the http will be replaced by https.
From the network info in the chrome debug console, this indeed seems to load the keyboard
settings over https.
Object.defineProperty(HTMLScriptElement.prototype, 'src', {
get: function() {
return this.getAttribute('src')
},
set: function(url) {
var prefix = "http://";
if (url.startsWith(prefix))
url = "https://" + url.substr(prefix.length);
console.log('being set: ' + url);
this.setAttribute('src', url);
}
});
Just setup your script url like this and it will work!
<script src="//www.google.com/jsapi"></script>
This is the url relative protocol
The type"javascript" part is not anymore necessary as it is taken as javascript if nothing is specified, so save space! MDN element script

Soundcloud API ReferenceError: $ is not defined (JavaScript)

I had posted a question yesterday and thought I had fixed it on my own, but I guess I didn't. I am trying to use the SoundCloud API and I am getting an error: ReferenceError: $ is not defined.
I thought it may be due to loading jquery.js but it doesn't seem to make any difference.
Heres my code(Javascript)
SC.initialize({
client_id: 'hidden for privacy',
});
$(document).ready(function() {
SC.get('/users/5577686/tracks', {limit:7}, function(tracks) {
$(tracks).each(function(index, track) {
$('#tracktitle').append($('<li></li>').html(track.title));
$('#trackimage').append("<img src='" + track.artwork_url + "' />");
$('#play').append("<a href='" + track.permalink_url + "' >" + "Play" + "</a>");
});
});
});
And the HTML:
<!DOCTYPE HTML>
<html>
<head>
<script src="//jquery/1.10.2/jquery.min.js"></script>
<script src="http://connect.soundcloud.com/sdk.js"></script>
<script src="soundcloud2.js"></script>
</head>
<body>
<div id="tracktitle"></div>
<div id="trackimage"></div>
<div id="play"></div>
</body>
</html>
Any help at all would be greatly appreciated. Thanks for reading
Are you using your local file system? If so, you won't be able to use a protocol relative URL.
You'll need to specify http. Try:
<script src="http://jquery/1.10.2/jquery.min.js"></script>
Your cdn URL is wrong
<script src="//code.jquery.com/jquery-1.10.2.min.js"></script>
Also if your pages is loaded from local file system(ie with protocol file:) this will not work, in that case you need to append the protocol to the resource url like http://code.jquery.com/jquery-1.10.2.min.js

Refreshing an iframe which are in different domains

I have a page called main.jsp which is in domain domain1 and it has a iframe which loads contents from domain2. Basically main.jsp is a common contents and in iframe we load contents from other web applications deployed on different servers.
My problem is I want to refresh the content inside iframe automatically (say 5 seconds). I tried this code first:
<meta http-equiv="refresh" content="5;url=<s:url includeParams="all" />" />
Err: Blocked a frame with origin "http://localhost:8080" from accessing a cross-origin frame
I tried this code:
<script type="text/javascript">
window.setTimeout(function(){ window.location.reload() }, 15000);
</script>
Which also gives me same error. Can anyone guide me how to achieve this?
Note:
I have added this code to get rid of cross-domain issue:
<script type="text/javascript">
document.domain = window.location.hostname.replace('www.', '');
</script>
Try adding it dynamicaly
function addRefresh(){
var meta = document.createElement('meta');
meta.setAttribute("http-equiv", "refresh");
meta.setAttribute("content", "5");
document.getElementsByTagName('head')[0].appendChild(meta);
}
if(location.origin === 'domain1.com'){
addRefresh();
}

how to check content of Iframe from external url

I wanna use Facebook's Like button on my web site.
It's so simple as everyone knows but I have a problem with the censorship in our country.
Facebook is censored in our country and if I use the simple iframe, the people who have no access to Facebook (can't pass the censorship) will see the block page which I don't want to.
So I wanna check if loaded address is Facebook show them the iframe else (they will be redirected to another web site) hide the iframe.
Is there any way for me to find this out? I mean anything like address or content or id etc.
Here is my code:
<html>
<head>
<title>facebook test</title>
<style>
.facebook{
display:none;
}
</style>
<script type="text/javascript" src="jquery.js"></script>
</head>
<script type="text/javascript">
$.ajax({
url: 'https://graph.facebook.com/btaylor?callback=?',
dataType: 'json',
success: function(data) {
$(".faceboock").show();
// alert('success - facebook works');
// alert('data = ' + JSON.stringify(data));
},
error: function() {
alert('error - facebook fails');
}
});
</script>
<div class="faceboock">
<iframe src="http://www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2Fpages%2Fmypage%2F152215541478267&width=292&colorscheme=light&show_faces=true&stream=true&header=true&height=427" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:292px; height:427px;" allowTransparency="true"></iframe>
</div>
It works when client has access to facebook, I mean the "success: function" works but error function doesn't.
The problem is when facebook is not accessible that json never responds.
Is there any way to set a timeout for response or anything else in order to handle the error?
You can't check the content of an iframe that is not on the same domain as your code.
See Same Origin Policy
iframe.src can be checked without restrictions, but does not change when the redirect happens
iframe.contentWindow.location.href does change when the redirect happens, but can't be accessed in your case due to the security restrictions mentioned above
The only way I can think of to test this is:
Do a JSONP call to one of the Facebook APIs (JSONP has no domain restrictions)
Check the response
If these JSONP calls get redirected as well than it will most likely throw an exception instead of returning the expected values (due to the fact that it will try to parse as javascript a response which is most likely a fullhtml page)
Here is a working example using jQuery to do the JSONP call.
It works from my location, could you test it and see if you get the error alert?
You can also go in your browser to the url in the example. If facebook.com gets redirected, but this one doesn't than you'll have to find some other way to check it...

Categories