Кросс-исходный запрос заблокирован при загрузке локального файла

Question

В настоящее время я занимаюсь разработкой веб-сайта, и у меня возникают проблемы с отображением иконок шрифтов в Firefox. все браузеры, кроме Firefox, могут загружать и показывать мои иконки шрифтов, но в Firefox я получаю следующую ошибку:

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at file:///C:/Users/Me/Desktop/website/resources/dist/css/fonts/themify.ttf. (Reason: CORS request not http).

путь к файлу правильный, так как браузер позволяет мне загрузить файл, когда я ввожу указанный выше URL-адрес. Кто-нибудь знает, почему я получаю эту ошибку?

Answer 1

Firefox 68 содержит исправление безопасности, которое ограничивает типы файлов, которые страницы могут загружать (и методы загрузки) при открытии их из файла file: // URL. Это изменение было сделано для предотвращения проникновения ценных данных в пределах досягаемости локальной страницы, как показано в доступном эксплойте. Дополнительная информация: https://developer.mozilla.org/docs/Web/HTTP/CORS/Errors/CORSRequestNotHttp

Вчера я подал ошибку, в которой предлагалось разрешить шрифты, но для ее реализации потребуется время. На данный момент вы можете откатить патч следующим образом:

(1) На новой вкладке введите или вставьте about: config в адресную строку и нажмите Enter / Return. Нажмите на кнопку, обещая быть осторожным или принимая риск.

(2) В поле поиска над списком введите или вставьте uniq и сделайте паузу, пока список фильтруется

(3) Дважды щелкните по параметру privacy.file_unique_origin, чтобы переключить значение с истинного на ложное

Чтобы устранить уязвимость: если вы сохраняете страницы с ненадежных сайтов в отдельной папке, например, Downloads \ Untrusted, злоумышленнику будет трудно найти какой-либо ценный контент с использованием локальных ссылок на файлы.

Answer 2

Самый простой и безопасный способ преодолеть временную проблему (это должно быть исправлено в следующем обновлении Firefox 68.0.2) с веб-шрифтами, не загруженными при локальном предварительном просмотре, - это установить версию .ttf или .otf и ссылку на нее в своем @ font-face декларация. В Windows перейдите в / Панель управления / Шрифты / и проверьте точное название шрифта, скопируйте в значение local ('') .

Пример:

@font-face {    
   font-family: 'Clear Sans';    
   font-style: normal;    
   font-weight: 700;    
   src: local('Clear Sans Bold'),    
      url('../fonts/woff2-convert/ClearSans-Bold.woff2') format('woff2'),    
      url('../fonts/WOFF/ClearSans-Bold.woff') format('woff'),     
      url('../fonts/TTF/ClearSans-Bold.ttf') format('truetype')    
}     

Answer 3

Как уже упоминалось в разделе комментариев, я установил веб-сервер. В моем случае я использовал tomcat8, и с его помощью я мог отображать значки даже в Firefox.