Safari: «Заблокирован https: // ... от запроса учетных данных, потому что это запрос из разных источников». после обновления до Angular 8

Question

Мы обеспечили безопасность нашего веб-приложения Angular с помощью Basic Auth. После обновления нашего приложения с Angular 7 до 8.0 мы больше не запрашиваем учетные данные в Safari, и в консоли появляются следующие ошибки:

[Error] Blocked https://*/runtime-es2015.4f263ec725bc7710f1f5.js from asking for credentials because it is a cross-origin request.
[Error] Blocked https://*/main-es2015.6fa442dd5c5a204f47da.js from asking for credentials because it is a cross-origin request.
[Error] Blocked https://*/polyfills-es2015.fd951ae1d7572efa3bc6.js from asking for credentials because it is a cross-origin request.

В Firefox и Chrome приложение по-прежнему работает без проблем. Версия Safari - 12.1.1.

Кто-нибудь знает, в чем проблема с Safari?

Answer 1

Кажется, что некоторые изменения в спецификации скриптов модуля (https://github.com/whatwg/html/pull/3656) еще не были реализованы в Safari. Для меня это работает в Safari Technology Preview.

Тем временем вы можете исправитьэто путем добавления атрибута crossorigin в скрипты вашего модуля, например:

<script src="runtime-es2015.ff56c41ec157e6d9b0c8.js" type="module" crossorigin></script>

---

Вот решение, которое я принял (требуется один сторонний пакет).

Первый, установите этот пользовательский конструктор веб-пакетов: @angular-builders/custom-webpack:

npm i -D @angular-builders/custom-webpack

Обязательно проверьте предварительные требования в его файле readme и при необходимости обновите другие зависимости.

Обновите свойangular.json для использования компоновщика и установки опции indexTransform:

"projects": {
  ...
  "your-app": {
    ...
    "architect": {
      ...
      "build": {
        "builder": "@angular-builders/custom-webpack:browser"
        "options": {
            "indexTransform": "./index-html-transform.js"
              ...
        }

Наконец, создайте файл с именем index-html-transform.js в корневом каталоге вашего проекта со следующим содержимым:

module.exports = (targetOptions, indexHtml) => {
  const regex = /(<script.*?type="module".*?)>/gim;
  return indexHtml.replace(regex, "$1 crossorigin>");
};

Теперь, когда вы создаете свое приложение и выдается index.html, оно автоматически добавляет атрибут crossorigin к каждому скрипту модуля.