web-dev-qa-db-ja.com

ローカルファイルのロード時にクロスオリジンリクエストがブロックされました

現在、Webサイトを開発していますが、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を入力すると、ブラウザでファイルをダウンロードできるため、ファイルのパスは正しいです。なぜこのエラーが発生するのか誰でも知っていますか？

htmlcssfirefoxfonts
13
user9533436

コメントセクションで述べたように、Webサーバーをインストールしました。私の場合、Tomcat8を使用し、それを使用して、Firefoxでもアイコンを表示することができました。

1
user9533436

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設定をダブルクリックして、値をtrueからfalseに切り替えます

脆弱性を緩和するには：信頼できないサイトのページを別のフォルダー（たとえば、Downloads\Untrusted）に保存すると、攻撃者がローカルファイルリンクを使用して貴重なコンテンツを見つけることは困難です。

11
Mahdy Aslamy

ローカルでプレビューするときにウェブフォントがロードされないという一時的な問題（次の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')    
}
1
Pristy