ozinisle: Handling security errors due to Cross Domain Ajax (JSONP)

Some basic issues that I face while working with iframes include t not limited to the following,

1. Unable to access iframe – document object

2.t when I am unable to access iframe’s document object or vice versa, the issue could be due to browser settings or because the url in the child frame belongs to a differennts in ed from different servers whose urls were similar to the following

http://********.xtss.com:8080/JSONP_Consumer/ParentFrame.html and

http:// ********.xtss.com:8090/JSONP_Store/iframeContent.html

Observe closely. These two urls belong to two different servers. Running on different ports.

To ensure smooth communication between the two webpages, I had used the following trick

document.domain="xtss.com"; //should be subset of domain name in host name

Don’t worry about the dojo code that you will find on the page. Dojo has nothing to do with the trick. Its just that I had used it to write a logic to find and hide a button in the parent window. One can always use native javascript or other libraries like jquery to do that.

Now put the following in ParentFrame.html

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<title>Insert title here</title>

document.domain="xtss.com";

</script>

</head>

<body>

<button id='trg'> Hide target </button>

</body>

</html>

And put the following code in the iframeContent.html

<title>Insert title here</title>

data-dojo-config="async: true"></script>

document.domain="xtss.com";

/* function clickme() {

console.log('inside click')

window.parent.document.getElementById('trg').style.display='none';

} */

var changeStyles;

require(["dojo/on",

"dojo/dom",

"dojo/_base/window",

"dojo/query",

"dojo/dom-style",

'dojo/domReady!'],

function(on, dom, win, query, domStyle){

changeStyles = function(){

var targetIDinParentScreen='trg';

var pageToRedirectTo='/JSONP_Store/dummyPage.html';

var parentDoc = window.parent.document;

win.withDoc(parentDoc, function(){

var hideTarget = query("#"+targetIdInParentScreen)

domStyle.set(hideTarget[0], "display", "none");

});

window.location.href=pageToRedirectTo;

};

});

</script>

</head>

<body>

<a id="eventSource" href='javascript:changeStyles()'> click me</a>

</body></html>

Now when you try to reload a frame with a different url, make sure you donot use sites like “Google.com” as they won’t open inside an iframe. They always check that they are on top and don’t let iframes use them. So for that sake I am creating my own page – a dummyHTML file

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<title>Insert title here</title>

</head>

<body>

Dummy Page

</body>

</html>

ozinisle

Pages

Tuesday, May 12, 2015

Handling security errors due to Cross Domain Ajax (JSONP)

No comments:

Post a Comment