From 3a639537b3c391866fa4597f42b72492d1ca1839 Mon Sep 17 00:00:00 2001 From: Rohan Kumar Date: Mon, 28 Mar 2022 18:11:55 -0700 Subject: [PATCH] Info about csp, halation - Mention pitfalls of a -based CSP - Describe halation a bit more, with an image. --- assets/p/halation.avif | Bin 0 -> 1408 bytes assets/p/halation.png | Bin 0 -> 2811 bytes assets/p/halation.webp | Bin 0 -> 2166 bytes content/posts/website-best-practices.gmi | 15 +++++++-- content/posts/website-best-practices.md | 38 +++++++++++++++++++++-- 5 files changed, 48 insertions(+), 5 deletions(-) create mode 100644 assets/p/halation.avif create mode 100644 assets/p/halation.png create mode 100644 assets/p/halation.webp diff --git a/assets/p/halation.avif b/assets/p/halation.avif new file mode 100644 index 0000000000000000000000000000000000000000..bdf6957a8da814f59c00d29a1e0783359fb7f4c5 GIT binary patch literal 1408 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 N002ovPDHLkV1n|cvz-6{ literal 0 HcmV?d00001 diff --git a/assets/p/halation.webp b/assets/p/halation.webp new file mode 100644 index 0000000000000000000000000000000000000000..6bbf4d82f02282d084c8e714ce3e1a9c4a0e5469 GIT binary patch literal 2166 zcmV-+2#NPnNk&F)2mk50xORpZD>+4 zMemHe;DDiU_UFG9FsX?<=j^d9E2~2gjbRn4ge81zXFo!1=M3z(+mr333NeIf_MeKKoGL0-P?ObwQD`zI(T|k4|ED4 z*f#9lkPm+sUQ%N*4*qa@>>}%V`a_PJAtLNp?LxCUxgjs_(~RLLzQ&q0!BeVXd4P{5vlY zQXZ*3HB!a&G`>pscTjkj`LsfUtzXFOBKT~O<2qfFj=XaV5N+Wz=tRguu@^>i>&nbt zqWD1QR+#bW#Z0!?^*s{Sk)xp<5;jHM$zVnbB$6Z39g!4s7lIq(>#45E01KLjS-p3A zlP9lEPkCvaWh{9kyfp)LbY;*-m!G}9t?9GM*OsLnu-aZv!e|#`K)cZ0KKg<7X0q-F zqZ#a2D20lnURN{B!l^GozLN5xG{?oy8{_jc^4<~58`NJ_`0l`jPT-q&g7g<~m0Jovkye54zw|hOIK3rCg*OE3s=^FTwlYm87TY5XcJny!$Teh1*v$q9e&y z9@Ug$;VM_BdVMouYhC~HIeNVKTHh>fO}@iNeGi>dnEFr(c`oTwkY%ji;UO5)WSP*& z!E}mHIYBN&%%0Qr)Y3R!Ax-{}`y9r%r=xtnz07u6c9khaK2WDE*87{5&tc=J2=|?9 zzb(>|I#cGQzjaqnve#RLI2mLN8BxO#kTNC6D?!9!^A2MH-Z5$F1QZ-i#)$o_CT?9> zAvVcp9Tn0&0iMV*HXP-V#=5&;hA2t=a{5MnkJoIC>yk9?dQLfFZ!1o>--+-zQ5?N< zjn-1F5GAdAXeVq;x39!}a&+<&tX$j$gcZEeJpyN5G%}VgM&05x$tEz3gn9z9$Q~Em z29rU&)Vx?q->qZoPQ>tdP-7jdQp%g@S2u6ZNkt7ZT>ReeAf4yGq6Cv7tzb5TJ1}<~ z5~4hJlp&uS?+r1l=V6yyLb$27IZ87EVGld@Hw*u3QXV_;+gy{h+-YA7?`xw(y82r| zr>!84gd;Uxz`q@fu|-BdKh9G-XCp(jq2S674DEtbIrBntluQq>Y8p*5s4`)foMfUT zWOKC`oqT}F!ih&C!)iV@t?BcKk;2%lEc=T(_L?|jX|;4nY$F6Pt(fY{`dk^Gm0~dv z*SKyKh5X>Upzy#%;T^F`Oc6JZUg{44V3&r3o0s!FF%zu5(q6yEYle8Q>}jP&Kx{ve z_A*wk{t8k6laLI0E3-u|T_Odsyhfd5(Hzyc!2muGTvTPSAAJ^4x-x6syRBkexcmQ2iHXh_vCsFE35=zz1MYYMHJ>h4T}AOI*{aogwJ+YaM7@%>K1gzn)%AIV za%H$=!hK-ED0l{1LcfR@gT3GAwmfZ4PY#xNrJz_79lkF)%^kTi7x$`%rJ@jx1$c|W z`4P~H6d@8hO<4!qUN}|HkRQlM&;wLdNXj2mQ(||H6+xwLVP|;RVPP_w8ob6@2M$~G zJ>e)scu^w!3ErTgT>aqG6&l;1%&&;xe0=fRip=}4aN(x5*n#T&icR&bheVW{u}X$d4!*TBKu^^Lz35<4y{(8`p=RUFB(jQ%D$?P&Pxa0R zBw_}x=k^X5;ToCv<(>y{9`s>(BYy9eX7dAjaMG_Wc2G_b)|~9Q*LO3>w{P5N?E^FL zn6@j-cd}*`n?T8R%B{SLy?}RZy81;c(SKPLAlx*^Bkl<)-VF sIooCxWv^PG tag. In addition to not supporting certain directives, a CSP in a tag might let some items slip through: + +> At the time of inserting the meta element to the document, it is possible that some resources have already been fetched. For example, images might be stored in the list of available images prior to dynamically inserting a meta element with an http-equiv attribute in the Content security policy state. Resources that have already been fetched are not guaranteed to be blocked by a Content Security Policy that's enforced late. + +=> https://html.spec.whatwg.org/multipage/semantics.html#attr-meta-http-equiv-content-security-policy HTML Living Standard, Content Security Policy state + ### If you must enable scripts Please use progressive enhancement³ throughout your site; every feature possible should be optional, and scripting is no exception. @@ -248,11 +254,16 @@ Note that the APCA isn't fully mature as of early 2022. Until version 3.0 of the CSS filters such as "invert" are expensive to run, so use them sparingly. Simply inverting your page's colors to provide a dark theme could slow it down or cause a user's fans to spin. -Darker backgrounds draw less power on devices with OLED screens; however, backgrounds should never be solid black. White text on a black background causes halation, especially among astigmatic readers. There has been some experimental and plenty of anecdotal evidence to support this. +Darker backgrounds draw less power on devices with OLED screens; however, backgrounds should never be solid black. White text on a black background causes halation, especially among astigmatic readers. Halation comes from the word "halo", and refers to a type of "glow" or ghosting around words. There has been some experimental and plenty of anecdotal evidence to support this: => https://www.laurenscharff.com/research/AHNCUR.html Hill, Alyson (supervised by Scharff, L.V.) Readability Of Websites With Various Foreground / Background Color Combinations, Font Types And Word Styles, 1997 => https://jessicaotis.com/academia/never-use-white-text-on-a-black-background-astygmatism-and-conference-slides/ Never Use White Text on a Black Background: Astygmatism and Conference Slides +Here's an approximation of what this kind of halation looks like: + +=> gemini://seirdy.one/misc/halation.png Fuzzy white text on black background reading "But it is not" (image/png) +=> https://www.essentialaccessibility.com/blog/accessibility-for-people-with-astigmatism image source + I personally like a foreground and background of "#ececec" and "#0c0c0c", respectively. These shades seem to be as far apart as possible without causing accessibility issues: "#0c0c0c" is barely bright enough to create a soft "glow" capable of minimizing halos, but won't ruin contrast on cheap displays. "Just disable dark mode" is a poor response to users complaining about halation: it ignores the utility of dark themes described at the beginning of this section. @@ -757,7 +768,7 @@ Before you throw up your hands and decide you can't help everyone, take another ## Further reading -Parts of this page can be thought of as an extension to the principles of Brutalist Web Design: +Parts of this page can be thought of as an extension to the principles of Brutalist Web Design, which favors "raw content true to its construction": * Content is readable on all reasonable screens and devices. * Only hyperlinks and buttons respond to clicks. diff --git a/content/posts/website-best-practices.md b/content/posts/website-best-practices.md index 0893c40..cface3f 100644 --- a/content/posts/website-best-practices.md +++ b/content/posts/website-best-practices.md @@ -69,6 +69,26 @@ sandbox allow-same-origin `default-src: 'none'` implies `script-src: 'none'`, causing a compliant browser to forbid the loading of scripts. Furthermore, the `sandbox` CSP directive forbids a [wide variety](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/sandbox) of potentially insecure actions. While `script-src` restricts script loading, `sandbox` can also restrict script execution with stronger defenses against script injection (e.g. by a browser addon).[^1] I added the `allow-same-origin` parameter so that these addons will still be able to function.[^2] +If you're able to control your HTTP headers, then use headers instead of a `` tag. In addition to not supporting certain directives, a CSP in a `` tag might let some items slip through: + +
+
+

+At the time of inserting the meta element to the document, it is +possible that some resources have already been fetched. For example, images might be stored in +the list of available images prior to dynamically inserting a meta +element with an http-equiv attribute in the Content security policy state. +Resources that have already been fetched are not guaranteed to be blocked by a Content +Security Policy that's enforced late. +

+
+
+ +-- HTML Living Standard, [Content Security Policy state](https://html.spec.whatwg.org/multipage/semantics.html#attr-meta-http-equiv-content-security-policy) + +
+
+ ### If you must enable scripts Please use progressive enhancement (PE)[^3] throughout your site; every feature possible should be optional, and scripting is no exception. @@ -207,7 +227,18 @@ Note that the APCA isn't fully mature as of early 2022. Until version 3.0 of the CSS filters such as `invert` are expensive to run, so use them sparingly. Simply inverting your page's colors to provide a dark theme could slow it down or cause a user's fans to spin. -Darker backgrounds draw less power on devices with OLED screens; however, backgrounds should never be solid black. White text on a black background causes halation, especially among astigmatic readers. There has been some [experimental](https://www.laurenscharff.com/research/AHNCUR.html) and plenty of [anecdotal](https://jessicaotis.com/academia/never-use-white-text-on-a-black-background-astygmatism-and-conference-slides/) evidence to support this. I personally like a foreground and background of `#ececec` and `#0c0c0c`, respectively. These shades seem to be as far apart as possible without causing accessibility issues: `#0c0c0c` is barely bright enough to create a soft "glow" capable of minimizing halos, but won't ruin contrast on cheap displays. +Darker backgrounds draw less power on devices with OLED screens; however, backgrounds should never be solid black. White text on a black background causes halation, especially among astigmatic readers. Halation comes from the word "halo", and refers to a type of "glow" or ghosting around words. There has been some [experimental](https://www.laurenscharff.com/research/AHNCUR.html) and plenty of [anecdotal](https://jessicaotis.com/academia/never-use-white-text-on-a-black-background-astygmatism-and-conference-slides/) evidence to support this. + +
+
+ +The following image is an approximation of what halation looks like, cropped from Essential Accessibility. + +
+{{< picture name="halation" alt="Fuzzy white text on black background reading \"But it is not\"." >}} +
+ +I personally like a foreground and background of `#ececec` and `#0c0c0c`, respectively. These shades seem to be as far apart as possible without causing accessibility issues: `#0c0c0c` is barely bright enough to create a soft "glow" capable of minimizing halos, but won't ruin contrast on cheap displays. "Just disable dark mode" is a poor response to users complaining about halation: it ignores the utility of dark themes described at the beginning of this section. @@ -661,7 +692,8 @@ Parts of this page can be thought of as an extension to the principles of Brutal
-
    +

    Raw content true to its construction:

    +
    1. Content is readable on all reasonable screens and devices.
    2. Only hyperlinks and buttons respond to clicks.
    3. Hyperlinks are underlined and buttons look like buttons.
      4. @@ -669,7 +701,7 @@ Parts of this page can be thought of as an extension to the principles of Brutal
    4. View content by scrolling.
    5. Decoration when needed and no unrelated content.
    6. Perform­ance is a feature.
      7. -
+
— {{}},