Web Applications 101 | curiosities.dev

How does a page embed content from other domains?

Method 1: Loading a third party script that modifies the page.

<html>
    <!-- Page Content -->
    <div id="widget"></div>
    <script src="https://third-party.com/widget.js"></script>
</html>

Method 2: Loading a third party resource in an iframe.

<html>
    <!-- Page Content -->
    <iframe src="https://third-party.com/widget.js"></iframe>
</html>

How do you stay logged in w/o re-entering password?

HTTP cookies!

Alice’s browser sends a GET request to http://www.example.com/.
http://www.example.com responds with a Set-Cookie instruction containing a token representing the logged in state, e.g. session-id=....
Whenever Alice visits a page at www.example.com, the browser sends the session-id cookie with the request.

How does DoubleClick track users from site to site?

Third-party cookies

<html>
    <!-- Page Content -->
    <img src="https://tracker.com/pixel" width="0" height="0" />
</html>

Browser makes a request to tracker.com, sends/receives cookie specific to tracker.com.

By loading content dynamically with JavaScript

var xhttp = new XMLHttpRequest();
xhttp.open("GET", "/widget");
xhttp.send();

xhttp.onreadystatechange = function() {
    // Perform action when response is received
    document.getElementById("widget").innerHTML = xhttp.responseText;
};

Note: The Document Object Model

Everything you see (and don’t see) on a page is internally represented as a tree.
Scripts manipulate the page by traversing and modifying the tree.

How does an ad-blocker modify content on the page?

Strategy 1: Block network requests to ad serving domains. Either browser extension (e.g. uBlock Origin) or network-based (PiHole). The massive list of ad serving domains/elements is crowd-sourced.

Strategy 2: Modify page CSS to make the ads invisible. Browser extension only

What if browser vendors can’t agree on how to render content?

That’s why we have Web Standards.

Can a script in one tab affect content in another tab?

Yes, here’s a demo. In a dev console, do:

let w = window.open();
w.document.write("Hello, new tab");