IOS 10.3.1 браузер Chrome терпит неудачу CORS

Я обнаружил странную ошибку при выполнении запросов CORS с моего веб-сайта (приложение React общается с API через https). Ошибки появляются только в IOS 10.3.1 и в браузере Chrome (57) (safari и webViews в порядке). Из-за отсутствия инструментов для отладки IOS Chrome единственная запись, которую я имею, - это то, что записывает Sentry (сторонняя служба). Ошибки являются вариациями:

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, которая также пытается установить связь CROSS-ORIGIN).
  • Эта установка была стабильной вплоть до последнего обновления IOS, все работает правильно в IOS 10.2

ОБНОВИТЬ

Мне удалось разобраться с вызовами API, это было как-то связано с моим промежуточным стеком прокси. НО сторонняя проблема до сих пор не решена.

Все инструменты, которые используют iframes для передачи данных во внешние источники, не работают с вышеупомянутым SecurityError Blocked a frame .... Это включает в себя платежи GoogleTagManager и Paypal

1 ответ

В частности, что касается проблемы iframe, похоже, что эта ошибка связана с автозаполнением Chrome. Вы можете воспроизвести ошибку, используя пример кода, приведенный в комментарии 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 успешно загружается даже с ошибкой. Таким образом, не должно быть заметного воздействия на конечного пользователя.

Другие вопросы по тегам