34

I am currently developing a website and have trouble showing my font-icons in firefox. every browser except for firefox can load and show my font-icons, but on firefox I get the following error:

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).

the path of the file is correct, as the browser lets me download the file when I enter the above listed URL. Anybody knows why I get this error?

  • 1
    You cannot load every type of file frome a file:/// URI. You should, instead, host it on some web server on your machine (eg. Apace or IIS) and then view your website on http://localhost – Damiano Magrini Jun 28 '18 at 11:30
  • 1
    Acessing directly a file on your computer using the browser and asking a remote website to load it are 2 completly different things. Your error suggest that you visit a remote site through `http`, which tries to access the file through another protocol `file` ([which is not supported by CORS, see point 2](https://stackoverflow.com/a/3744697/7393478)). The easiest is that the file is hosted on the same server as the website so it can be loaded through `http` – Kaddath Jun 28 '18 at 11:43
  • @DamianoMagrini thanks for the hint. installing a web-server worked! –  Jun 29 '18 at 13:12

3 Answers3

46

Firefox 68 contains a security patch which restricts the kinds of files that pages can load (and methods of loading) when you open them from a file:// URL. This change was made to prevent exfiltration of valuable data within reach of a local page, as demonstrated in an available exploit. More info: https://developer.mozilla.org/docs/Web/HTTP/CORS/Errors/CORSRequestNotHttp

I filed a bug yesterday proposing that fonts be allowed, but it will take time to implement. For now, you can roll back the patch as follows:

  1. In a new tab, type or paste about:config in the address bar and press Enter/Return. Click the button promising to be careful or accepting the risk.
  2. In the search box above the list, type or paste uniq
  3. Double-click the privacy.file_unique_origin preference to switch the value from true to false

NOTE:

For Firefox version 106 or later OMIT STEP 3

And SET "security.fileuri.strict_origin_policy" to "false"

To mitigate the vulnerability: If you save pages from untrusted sites in a separate folder, e.g., Downloads\Untrusted, then it would be difficult for an attacker to find any valuable content using local file links.

joe.thedeveloper2020
  • 3
  • 3
Mahdi Aslami Khavari
  • 1,755
  • 15
  • 23
  • 2
    This is a good answer but how is accessing something such as a Css file that is in the same directory as the html/php page that is being loaded a "Cross-origin request." they are both in the same folder on local machine. could understand getting CORS warning for loading Js libraries from a CDN which is cross origin but not local files on the same machine as the root document? – Ryan Stone Jan 25 '20 at 16:21
  • 4
    When trying to load other files, such as *.xslt, you'll also have to set the setting `security.fileuri.strict_origin_policy` to `false`. At least that's my experience in Firefox 77 :) – Piemol Jun 28 '20 at 15:14
  • 1
    @Piemol that's super helpful. I couldn't even get .js files to work until I also set security.fileuri.strict_origin_policy to false. – NerdSoup Dec 14 '21 at 20:45
  • 1
    I also found ''' security.fileuri.strict_origin_policy ''' as necessary for newer version of firefox. Please also include that in your answer. – Y00 Jan 22 '22 at 02:19
4

As mentioned in the comment section, I installed a web server. In my case I used tomcat8 and using that I was able to display the icons even in firefox.

  • This is also the solution suggested by Mozilla. See docs: [CORS request not HTTP](https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS/Errors/CORSRequestNotHttp) and [How do you set up a local testing server?](https://developer.mozilla.org/en-US/docs/Learn/Common_questions/set_up_a_local_testing_server) – djvg Apr 21 '22 at 13:55
1

The easiest and safe way to overcome the temporary problem (It should be fixed in the next 68.0.2 Firefox update) with web fonts not loaded when previewing locally is to install .ttf or .otf version and link to it in your @font-face declaration. On Windows, go to /Control Panel/Fonts/ and check the exact name of your font, copy to the local('') value.

Example:

@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')    
}
Pristy
  • 11
  • 1
  • 2