Form snapshots

A snapshot is a copy of one application form from a public page, stripped of everything that is not the form. It lives in apps/e2e/pages/snapshots/<slug>/ and the e2e suite runs detection and a fill against every folder there, so a new site becomes a test case by running one command.

Take oneCopy Anchor Link

pnpm snapshot https://job-boards.greenhouse.io/acme/jobs/123
pnpm snapshot https://jobs.lever.co/acme/<id>/apply --slug lever-acme
pnpm snapshot https://jobs.lever.co/acme/<id>/apply --force
pnpm snapshot https://example.com/careers/123 --click "text=Apply now"

The tool opens the page in headless chromium, waits for the network to go idle plus a settle delay, optionally clicks an apply button, takes the application area, sanitizes it, and writes two files:

• index.html: the sanitized form, one self contained page
• meta.json: the source host (no path), the date, the tool version, the root as a plain tag path (body > main > div > form, never an id or a class from the page) and the number of fields by type

Then read index.html once, check the site's terms, and commit the folder. The tool prints this reminder every time.

CheckCopy Anchor Link

pnpm snapshot --check

Refuses a snapshot folder that:

• holds anything but a regular index.html and meta.json (an extra file, a nested folder, a loose file next to the folders and every symlink are refused), or is not strict utf-8
• has a script, a frame, a style element, an event handler, a remote url, an email, a phone number, a hidden input with a value, a uuid, a jwt, a long hex string or an identifier that holds a long number, read with a tokenizer that knows a > can sit inside a quoted attribute
• is not exactly what the sanitizer would write for itself, so a hand edited page is refused
• has a meta.json with other keys than the five known ones, or a value of the wrong shape (the root must be a plain tag path)

An unreadable or missing snapshots folder is an error, not a pass. The same check runs in the e2e suite and in the lint job of CI.

Respecting the siteCopy Anchor Link

• Public pages only. The tool refuses a start url on a loopback, private, link local, ipv6 mapped, NAT64, 6to4 or other non public address or name unless --allow-local. Every spelling is judged after the url parser has normalized it, and every address a name resolves to is judged too
• Every request the page makes (page load, sub resource, fetch, xhr) is made by the tool from node, not by chromium: the tool checks the url, follows redirects itself and checks every Location before it requests it (at most 10 hops, a loop is an error, only http and https), and only then hands the final response to the page. Chromium therefore never follows a redirect, and the page sees the url it first asked for, not the final one
• The name is resolved by node when it connects, and every address it returns must be public, so a name that changes its answer between the check and the connection (dns rebinding) is refused too. With --allow-local only the page's own host and port is let through, no other private address is
• Websockets are refused outright, webrtc and quic are switched off, service workers are blocked, and a response is cut at 15 MB (100 MB per page) so a page that never stops cannot fill memory
• Not covered: this makes the page load from node's tls stack, not chromium's, so a site that fingerprints clients can answer differently.
• It identifies itself as skiffr-snapshot/<version> with the repo link and nothing personal, and it starts from a fresh browser profile with no cookies
• It only reads: any request that is not GET or HEAD is aborted, nothing is typed into the page, and the only click is the one you ask for with --click. If that selector is a submit button it is on you
• It does not read robots.txt and does not crawl. One url, one load, --delay between several

What the sanitizer guaranteesCopy Anchor Link

The output is rebuilt from the parsed page, not patched:

• no <script>, <noscript>, <style>, <link>, <meta>, <base>, <template>, <object>, <embed>, audio, canvas or comments
• no <iframe>, <img>, <video>, <picture> or <svg>: each becomes an empty span or div with data-skiffr-placeholder, keeping its size and its id, class, name, title and aria-*. Images of 2px or less (tracking pixels) are dropped
• no inline event handler, srcdoc, src, srcset, nonce, integrity or ping
• every style attribute is rebuilt from an allowlist of the properties the fill checks read (display, visibility, opacity, position, offsets, size, overflow, clip, clip-path, content-visibility, pointer-events), and the capture bakes those from the live page, so hidden and honeypot fields stay hidden without any stylesheet
• every href is #, a path shape on https://example.invalid, or kept as a short #anchor. Query strings, fragments, javascript:, data:, mailto: and tel: are gone. Every form action and formaction is #
• every hidden input has the value x and keeps its name. Typed or prefilled values are removed from inputs and textareas, checked and selected are reset
• emails become user@example.invalid, phone numbers 000-000-0000, uuids, jwts, long hex and base64 looking words in text become x. A uuid, jwt, hex string or number of six digits or more inside an id, name, class, for, option value or an aria reference becomes x1, x2 and so on, the same one everywhere it repeats, so labels and radio groups still line up. Tokens and long ids in data-* are dropped, as are ng-reflect-* and data-* attributes named after a user, candidate, applicant, email or phone. A link path segment after in, u, user, profile, candidate and similar, or starting with @, becomes x. data-qa, data-testid, data-automation-id, data-field and a few more structural ones stay. Analytics and token named data-* attributes are dropped
• the output is deterministic: sorted attributes, normalized whitespace, one element per line. Sanitizing it again gives the same text for what a browser serializes (malformed table markup is the known exception)

Before it writes anything the tool loads the result in chromium with the network off and refuses it if the page makes a request or logs a console error, and refuses it if the sanitizer changed the number of fields, and runs the check above on the written folder. A page that never finishes is abandoned after a deadline of three times --timeout plus the settle time.

What it does not guaranteeCopy Anchor Link

• Names inside identifiers (id="user-jane-smith", name="jane.smith", class="jane-smith"), numbers of five digits or fewer in an identifier (candidate-12345), a greeting like "Welcome, Jane Smith", ipv4 addresses and card numbers in text stay. Read the file
• Visible text is kept, apart from emails, urls and long token looking strings. A name or an address written in a label or a job description stays, and so does a name in alt, title or aria-label, or an @handle. --check passing does not mean there is no personal data: read the file
• A placeholder that is a two or three word capitalized name becomes Jane Doe, other personal looking placeholders are not detected
• Shadow DOM content and cross origin frames are not captured, and a frame becomes an empty placeholder
• Layout that comes from stylesheets is gone: the page is unstyled apart from the baked properties. Hiding done with a transform is not baked
• The ats adapters match on the host, so a snapshot served from the fixture server is detected by the generic rules, not the adapter of the site it came from
• A page that needs a login, a captcha or a bot challenge cannot be taken
• Copying a form is not permission to publish it. Check the site's terms before committing a snapshot