JavaScript - 跨站点脚本 - 权限被拒绝

Question

我有一个 Web 应用程序，我正尝试为其使用 Twitter 的 OAuth 功能。此应用程序有一个链接，提示用户输入他们的 Twitter 凭据。当用户单击此链接时，将通过 JavaScript 打开一个新窗口。此窗口用作对话框。这是这样完成的:

主页:

<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);
}

当用户单击该链接时，他们会从 prompt.aspx 页面重定向到 Twitter 的站点。在 Twitter 站点上，用户可以选择输入他们的 Twitter 凭据。当他们提供了凭据后，他们将被重定向回我的站点。这是通过可以在 Twitter 站点上为应用程序设置的回调 url 来实现的。

当回调发生时，用户被重定向到对话窗口中我网站上的“/twitter/confirm.aspx”。发生这种情况时，我想更新“promptDiv”的内容，说“您已成功连接到 Twitter”以替换链接并关闭对话框。这用于通知用户他们已成功完成此步骤的目的。我可以成功关闭对话窗口。但是，当我尝试更新 HTML DOM 时，我收到一条错误消息，内容为“错误:获取属性 Window.document 的权限被拒绝”。为了更新 HTML DOM，我尝试在“/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();

然后我尝试读取 HTML 以查看是否可以通过以下脚本访问 DOM:

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

当我尝试这样做时，我仍然收到“权限被拒绝”错误。我知道这与跨站点脚本有关。但是，我不知道如何解决它。我该如何解决这个问题？我是否错误地构建了我的应用程序？如何在用户被重定向回我的网站后更新 HTML DOM？

感谢您的帮助!

Answer 1

当弹出窗口打开 Twitter 授权页面时，您将失去与 winodw 通信的原始能力，因为它的文档域已更改并且 window.opener 已重置。

为了解决 SitePen 的 NetFlix 队列中的这个问题，我使用了一个计时器并轮询弹出窗口以了解其位置的更改(您可以继续访问)。如果它转到错误页面或成功页面，我知道并可以关闭弹出窗口(您可以控制窗口，但不能控制 DOM)并更改主页中的内容以反射(reflect)授权状态。

我们还检查了窗口是否关闭——如果用户未授权并关闭弹出窗口。

我们无法使用回调，因为这是在 Adob​​e AIR 中完成的，并且没有服务器可以“回调”，这造成了额外的障碍。