# Everything You Embed — narration script

Runtime 5:36. Timecodes are when each chapter starts; the film's animation is keyed to these cue times, so a recorded voice-over should keep each line near its timecode.

## 0:00 · The same loader

- `0:01` The loader that fetches the cat photo also fetches the keylogger.
- `0:06` To the browser, every URL in a page is a request to make and a response to use. A picture is drawn. A stylesheet is applied. A script is run, with all the power the page itself has.
- `0:22` The browser does not ask whether you meant it. It trusts the page, and the page trusted everything it named.
- `0:31` So everything you embed is a decision. This film follows five ways that decision goes wrong, on Demo Company's pages, and the line or two of HTML that answers each one.

## 0:46 · Whose server?

- `0:47` Some of a page comes from your own server: the first party. Some comes from someone else's: a third party. A component library from a CDN. An analytics tag. A photo from a stock site.
- `1:03` 92% of pages load something from a third party. Each one is another server to reach, another connection to set up, and another organization you are trusting.
- `1:16` You don't control its speed, its uptime, or what it sends tomorrow. And the browser won't even show you its real sizes unless that server agrees to share them.

## 1:30 · When it's slow

- `1:31` A slow image is an inconvenience. When it finally arrives, though, everything below it jumps, and the reader loses their place.
- `1:42` The answer is two numbers. Give the image its width and height, and the browser saves the space before a single byte arrives. Add loading="lazy" to images below the fold, and they stop competing with what the reader can see.
- `1:59` A slow script is worse. A plain script tag in the head stops the page until that script has downloaded and run. If someone else's server is having a bad day, your page is blank.
- `2:15` Add defer, and the script downloads alongside the page and runs after it. The reader gets your content, whatever the other server is doing.

## 2:27 · When it's gone

- `2:27` Sometimes the file isn't there at all. The server answers 404, and the picture never comes.
- `2:36` What's left is whatever you wrote around it. Good alt text tells the reader what should be there. A width and height keep the page from collapsing.
- `2:48` The same holds for scripts. If the page works without the script, a missing script costs a feature, not the page. That is progressive enhancement, doing its job on an ordinary Tuesday.

## 3:02 · When it watches

- `3:02` Page eleven loads a script that writes down every key you press, every click, and where your mouse goes. Here it only prints them to the console. It could just as easily send them somewhere.
- `3:18` A script on your page runs with your page's full power. It sees what the reader types, including passwords. Nothing in HTML gives it less.
- `3:31` And a script you trusted can change. In 2024, a widely used script changed owners and began serving harmful code to thousands of sites that still loaded it, without any of them changing a line.
- `3:47` So load as few scripts as you can, and read the ones you load. A Content Security Policy header limits where scripts may come from and where the page may send data.

## 4:02 · When it turns hostile

- `4:02` Page twelve waits three seconds, then covers everything with a message of its own. A script that can draw on your page can draw over it.
- `4:13` If that script came from someone else's server, the server can change the file at the same address, and every page that loads it gets the new version.
- `4:25` Subresource Integrity pins the exact bytes. The script tag carries a hash of the file you checked, and the browser refuses any file that doesn't match.
- `4:38` A changed file then fails safely: one feature missing, instead of your page working for someone else.

## 4:47 · Embed on purpose

- `4:47` Slow, blocked, missing, watching, hostile. None of these needed an attacker on your server. They only needed you to embed something.
- `4:59` Each fix is a line or two of HTML or one header: sizes, defer, alt text, a policy, a hash. Cheap, once you know to write them.
- `5:14` Open Demo Company's broken pages beside their fixed twins, and watch the Network panel tell both stories.
- `5:23` Everything you embed works for you, or against you, on someone else's screen. Choose it on purpose.