IOS 10.3.1 Chrome 浏览器 CORS 失败答案

【问题标题】：IOS 10.3.1 Chrome browser CORS failIOS 10.3.1 Chrome 浏览器 CORS 失败
【发布时间】：2017-09-18 13:20:17
【问题描述】：

我在从我的网站执行 CORS 请求时遇到了一个奇怪的错误（React 应用程序通过 https 与 API 对话）。这些错误仅出现在 IOS 10.3.1 和 Chrome 浏览器 (57) 上（safari 和 webViews 都可以）。由于缺乏调试 IOS Chrome 的工具，我唯一的记录是 Sentry 日志（第 3 方服务）。这些错误是：

SecurityError 阻止了来源为“https://xxxxxreactapp.com”的帧从访问具有原点的框架 “https://xxxxx.fls.doubleclick.net”。协议、域和端口必须匹配。

特定请求是从 Google 跟踪代码管理器触发的，但对我自己的 API 的请求以类似的方式失败（尽管显然没有提及框架，但仍然与跨域相关）。

与我自己的 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

这描述了应用程序和我都控制的 API 之间的交互，我很想我的设置有问题，但有两件事会导致不同的结论：

我也在同一个站点上使用 Google 跟踪代码管理器，它的请求也以同样的方式失败（GTM 使用标准 iframe 设置，它也尝试跨源通信）。
此设置一直稳定到最后一次 IOS 更新，在 IOS 10.2 中一切正常

更新

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

所有依赖 iframe 将数据传递到外部源的工具都因上述SecurityError Blocked a frame .... 而失败，其中包括 GoogleTagManager 和 Paypal 付款

【问题讨论】：

FWIW，我们正在记录生产异常，并注意到在 3 月 23 日 iOS 10.3 更新后，我们针对此异常（“Security Error: Blocked a frame...”）的错误率显着增加： i.imgur.com/QDDFs8Z.png
仅供参考，我遇到了完全相同的问题，而且我还收到了通过 Sentry 记录的错误。
@DavidGomes 你也在使用谷歌标签管理器吗？
不，它是另一个使用 iframe 进行跨域通信的服务 (Keycloak)。我们也只能在 iOS 10.3 上进行复制。因此，我查看了此操作系统更新的安全发布说明，他们更改了许多与 CORS 相关的内容。然而，乍一看，在我看来，他们中的任何一个都不应该破坏这个功能，尤其是因为它可以在其他地方工作。
铬问题：bugs.chromium.org/p/chromium/issues/detail?id=709132

标签： javascript ios google-chrome ios10.3

【解决方案1】：

特别是关于 iframe 问题，此错误似乎与 Chrome 自动填充有关。您可以使用相关铬问题的comment 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 中的内容似乎也能成功加载。因此，对最终用户应该没有明显的影响。

【讨论】：