Отказался от загрузки шрифта '<URL>', поскольку он нарушает следующую директиву Content Security Policy default-src, поэтому default-src используется в качестве запасного

Question

Я создаю веб-приложение, использующее средний стек в угловых 6, но я получаю сообщение об ошибке ниже на консоли браузера.

"Отказался загружать шрифт '', потому что оннарушает следующую директиву Content Security Policy: «default-src« self ». Обратите внимание, что« font-src »не был задан явно, поэтому« default-src »используется как запасной вариант.»

Код:

 getUsers() {
    return this._http.get("/api/users")
      .pipe(map(result => this.result = result.json().data));
  }

Answer 1

Политика безопасности контента - это способ для современных браузеров определять набор ограничений при загрузке удаленных ресурсов.

Заголовки ответа из протокола HTTP могут устанавливать эти политики:

Заголовки Content-Security-Policy (официальный), X-Content-Security-Policy (поддерживается Mozilla Firefox и IE10) и X-WebKit-CSP (поддерживается Google Chrome и Safari) заголовки ответа HTTP со списком директив политики безопасности содержимого. (из модуль seckit drupal )

Вы можете установить разные политики для разных типов элементов в DOM (например, <img>, <script>,<object>, <embed>, <iframe> и т. Д.) Для ограничения запросов, исходящих от этого элемента.

Итаквам нужно изменить 'self' на одно из следующих:

• 'none' - заблокировать контент из любого источника
• 'self' - разрешить контент только из вашего домена
• 'unsafe-inline' - разрешить определенный встроенный контент (обратите внимание, что он поддерживается подмножеством директив)
• 'unsafe-eval' - разрешить набор API для строки в код, который по умолчанию ограничен (поддерживается директивой script-src)

Допускаются подстановочные знаки (*):

• * - загрузка содержимого из любого источника
• *.example.com- загрузка контента с сайта example.com и всех его поддоменов
• example.com:* - загрузка контента с сайта example.com через любой порт.-
• В противном случае он будет использовать порт вашего сайта по умолчанию

Answer 2

Добавление 'self' и data: к font-src у меня работает.

Content-Security-Policy: font-src 'self' data:;

Answer 3

font-src справочный документ из MDN

Заголовок Content-Security-Policy устанавливается вашим API.Проверьте ваш ответ API на его значение.Что касается ошибки, я думаю, что ваши шрифты загружаются из домена, отличного от домена приложения.Если ваш домен API не внесет в белый список этот домен, ваш браузер не будет загружать шрифт.

Пример:

Content-Security-Policy: font-src https://example.com/