Skip to main content
SimilarExport ZIP
100%

https://web.archive.org/web/20170209205035/http://www.soufeel.com/

✓ Published0🌍 Public
NN0taN3rd
Last edited Jan 6, 2018
Created on Jan 5, 2018

This visualization tracks the client-side rewriting of a single webpage archived in the Wayback Machine, logging every URL modification made by JavaScript functions. It tallies 357 total rewrites and 13 HTTP 404 errors, breaking down calls by API (such as `Element.setAttribute`, `Node.appendChild`, `Element.innerHTML`, and `document.write`) and by element and attribute type, with counts for each combination. Raw server logs and rewrite logs are appended, showing specific requests and error responses. The data is rendered as plain text tables and log excerpts, providing a quantitative audit of archive-injected behavior.

AI-generated description

https://web.archive.org/web/20170209205035/http://www.soufeel.com/

Page In Archive

Patching Global JS To Provide Client Side Rewriting

Total Rewrites: 357

Total 404: 13

Youtube Video Of Client Side Rewrites In Action

Client Side Rewrites Provided

  1. fetch
  2. Request.{constructor}
  3. XMLHttpRequest.{open}
  4. document.{domain, write, writeln}
  5. ServiceWorkerContainer.{register}
  6. navigator.{sendBeacon}
  7. history.{pushState, replaceState}
  8. Element.{setAttribute, getAttribute, insertAdjacentHTML}
  9. Node.{appendChild, replaceChild, insertBefore}
  10. HTMLElement.{innerHTML, outterHTML}
  11. HTMLIFrameElement.{srcdoc}
  12. HTMLStyleElement.{textContent}
  13. Properties get and set {style, href, src, srcset, poster, data, content} with rewrite modifier corresponding to element {cs_, im_, if_, js_, oe_, mp_}

Client Side Rewriting

  1. Identification can be done automatically
  2. Rewriter code can be automatically generated

Page On Live Web

Waiting Till Network Idle And Logging Potential JS Rewrites

Total Potential Rewrites 332

element.setAttribute calls

element attribute count
LINK href 4
IMG src 4
A href 4
SCRIPT src 10
IFRAME src 2

element.attribute = x

element attribute count
SCRIPT src 27
IMG src 70
IFRAME src 8
A href 30
LINK href 1

someElement.innerHTML = string

element added times added
A 53
IMG 13

document.write calls

element added times added
IMG 2

document.createElement calls

element times created
SCRIPT 44
IFRAME 8
LINK 5
A 32

XMLHttpRequest

Method Request Count
POST 5
GET 10

Similar vizzes

Loading thumbnail…

Gist 2d272134b57b02eb8cdd0c5904249591

This example tests the archival fidelity of a web page by loading a series of images and scripts that mimic dynamic behavior, including DOM manipulation, AJAX requests, and delayed updates. It uses JavaScript’s `XMLHttpRequest` to fetch remote images and replaces them via base64 data URLs, while `setTimeout` and scroll events trigger asynchronous content changes. The page is rendered within an iframe by the pywb web archiving tool, with a banner and rewrite layer applied. The visualization demonstrates how archived sites handle live interactions and resource loading over time.

NN0taN3rd
61% match
Loading thumbnail…

In Archive, Alexa, Twitter Sample

This visualization presents a comparative analysis of the DOM and network complexity of seven popular websites, based on JSON snapshots captured by a web crawler. Each site is represented as a distinct point, with its position determined by aggregated metrics such as total node count, the number of clickable elements, and the diversity of resource types loaded. The tool, built with React, ingests these raw JSON files and uses a custom layout algorithm to project the multi-dimensional data onto a two-dimensional plane. Hovering over a point reveals a detailed breakdown of a site's specific DOM attributes, framework detection results, and the distribution of network requests by MIME type.

NN0taN3rd
61% match
Loading thumbnail…

https://jsfiddle.net/developit/q435c6mL/

This example implements a live DOM audit logger that intercepts and records modifications to page elements as they occur. It demonstrates real-time logging of property changes (textContent, innerHTML, className) and node insertions/removals, displaying a formatted trail of each operation with previous and current values. The visualization uses the DOMAuditLogger library, which patches native Element and Node prototype methods to capture events, and renders the audit entries in a scrolling view with color-coded message types.

JJastor11
59% match
Loading thumbnail…

pywb proxy mods

This visualization shows the internal logic of the pywb web archiving proxy, displaying how HTML, CSS, and JavaScript content is rewritten during replay. The animation illustrates the code paths for rewriting HTML tags and attributes via the `HTMLRewriterMixin`, and content sanitization through `RewriteContent` using regex patterns for meta refresh and charset detection. The wombat.js script implements client-side URL rewriting with a JavaScript state machine that handles absolute, relative, and proxy-mode URL transformations. The gist demonstrates the interaction between these Python and JavaScript modules in the pywb rewriting pipeline, emphasizing the regex-based parsing and URL manipulation strategies.

NN0taN3rd
59% match
Loading thumbnail…

CS 891 Web Archiving Seminar

This visualization demonstrates the process of web archiving by showing the WARC file records produced when using `wget` to archive two websites: `http://example.com` and the React Router documentation. The code uses `wget` with extensive arguments including `--mirror`, `--warc-cdx`, and `--page-requisites` to capture complete page snapshots. The example displays the resulting WARC file structure, containing request, response, metadata, and resource records, along with a shell script that orchestrates the archiving workflow and manages the Wayback Machine collections.

NN0taN3rd
57% match
Loading thumbnail…

Still Drinking Gin And Juice

This example plays a trick on the Wayback Machine by loading a hidden iframe that captures the archived page’s React and ReactDOM libraries, then re-mounting a new React component inside that iframe. The visualization itself is not yet defined in the provided snippet, but the code sets up a full-screen canvas-driven animation framework using React and the browser’s native canvas and animation APIs. Images of frogs and a banner are fetched from the Internet Archive’s geocities.com captures, hinting at a playful, retro-themed visual collage. The page also manipulates browser history to disguise its origin and hides the archive’s toolbar.

NN0taN3rd
56% match
Loading thumbnail…

Gist af2ebfb61ff58df18497b60494e7ecc0

This example visualizes the co-occurrence of JavaScript libraries across top websites, mapping which frameworks appear together on the same pages. It uses a force-directed graph layout to position library nodes, with edges representing shared site usage. The data is collected via concurrent HTTP requests using `FuturesSession` and `ProcessPoolExecutor`, parsed from Libscore API responses and Wappalyzer HTML, then aggregated into a combined JSON dataset. The visualization is built with React, rendering the network of library relationships derived from real site rankings and script tags.

NN0taN3rd
55% match
Loading thumbnail…

Gist 7233762

This example shows a JavaScript application skeleton converted to use AJAX, with the updated files provided as a gist. The code demonstrates an asynchronous data-loading pattern, fetching external resources via `XMLHttpRequest` or a similar AJAX mechanism. It relies on standard browser APIs for handling responses and updating the page content dynamically. The visualization aspect is minimal, focusing instead on the structural change from a static app to one that retrieves data on demand. The author lists the modified files and includes instructions for downloading the original skeleton, making the gist a practical exercise in refactoring for asynchronous behavior.

EElaineYu
54% match