5 ms·

Font-Face Toggler Bookmarklet

39 points by gslin 3y ago

chrismorgan 3y ago
A more reliable approach, though requiring a reload, is to block web fonts in uBlock Origin (which you’re using, right?)—there’s a button for the purpose. You can also just turn font choice off altogether, so that you just get your chosen serif/sans-serif/monospace/whatever fonts. In Firefox, it’s Settings → Fonts → Advanced → untick Allow pages to choose their own fonts, instead of your selections above. I started doing that a couple of years ago as an experiment and have never gone back: it makes the web so much better with minimal and typically unimportant breakage.
napolux 3y ago
I might sound like a boomer, but I still use some... Simple dark mode https://pastebin.com/Dfxtd6hJ https://pastebin.com/Dfxtd6hJ This one for responsive previews http://lab.maltewassermann.com/viewport-resizer/ http://lab.maltewassermann.com/viewport-resizer/
- daswerth 3y ago
  Not sure if it's meant to be a joke, but the site for that responsive preview boookmarklet does Not look right on mobile. The title text spills off the right side of my screen.
cxr 3y ago
> When the stylesheets are not accessible by document.styleSheets API (e.g. on a third party domain, what!?) I agree with the !? sentiment. An even bigger WTF, though, is that the server gets to control through CSP which off-site style sheets the user can link against and even whether use of the style attribute is permitted. CSP is one of the worst pieces of Web security infrastructure that modern browsers unwisely agreed to go along with. Incredibly user-hostile and worse, effectively irreversible—there's basically no going back now because browsers don't have the option at this point to say, "Yeah, we're not going to honor this anymore," without putting users at an even greater risk than before CSP ever existed. So not just detestable in the vein of WEI, but an utterly abominable technical work.
- lifthrasiir 3y ago
  It's rather an origin check instead of CSP I believe [1], and I can imagine a lot of possible attacks if it's open wide... [1] https://drafts.csswg.org/cssom/#concept-css-style-sheet-origin-clean-flag https://drafts.csswg.org/cssom/#concept-css-style-sheet-orig...
  - cxr 3y ago
    To be clear: I wasn't saying that restricted cross-origin access to style rules was a consequence of CSP; I was likening the effects of document.styleSheets restrictions to the effects of CSP restrictions. (It happens that CSP has other, worse effects.)
- wscourge 3y ago
  > CSP is one of the worst pieces of Web security infrastructure that modern browsers unwisely agreed to go along with This got me interested - care to provide a reasoning behind it? I'd love to read more on the subject and better understand it. Thanks.
  - cxr 3y ago
    Unfortunately, someone would have to write it first. (Why not you?) My reasoning is in the next sentence: «Incredibly user-hostile and worse, effectively irreversible—there's basically no going back now because browsers don't have the option at this point to say, "Yeah, we're not going to honor this anymore," without putting users at an even greater risk than before CSP ever existed.»
    - wscourge 3y ago
      I still don't understand WHY is it "Incredibly user-hostile". Will do my own research anyway.
      - cxr 3y ago
        Refer to the place in the linked article where the part I quoted appears in a section called "Limitations"—the bookmarklet is stopped in its tracks when it encounters style sheets that are loaded from off-site (but that are still loaded nonetheless and have an effect on the current page). Considering that the user is the one who invokes bookmarklets and has their own personal accessibility reasons for doing so, that's an unwelcome limitation. There's a similar effect with CSP: server operators and content authors can use CSP to prevent the use of bookmarklets that ordinarily work by overriding the author's style rules through $element$.style (i.e. the style attribute), inserting style elements with the user's own CSS, or loading/linking against off-site style sheets. See also: Google's WEI ("Web Environment Integrity") proposal from earlier last year that was justifiably opposed by pretty much everyone[1] The W3C's Priority of Constituencies[2] (part of its Web Platform Design Principles) and its Ethical Web Principles related to putting users in control[3] 1. <https://en.wikipedia.org/wiki/Web_Environment_Integrity https://en.wikipedia.org/wiki/Web_Environment_Integrity> 2. <https://www.w3.org/TR/design-principles/#priority-of-constituencies https://www.w3.org/TR/design-principles/#priority-of-constit...> 3. <https://www.w3.org/TR/ethical-web-principles/#control https://www.w3.org/TR/ethical-web-principles/#control>

