Question

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

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

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

当回调发生时，用户将在对话框窗口中重定向到我的站点上的“/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 Queued问题，我使用了一个计时器并轮询弹出窗口以查看其位置的更改（您可以继续访问）。如果它进入错误页面或成功页面，我知道并且可以关闭弹出窗口（您可以控制窗口，但不能控制DOM）并更改主页面中的内容以反映授权状态。

我们还检查了窗口关闭 - 如果用户没有授权并关闭弹出窗口。

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

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

1 个答案: