JavaScript - Cross Site Scripting - Permission Denied

Question

Hello,

I have a web application for which I am trying to use Twitter's OAuth functionality. This application has a link that prompts a user for their Twitter credentials. When a user clicks this link, a new window is opened via JavaScript. This window serves as a dialog. This is accomplished like such:

MainPage:

<div id="promptDiv"><a href="#" onclick="launchDialog('twitter/prompt.aspx');">Provide Credentials</a></div>

...

function launchDialog(url) {
  var specs = "location=0,menubar=0,status=0,titlebar=0,toolbar=0";
  var dialogWindow = window.open(url, "dialog", specs, true);
}

When a user clicks the link, they are redirected to Twitter's site from the prompt.aspx page. On the Twitter site, the user has the option to enter their Twitter credentials. When they have provided their credentials, they are redirected back to my site. This is accomplished through a callback url which can be set for applications on Twitter's site.

When the callback happens, the user is redirected to "/twitter/confirm.aspx" on my site in the dialog window. When this happens I want to update the contents of "promptDiv" to say "You have successfully connected with Twitter" to replace the link and close the dialog. This serves the purpose of notifying the user they have successfully completed this step. I can successfully close the dialog window. However, when I am try to update the HTML DOM, I receive an error that says "Error: Permission denied to get property Window.document". In an attempt to update the HTML DOM, I tried using the following script in "/twitter/confirm.aspx":

// Error is thrown on the first line.
var confirmDiv = window.opener.document.getElementById("confirmDiv");
if (confirmDiv != null)
{
  // Update the contents
}                
window.close();

I then just tried to read the HTML to see if I could even access the DOM via the following script:

alert(window.opener.document.body.innerHTML);

When I attempted this, I still got a "Permission denied" error. I know this has something to do with cross-site scripting. However, I do not know how to resolve it. How do I fix this problem? Am I structuring my application incorrectly? How do I update the HTML DOM after a user has been redirected back to my site?

Thank you for your help!

Answer 1

When the popup opens the Twitter auth page, you are losing your original ability to communicate with the winodw because its document domain has changed and the window.opener has been reset.

To get around this for SitePen's NetFlix Queued, I used a timer and polled the popup window for changes to its location (which you can continue to access). If it went to an error page or a success page, I knew that and could close the popup (you have control of the window, but not the DOM) and change the content in the main page to reflect the status of authorization.

We also checked for the window closing – in the case of the user not authorizing and closing the popup.

We couldn't make use of the callback because this was done in Adobe AIR, and there was no server to "call back to", which created an extra hurdle.