39 points by gslin 3y ago

A more reliable approach, though requiring a reload, is to block web fonts in uBlock Origin (which you’re using, right?)—there’s a button for the purpose. You can also just turn font choice off altogether, so that you just get your chosen serif/sans-serif/monospace/whatever fonts. In Firefox, it’s Settings → Fonts → Advanced → untick Allow pages to choose their own fonts, instead of your selections above. I started doing that a couple of years ago as an experiment and have never gone back: it makes the web so much better with minimal and typically unimportant breakage.

napolux 3y ago

I might sound like a boomer, but I still use some... Simple dark mode https://pastebin.com/Dfxtd6hJ https://pastebin.com/Dfxtd6hJ This one for responsive previews http://lab.maltewassermann.com/viewport-resizer/ http://lab.maltewassermann.com/viewport-resizer/

daswerth 3y ago
Not sure if it's meant to be a joke, but the site for that responsive preview boookmarklet does Not look right on mobile. The title text spills off the right side of my screen.

cxr 3y ago

> When the stylesheets are not accessible by document.styleSheets API (e.g. on a third party domain, what!?) I agree with the !? sentiment. An even bigger WTF, though, is that the server gets to control through CSP which off-site style sheets the user can link against and even whether use of the style attribute is permitted. CSP is one of the worst pieces of Web security infrastructure that modern browsers unwisely agreed to go along with. Incredibly user-hostile and worse, effectively irreversible—there's basically no going back now because browsers don't have the option at this point to say, "Yeah, we're not going to honor this anymore," without putting users at an even greater risk than before CSP ever existed. So not just detestable in the vein of WEI, but an utterly abominable technical work.

lifthrasiir 3y ago
It's rather an origin check instead of CSP I believe [1], and I can imagine a lot of possible attacks if it's open wide... [1] https://drafts.csswg.org/cssom/#concept-css-style-sheet-origin-clean-flag https://drafts.csswg.org/cssom/#concept-css-style-sheet-orig...
- cxr 3y ago
  To be clear: I wasn't saying that restricted cross-origin access to style rules was a consequence of CSP; I was likening the effects of document.styleSheets restrictions to the effects of CSP restrictions. (It happens that CSP has other, worse effects.)
wscourge 3y ago
> CSP is one of the worst pieces of Web security infrastructure that modern browsers unwisely agreed to go along with This got me interested - care to provide a reasoning behind it? I'd love to read more on the subject and better understand it. Thanks.
- cxr 3y ago
  Unfortunately, someone would have to write it first. (Why not you?) My reasoning is in the next sentence: «Incredibly user-hostile and worse, effectively irreversible—there's basically no going back now because browsers don't have the option at this point to say, "Yeah, we're not going to honor this anymore," without putting users at an even greater risk than before CSP ever existed.»
  - wscourge 3y ago
    I still don't understand WHY is it "Incredibly user-hostile". Will do my own research anyway.
    - cxr 3y ago
      Refer to the place in the linked article where the part I quoted appears in a section called "Limitations"—the bookmarklet is stopped in its tracks when it encounters style sheets that are loaded from off-site (but that are still loaded nonetheless and have an effect on the current page). Considering that the user is the one who invokes bookmarklets and has their own personal accessibility reasons for doing so, that's an unwelcome limitation. There's a similar effect with CSP: server operators and content authors can use CSP to prevent the use of bookmarklets that ordinarily work by overriding the author's style rules through $element$.style (i.e. the style attribute), inserting style elements with the user's own CSS, or loading/linking against off-site style sheets. See also: Google's WEI ("Web Environment Integrity") proposal from earlier last year that was justifiably opposed by pretty much everyone[1] The W3C's Priority of Constituencies[2] (part of its Web Platform Design Principles) and its Ethical Web Principles related to putting users in control[3] 1. <https://en.wikipedia.org/wiki/Web_Environment_Integrity https://en.wikipedia.org/wiki/Web_Environment_Integrity> 2. <https://www.w3.org/TR/design-principles/#priority-of-constituencies https://www.w3.org/TR/design-principles/#priority-of-constit...> 3. <https://www.w3.org/TR/ethical-web-principles/#control https://www.w3.org/TR/ethical-web-principles/#control>