no-remote-fonts option not working for inlined fonts

[icasdri]

uBlock Origin's no-remote-fonts: * true option (i.e. by checking "Block remote fonts" in Settings or adding that line to rules) does not have the desired effect of blocking @font-face remote webfonts from being downloaded/used.

@font-face fonts are still downloaded/used even when the option is enabled. This can be seen in Firefox's Font Inspector. Below is an example with http://arstechnica.com.

Notice that uBlock Origin's font blocking option is enabled per the red X in bottom-right of popup, yet the @font-face remote webfonts are still being used per Inspector (example of "Bebas Nueue" present in screenshot; this is also easily seen in the difference in page rendering).

Note that setting Firefox's built-in gfx.downloadable_fonts.enabled to false does have the desired effect (see Steps to Reproduce below), but this ruins uBlock Origin's popup UI as discussed in #15 when this feature was first introduced.

Steps to reproduce:

1. Visit a site with webfonts, e.g. http://arstechnica.com, open Inspector, click on Fonts tab, observe that a number of @font-face remote webfonts are being used.
2. Enable "Block remote fonts" in uBlock Origin's settings (or add the appropriate rule)
3. Visit the site again (force disable cache and refresh), and observe in Font Inspector that the @font-face webfonts are still being used.
4. Set gfx.downloadable_fonts.enabled to false in about:config (from Icons are broken with standard font set. #15, this is what no-remote-fonts is supposed to accomplish without uBlock's interface breaking)
5. Visit the site again, and observe in Font Inspector that all fonts are now "system" fonts, and no @font-face are used.
6. Set gfx.downloadable_fonts.enabled back to true, while keeping uBlock Origin's "Block remote fonts" option, and observe on the site in Font Inspector that the @font-face webfonts come back, signifying that uBlock's option has no effect.

Version information:

• Firefox 45.0.1 (new profile, no other extensions, running on latest Arch Linux)
• uBlock Origin 1.6.8 (fresh from AMO, no other settings changed)

[gorhill]

These are inline data: URI-based fonts, they can't be blocked as there is no specific network requests for these.

[berrythesoftwarecodeprogrammar]

@gorhill do you think anything should be done about data: URIs? seems like an easy way for websites to bypass blockers and load unwanted/malicious content. see: gorhill/uMatrix#276 (comment)
it would require extra work but treating data: URIs as additional requests or special requests which can be blocked based on content type might be a good idea. if not in ublock/umatrix maybe someone else can do it. maybe browser vendors will address it if they start seeing them being abused

[icasdri]

@gorhill Thanks for the explanation. This is interesting and does indeed seem like an easy bypass for websites. Curiously, NoScript's option seems to successfully block these (as part of their various types of "Blocked Objects"), so I wonder how they do it in addition to gfx.downloadable_fonts.enabled's behavior.

[gorhill]

I wonder how they do

Probably blocking through nsIContentPolicy. I could do the same for uBO -- I did that in the past for video resources, something which I eventually reverted -- but there are performance issues doing so, especially concerning multiprocess Firefox. And anyways, this would work only for Firefox, not Chromium-based browsers, and not for Firefox WebExtensions.

My understanding of how things are evolving, is that Giorgio Maone is working closely with Mozilla re. WebExtensions, and I am assuming that the missing parts of WebExtensions as implemented on Chromium-based browsers to solve the kind of issues here will be added to Firefox's version of WebExtensions (and hopefully this will motivate Chromium devs to follow suit).

[RoxKilly]

@icasdri , if you do not wish to download remote fonts, but you still want uBO UI to work, instruct Firefox to prevent websites from using their own fonts. To do this, go to Options > Content > Advanced button > uncheck "Allow pages to choose their own fonts". In about:config, you can accomplish the same thing by setting browser.display.use_document_fonts=0. Doing so and refreshing ArsTechnica page, you will see that only local fonts are used.

By making that settings change in Options menu (instead of about:config), you can choose which font you want all pages to use. Here is my own setting; it has worked well on just about all pages so far:

[lewisje]

That's a bit too heavy-handed, because it keeps all page-specified fonts, even fonts loaded from the local machine rather than the Web (a.k.a. "non-web" fonts), from working unless they're in that small set of allowed fonts; for example, it would keep Verdana from being used on a page if Arial is set as the default sans-serif.

[RoxKilly]

I don't understand the exact workings of this setting to be honest. What @lewisje just posted makes sense, and the setting seemed to successfully block Arstechnica site from loading remote fonts. Then again, if I go to http://getbootstrap.com/css/, even though I have browser.display.use_document_fonts=0 and uBO set to block remote-fonts, only some fonts get blocked. The Fonts tab of the Inspector tool (Firefox) shows that fonts can still be loaded remotely.

Firefox 45.0.1
uBO 1.6.8

[berrythesoftwarecodeprogrammar]

can you link to the exact page with the fonts? i dont see them on your link

[RoxKilly]

@berrythesoftwarecodeprogrammar Not sure whether you're referring to me. If so, the page is http://getbootstrap.com/css/ . In Firefox, press Ctrl+Shift+C to open the Inspector, then choose the Fonts tab within the tool. If in about:config you have browser.display.use_document_fonts=0 and you have set uBO to block remote fonts, you should still see a remote font loaded, called anchorjs-icons as in my last post

[gorhill]

http://www.ghacks.net/2015/07/21/firefox-41-mozilla-modifies-how-icon-fonts-are-handled-by-the-browser/

[RoxKilly]

Great find. Coupled with the quote below from gorhill, the ghacks link explains it all for me.

inline data: URI-based fonts, they can't be blocked as there is no specific network requests for these
-gorhill

Now I get that with browser.display.use_document_fonts=0, icon fonts are still allowed by the Firefox browser. Then it's up to uBO to block them. When uBO is instructed to block remote-fonts, it will succeed on a page such as https://wikihoops.com/ where the fonts are loaded with a network request, but it will not succeed on a page such as http://getbootstrap.com/css/ where the fonts are inline data:URI-based

[berrythesoftwarecodeprogrammar]

@RoxKilly oh i didnt know that your screenshot was of the font inspector

i wonder how it determines which fonts are icon fonts

[yurikhan]

Is there an issue for blocking data: URI fonts? I’d like to +1 it.

[gorhill]

#1539 (comment)

[gorhill]

With current version of uBO, this should work to prevent inlined fonts from being used by the browser:

*$csp=font-src *

[yurikhan]

Good. This should probably be mentioned in a wiki page easily accessible from the wiki home.

Also, did you mean *$csp=font-src 'none', or am I misunderstanding how it works?

[gorhill]

Also, did you mean *$csp=font-src 'none', or am I misunderstanding how it works?

Using * means that non-inline fonts won't be blocked by the CSP, hence they can still be blocked/allowed using the no-remote-fonts switch.

[birdie-github]

@gorhill

For those of us who are extremely stupid or unsavvy, how can this rule be applied on a per website basis?

[okiehsch]

||example.com^$csp=font-src *
or
*$csp=font-src * and then disable it on any website you want
@@*$csp=font-src *,domain=example.com

[RoxKilly]

@okiehsch , @gorhill I may be missing something but it doesn't seem to work. Try:

1. add rule: *$csp=font-src * to the My Filters pane
2. add rule no-remote-fonts: * true to the My Rules pane
3. Open dev tools (F12) to observe the fonts loaded
4. go to http://getbootstrap.com/css/

you'll notice that the Anchor-JS fonts are still being loaded (they show up as "remote" in Firefox Fonts Inspector)

[gorhill]

I don't see "Anchor-JS fonts" on that page, the only font resource I see is http://getbootstrap.com/dist/fonts/glyphicons-halflings-regular.woff2, and it is properly blocked by the no-remote-fonts switch. Using Firefox Nightly.