logo标签列表

IOS 10.3.1 Chrome浏览器CORS失败

javascriptiosgoogle-chromeios10.3
24
我在进行CORS请求时遇到了奇怪的错误（React应用程序通过https与API通信）。这些错误仅出现在IOS 10.3.1和Chrome浏览器（57）上（Safari和WebViews没有问题）。由于缺乏调试IOS Chrome的工具，我唯一记录到的是Sentry日志（第三方服务）。这些错误的变体如下：
SecurityError Blocked a frame with origin "https://xxxxxreactapp.com" from accessing a frame with origin "https://xxxxx.fls.doubleclick.net". Protocols, domains, and ports must match.
特定请求是从Google Tag Manager发出的，但对我的API的请求也以类似方式失败（尽管显然没有提到frames，但仍然与跨源相关）。
向我的API发起典型的请求握手如下：
OPTIONS /jp/plusbus HTTP/1.1
Host: api-xxxxxx.xxx.com
Connection: keep-alive
Pragma: no-cache
Cache-Control: no-cache
Access-Control-Request-Method: POST
Origin: https://xxxxxreactapp.com
User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_12_0) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/57.0.2987.133 Safari/537.36
Access-Control-Request-Headers: content-type,x-access-token,x-trace-token
Accept: */*
Referer: https://xxxxxreactapp.com/xxxx/xxx
Accept-Encoding: gzip, deflate, sdch, br
Accept-Language: en-US,en;q=0.8,el;q=0.6

以及服务器对此的响应：

HTTP/1.0 204 No Content
Connection: close
Content-Type: text/html
Access-Control-Max-Age: 1728000
Access-Control-Allow-Origin: *
Access-Control-Allow-Credentials: true
Access-Control-Allow-Methods: GET,POST,PUT,DELETE,PATCH
Access-Control-Allow-Headers: DNT,X-Mx-ReqToken,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,X-Access-Token,X-Customer-Token,X-Customer-Device,X-Brand-Id,X-User-Token,X-User-Grant-Token,X-Trace-Token,X-Smartcard-Version,Authorization
Content-Length: 0

这段描述了我控制的 App 和 API 之间的交互，我倾向于认为我的设置有问题，但两件事情导致不同的结论：
  • 我在同一网站上也使用 Google Tag 管理器，其请求也以同样的方式失败（GTM 使用标准 iframe 设置，也尝试跨域通信）。
  • 这个设置一直很稳定，直到最后一个 IOS 更新，它在 IOS 10.2 中正常工作。
更新

设法解决了 api 调用的问题，与我的代理中间件堆栈有关。 但是第三方问题仍未解决。

所有依赖 iframe 向外部源通信数据的工具都会因为上述 SecurityError Blocked a frame .... 而失败，包括 GoogleTagManager 和 Paypal 支付。

我遇到了完全相同的问题，而且我也通过 Sentry 记录了错误。 - David Gomes
不，这是另一个服务，也使用iframe进行跨域通信（Keycloak）。我们只能在iOS 10.3上复制。因此，我查看了此操作系统更新的安全发布说明，并更改了许多与CORS相关的内容。然而，乍一看，似乎没有任何一个应该破坏此功能，特别是因为它在其他地方可以正常工作。 - David Gomes
2
Chromium问题：https://bugs.chromium.org/p/chromium/issues/detail?id=709132 - wmute
不是一个选项，因为它是公共API，旨在被访问超过我的应用程序。 - Lefterisk
@Lefterisk，下面的回答是否回答了您的问题？看起来“Blocked a frame”错误在iOS Chrome中仍然是一个未解决的问题。 - wmute
显示剩余8条评论
1个回答
11

关于 iframe 问题，看起来这个错误与 Chrome 自动填充有关。您可以使用相关 Chromium 问题的评论 6中提供的示例代码复现此错误（值得完整阅读）：

<body>

  <iframe src="http://example.com">
  </iframe>

  <script>

    window.addEventListener("error", function (e) {
       alert("Error occured: " + e.error.message);
       return false;
    });

  </script>
</body>

如果您在iOS Chrome中打开此页面，它将弹出上述错误的警报。如果您前往Chrome设置，关闭自动填充，然后重新加载页面，错误将消失。这是使用iOS 10.3.1和Chrome版本58.0.3029.113进行测试的。

目前似乎没有解决方案，但似乎即使出现错误，iframe中的内容仍然可以成功加载。因此，最终用户应该不会受到任何可察觉的影响。

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接