javascript - 使用 CORS 处理另一个站点上的重新身份验证

Question

我正在尝试使用不同的授权网站处理重新身份验证，同时在我的主网站的单页应用程序 (SPA) 中。这两个网站都是客户网站的内部网站。

我不能使用标准的“重定向”方法，因为我会丢失我的 SPA JavaScript 上下文。

我已经调查并在 Auth 网站上设置了 CORS，因此它现在返回 Access-Control-Allow-Origin: https://www.mywebsite.com。当我尝试将 Auth 页面加载到 JQuery UI 对话框中时，它失败了，因为脚本都尝试在主页网站的上下文中加载。

即
来 self 的网站 https://www.mywebsite.com/static/
我正在加载 https://www.auth.com/login.html。

当加载到 JQuery UI 对话框时，它会尝试将其脚本加载为 https://www.mywebsite.com/static/scripts/authscript.js
而不是
https://www.auth.com/scripts/authscript.js

我还尝试通过更改 src 标记将 Auth 页面加载到 iframe 中，但它只是重新加载了页面。

有没有办法在我试图显示的 CORS 网页的上下文中更改源目录？

Answer 1

所以我无法将页面正确加载到标准的 jQuery 模态对话框中，而且我无法控制我正在连接的 Auth 页面。为了解决这个问题，我调查了我在使用 iframe 时遇到的问题。并使用了 HTML5 功能 sandbox修复它。

如果 Auth 页面被加载到 iframe 中，则它使用“中断”脚本重新加载页面。显然这破坏了我的 SPA 上下文。 HTML5 允许您限制 iframe 的内容。

<iframe src="" id="my_auth" sandbox="allow-forms allow-scripts allow-same-origin"></iframe>

• allow-forms允许 form和 submit
• allow-scripts让它运行 JavaScript
• allow-same-origin让它认为 Origin 与脚本(即 Auth 网站)相同，这是启用 cookie 所必需的
• 请注意，我不包括 allow-top-navigation这就是允许重新加载页面和丢失我的 JavaScript 上下文的原因

瞧，在 jQuery 模态对话框(包含 iframe)中显示的授权页面无需弹出另一个窗口。

CORS 是允许重定向到 Auth 网站所必需的(在 JavaScript 参与之前发生在浏览器中)。您也可以捕获“Access-control-allow-origin”异常。

具有 Siteminder 登录名的 iframe 正在访问我网站的一个页面，该页面在用户登录后在 localStorage 中设置一个值。该应用程序只是在后台轮询 localStorage 以查看用户是否已成功登录。

希望这对某人有用。