一个iframe随机失败到XHR

One iframe randomly fails to XHR

本文关键字：XHR 失败 随机 iframe 一个      更新时间：2023-10-22

我在http://localhost:3000上有一个页面，其中包含一个其src为http://localhost:3010/login的iframe。iframe执行以下操作：

  • 请求src html
  • 在接收到302重定向之后，它跟随它到达http://localhost:3000/oauth/authorize?response_type=code&client_id=1&redirect_uri=http%3A%2F%2Flocalhost%3A3011%2Fauthorization_code&state={state}
  • 然后将iframe重定向回它自己的原点：http://localhost:3010/authorization_code?code={code}&state={state}
  • iframe嵌入式应用程序的服务器成功地交换了访问令牌的授权码，并使用设置为OAuth2 access_token的cookie重定向到http://localhost:3010
  • 一些JavaScript代码对http://localhost:3010/api/customerInfo进行XHR
  • 客户信息将返回并使用JavaScript在iframe中呈现

所以这一切都很好。

然而，当我添加第二个源代码为localhost:3020的iframe嵌入式应用程序时，它经过相同的流程，其中一个应用程序的第一个XHR将失败，并出现以下错误：

XMLHttpRequest无法加载http://localhost:3000/oauth/authorize?response_type=code&redirect_uri=http%3A%2F%2localhost%3A3011%2Authorization_code&state＝17nCw5o0Tr11Y6z8&client_id=1。请求的资源上不存在"Access Control Allow Origin"标头。原点'http://localhost:3010因此不允许访问。响应的HTTP状态代码为400。

这似乎有点奇怪，因为它说它无法通过XHR加载已经通过重定向加载的URL。

有时一个iframe失败，有时另一个ifame失败。每次，在每个浏览器中，一个iframe都可以执行XHR，另一个会导致此错误。我甚至将两个iframe的初始XHR延迟了不同的量，这样它们就不会重叠，但都无济于事。

iframe是动态生成的（通过React），具有以下属性：sandbox='allow-forms allow-scripts allow-same-origin'。

这是由于cookie不是特定于端口的，不同于将端口号视为源的一部分的同源策略。在这种情况下，两个iframe都共享cookie，并且都使用access_token作为包含OAuth访问令牌的cookie的名称。第二个完成授权过程的iframe将覆盖第一个iframe的access_token cookie，导致来自后一个ifame的后续iframe调用失败。我通过使用唯一的cookie名称解决了这个问题。另一种修复方法是使用不同的主机名并编辑计算机的主机文件。

相关文章：