mirror of
https://git.sr.ht/~seirdy/seirdy.one
synced 2025-02-24 15:30:05 +00:00
Compare commits
5 commits
0448df5d54
...
b5b06626e1
Author | SHA1 | Date | |
---|---|---|---|
![]() |
b5b06626e1 | ||
![]() |
31aa78fef4 | ||
![]() |
861f421724 | ||
![]() |
6d2a813b3f | ||
![]() |
19a0f6d626 |
6 changed files with 123 additions and 6 deletions
112
content/meta/csp-bug-reproduction.md
Normal file
112
content/meta/csp-bug-reproduction.md
Normal file
|
@ -0,0 +1,112 @@
|
|||
---
|
||||
outputs:
|
||||
- html
|
||||
title: "CSP bug reproduction"
|
||||
date: "2022-11-10T18:05:00-08:00"
|
||||
description: "A demonstration page to help diagnose Content-Security-Policy issues in browser software."
|
||||
---
|
||||
If you're on this page, chances are you followed a link from a Content-Security-Policy (<abbr>CSP</abbr>)-related bug report. This page should help diagnose the offending part of the <abbr>CSP</abbr>.
|
||||
|
||||
I made this page because [I noticed my site breaking browser software]({{<relref "/notes/things-my-site-breaks.md">}}), and wanted to fix said software.
|
||||
|
||||
What this page demonstrates
|
||||
---------------------------
|
||||
|
||||
This is a test page that demonstrates the following Content-Security-Policy (<abbr>CSP</abbr>):
|
||||
|
||||
```
|
||||
default-src 'none' 'report-sample';img-src 'self';style-src 'sha256-7cS8Hu9ov7dRhfioeeb9J8mtB9/iLLpVIZsMM+BJUcs=' 'report-sample';frame-ancestors 'none';base-uri 'none';form-action https://seirdy.one/webmentions/receive https://seirdy.one/search/;manifest-src 'self';sandbox allow-same-origin allow-scripts allow-forms;report-uri https://collector.seirdy.one;connect-src https://collector.seirdy.one
|
||||
```
|
||||
|
||||
Here's a multi-line version, to reduce horizontal scrolling:
|
||||
|
||||
```
|
||||
default-src 'none' 'report-sample';
|
||||
img-src 'self';
|
||||
style-src 'sha256-HASH' 'report-sample';
|
||||
frame-ancestors 'none';
|
||||
base-uri 'none';
|
||||
form-action https://seirdy.one/webmentions/receive https://seirdy.one/search/;
|
||||
manifest-src 'self';
|
||||
sandbox allow-same-origin allow-scripts allow-forms;
|
||||
report-uri https://collector.seirdy.one;
|
||||
connect-src https://collector.seirdy.one
|
||||
```
|
||||
|
||||
How to use this page
|
||||
--------------------
|
||||
|
||||
All pages on my site contain a strict <abbr>CSP</abbr>. Most pages on my site have a <abbr>CSP</abbr> containing a `sandbox` directive that does **not** specify the `allow-scripts` parameter. Here's the CSP for most of my other pages, such as my homepage:
|
||||
|
||||
```
|
||||
default-src 'none';
|
||||
img-src 'self';
|
||||
style-src 'sha256-HASH';
|
||||
frame-ancestors 'none';
|
||||
base-uri 'none';
|
||||
form-action https://seirdy.one/webmentions/receive https://seirdy.one/search/;
|
||||
manifest-src 'self';
|
||||
upgrade-insecure-requests;
|
||||
sandbox allow-same-origin allow-forms
|
||||
```
|
||||
|
||||
This page has a <abbr>CSP</abbr> that differs in three ways:
|
||||
|
||||
- It includes a reporting endpoint
|
||||
- It specifies an `allow-scripts` parameter on its `sandbox` directive
|
||||
- It removes `upgrade-insecure-requests`.[^1]
|
||||
|
||||
Additionally, I have a 404 page that includes a blank `sandbox` directive (i.e., it has no parameters such as `allow-same-origin`).
|
||||
|
||||
Some browser software breaks upon encountering strict <abbr>CSPs</abbr>. It's difficult to pinpoint whether the offending CSP directive is a fetch directive (`default-src`, `script-src`, `style-src`, etc.), or if it's the `sandbox` directive without `allow-scripts`.
|
||||
|
||||
Try reproducing the bug on the following pages:
|
||||
|
||||
1. [This page's canonical location](https://seirdy.one/meta/csp-bug-reproduction/)
|
||||
2. [This page again, but with a `sandbox` query parameter](https://seirdy.one/meta/csp-bug-reproduction/?sandbox=0)
|
||||
3. [My homepage](https://seirdy.one/)
|
||||
4. <a href="https://seirdy.one/sample-404/" rel="nofollow">My 404 page</a>
|
||||
|
||||
Note the following:
|
||||
|
||||
- If you can reproduce the bug on all four pages: the offending directive is probably a fetch directive.
|
||||
|
||||
- If you can reproduce the bug on all pages _except_ the second (this page with the query parameter): the offending directive is probably a `sandbox` directive, even if it contains `allow-same-origin` and `allow-scripts`.
|
||||
|
||||
- If you can _not_ reproduce the bug on this page, but _can_ reproduce the bug on my homepage and my 404 page: the offending directive is a `sandbox` directive that blocks scripts (no `allow-scripts` present).
|
||||
|
||||
- If you can only reproduce the bug on my 404 page: the offending directive is `sandbox` without `allow-same-origin`.
|
||||
|
||||
Other places to test
|
||||
--------------------
|
||||
|
||||
Here are some more sites with very strict <abbr>CSPs</abbr> containing `sandbox` directives:
|
||||
|
||||
- [meh.is](https://meh.is/)
|
||||
- [sysrq.in](https://sysrq.in/en/)
|
||||
- [artemislena.eu](https://artemislena.eu/)
|
||||
- [mdleom.com](https://mdleom.com/)
|
||||
|
||||
If you feel the need to regularly test a specific CSP, I recommend using netcat. In a <abbr>UNIX</abbr>-like environment, save this to an executable file and run it:
|
||||
|
||||
```
|
||||
#!/bin/sh
|
||||
|
||||
set -e -u
|
||||
|
||||
while true; do echo "\
|
||||
HTTP/1.1 200 OK
|
||||
Content-Type: text/html;charset=UTF-8
|
||||
Content-Security-Policy: default-src 'none'; frame-ancestors 'none'; base-uri 'none'; form-action 'none'; upgrade-insecure-requests; sandbox
|
||||
|
||||
<!DOCTYPE html>
|
||||
<html><body>poggers</body></html>\
|
||||
" | nc -l 8000; done
|
||||
```
|
||||
|
||||
You'll get a plain page with the specified CSP on port 8000. Edit as you see fit.
|
||||
|
||||
|
||||
[^1]: I removed `upgrade-insecure-requests` so that my Tor onion service could have the same <abbr>CSP</abbr> as this page. The onion service does not support TLS: TLS on onion services is redundant, and no certificate authority offers free <samp>.onion</samp> certificates.
|
||||
|
||||
|
|
@ -92,7 +92,7 @@ Mainstream engines
|
|||
: I keep excellent compatibility with mainstream engines: Blink (Chromium, Edge, QtWebEngine), WebKit (Safari, Epiphany), and Gecko (Firefox).
|
||||
|
||||
Tor Browser
|
||||
: My Tor hidden service also works well with the Tor Browser, except for [a page containing an `<audio>` element](http://wgq3bd2kqoybhstp77i3wrzbfnsyd27wt34psaja4grqiezqircorkyd.onion/posts/2022/07/01/experiment-copilot-legality/). The `<audio>` element appears non-interactive in the Tor Browser due to a bug involving NoScript and Firefox's handling of [the `sandbox` Content Security Policy <abbr>CSP</abbr>directive](https://www.w3.org/TR/CSP3/#directive-sandbox). To work around the issue, I include link to download the audio.
|
||||
: My Tor hidden service also works well with the Tor Browser, except for [a page containing an `<audio>` element](http://wgq3bd2kqoybhstp77i3wrzbfnsyd27wt34psaja4grqiezqircorkyd.onion/posts/2022/07/01/experiment-copilot-legality/). The `<audio>` element appears non-interactive in the Tor Browser due to a bug involving NoScript and Firefox's handling of [the `sandbox` Content Security Policy <abbr>CSP</abbr> directive](https://www.w3.org/TR/CSP3/#directive-sandbox). To work around the issue, I include link to download the audio.
|
||||
|
||||
Mainstream engine forks
|
||||
: Pale Moon and recent versions of K-Meleon use Goanna, a single-process fork of Firefox's Gecko engine. Ultralight is a proprietary, source-available fork of WebKit focused on lightweight embedded webviews. My site works in these engines without any noticeable issues.
|
||||
|
|
|
@ -1097,7 +1097,7 @@ Achieving this type of layout entails using the WCAG 2.2 techniques C27 as well
|
|||
|
||||
Nontrivial use of width-selectors, in CSS queries or imagesets, is actually a powerful vector for JS-free fingerprinting:
|
||||
|
||||
=> https://matt.traudt.xyz/posts/2016-09-04-how-css-alone-can-help-track-you/ How CSS alone can help track you
|
||||
=> https://web.archive.org/web/20221022104555/https://matt.traudt.xyz/posts/2016-09-04-how-css-alone-can-help-track-you/ How CSS alone can help track you
|
||||
|
||||
|
||||
Exceptions exist: one or two very simple responsive changes won't hurt. The main anti-patterns are adjusting the relative order of elements, layout shifts dramatic enough to cause confusion, and making requests based on media queries that reveal fingerprintable information.
|
||||
|
|
|
@ -1122,7 +1122,7 @@ If your skip link toggles visibility states when focused, ensure that it doesn't
|
|||
|
||||
### Friendly navigation
|
||||
|
||||
Users of <abbr title="assistive technology">AT</abbr>s such as screen readers primarily navigate through landmarks, headings, and paragraphs. Sometimes they also navigate between links. Headings and link names need to be unique and descriptive enough to serve as navigational aids; paragraphs shouldn't be too long.
|
||||
Users of <abbr title="assistive technologies">ATs</abbr> such as screen readers primarily navigate through landmarks, headings, and paragraphs. Sometimes they also navigate between links. Headings and link names need to be unique and descriptive enough to serve as navigational aids; paragraphs shouldn't be too long.
|
||||
|
||||
Try using a tool to view a list of all your link names. Just about every screen reader and some browser extensions should offer this functionality. Minimize links with ambiguous names, and ensure that identical link names have identical destinations.
|
||||
|
||||
|
@ -1138,7 +1138,7 @@ Verify this using the horizontal-line test: mentally draw a horizontal line acro
|
|||
|
||||
Keeping a single-column layout that doesn't require responsive layout changes ensures smooth window re-sizing. Doing so while keeping an identical source, DOM, and visual order ensures layout consistency: spatial references such as "the paragraph above this heading" or "the bottom image of a section" will be unambiguous to screen reader, phone, and desktop users. It also ensures that selection behavior and caret movements during [caret navigation](https://en.wikipedia.org/wiki/Caret_navigation) remain predictable. Achieving this type of layout entails using the WCAG 2.2 techniques <cite>[C27: Making the DOM order match the visual order](https://www.w3.org/WAI/WCAG22/Techniques/css/C27.html)</cite> as well as <cite>[C6: Positioning content based on structural markup](https://www.w3.org/WAI/WCAG22/Techniques/css/C6)</cite>.
|
||||
|
||||
Nontrivial use of width-selectors, in CSS queries or imagesets, is actually a powerful vector for [JS-free fingerprinting](https://matt.traudt.xyz/posts/2016-09-04-how-css-alone-can-help-track-you/). This is one of the reasons why I didn't recommend resolution- or dimension-aware imagesets in the [image optimization section](#image-optimization).
|
||||
Nontrivial use of width-selectors, in CSS queries or imagesets, is actually a powerful vector for [JS-free fingerprinting](https://web.archive.org/web/20221022104555/https://matt.traudt.xyz/posts/2016-09-04-how-css-alone-can-help-track-you/). This is one of the reasons why I didn't recommend resolution- or dimension-aware imagesets in the [image optimization section](#image-optimization).
|
||||
|
||||
Exceptions exist: one or two very simple responsive changes won't hurt. The main anti-patterns are adjusting the relative order of elements, layout shifts dramatic enough to cause confusion, and making requests based on media queries that reveal fingerprintable information.
|
||||
|
||||
|
|
|
@ -6,7 +6,7 @@ TheOldNet,https://webring.theoldnet.com/member/ba438275f00f5df1a2e78e547424d05e/
|
|||
geekring,https://geekring.net/site/167/previous,https://geekring.net/,https://geekring.net/site/167/next,https://geekring.net/site/167/random
|
||||
no js webring,https://nojs.sugarfi.dev/prev.php?url=https://seirdy.one,https://nojs.sugarfi.dev/,https://nojs.sugarfi.dev/next.php?url=https://seirdy.one,https://nojs.sugarfi.dev/rand.php
|
||||
Fediring,https://fediring.net/previous?host=seirdy.one,https://fediring.net/,https://fediring.net/next?host=seirdy.one,https://fediring.net/random
|
||||
Loop (JS),https://graycot.com/webring/loop-redirect.html?action=prev,https://graycot.com/webring/,https://graycot.com/webring/loop-redirect.html?action=next,https://graycot.com/webring/loop-redirect.html?action=rand
|
||||
Loop (JS),https://graycot.com/webring/loop-redirect.html?action=prev,https://docs.graycot.dev/s/MFowZsw_F,https://graycot.com/webring/loop-redirect.html?action=next,https://graycot.com/webring/loop-redirect.html?action=rand
|
||||
YesterWeb,https://webring.yesterweb.org/noJS/index.php?d=prev&url=https://seirdy.one/,https://yesterweb.org/webring/,https://webring.yesterweb.org/noJS/index.php?d=next&url=https://seirdy.one/,https://webring.yesterweb.org/noJS/index.php?d=rand&url=https://seirdy.one/
|
||||
Retronaut,https://tonicfunk.neocities.org/,https://webring.dinhe.net/,https://members.vistaserv.net/jrs/index.html,null
|
||||
Hotline,https://hotlinewebring.club/seirdy/previous,https://hotlinewebring.club,https://hotlinewebring.club/seirdy/next,null
|
||||
|
|
|
|
@ -1,7 +1,7 @@
|
|||
DirectoryPath: "public"
|
||||
IgnoreDirs:
|
||||
- "search"
|
||||
CacheExpires: "168h" # seven days
|
||||
CacheExpires: "84h" # 3.5 days
|
||||
CheckFavicon: true
|
||||
EnforceHTML5: true
|
||||
IgnoreAltMissing: true # an empty alt makes presentation-role explicit, it's not a defect.
|
||||
|
@ -33,6 +33,8 @@ IgnoreURLs:
|
|||
- "git@git"
|
||||
- "http://[^/]*.onion"
|
||||
- "https://archive.is"
|
||||
- "https://archive.ph"
|
||||
- "https://archive.today"
|
||||
- "https://ogp.me/ns"
|
||||
- "https://seirdy.one/webmentions/"
|
||||
- "http://creativecommons.org/ns"
|
||||
|
@ -56,4 +58,7 @@ IgnoreURLs:
|
|||
- "https://gitweb.torproject.org/tor-browser.git/tree/browser/components/securitylevel/SecurityLevel.jsm.id=ffdf" # Seems to block htmltest; check manually
|
||||
- "https://lnk.dk" # blocks htmltest
|
||||
- "https://www.fastcompany.com/90759792/with-google-dominating-search-the-internet-needs-crawl-neutrality" # blocks htmltest
|
||||
- "https://faq.whatsapp.com/general/security-and-privacy/answering-your-questions-about-whatsapps-privacy-policy" # my DNS filters block this domain, cbf to work around it just for htmltest
|
||||
- "https://doi.org/10.1515/popets-2017-0023" # redirects to a different domain which tends to block requests. DOI is generally good about keeping links alive; it's kinda the point of the service.
|
||||
- "https://docs.graycot.dev/s/MFowZsw_F" # DNSSEC issue
|
||||
OutputDir: "linter-configs/htmltest"
|
||||
|
|
Loading…
Add table
Reference in a new issue