373: Script Injection with Cloudflare Workers

CodePen Radio

This week Shaw and Chris dig into some deepnerd tech stuff: manipulating HTML. In a perfect world, perhaps we wouldn't need to, but today, and even moreso in the foreseeable future of CodePen, we need to do a smidge of HTML manipulation on the HTML that you write or that is generated by code you write on CodePen. A tiny example is removing the autofocus attribute when a Pen in shown in a grid view . A more significant example is that we need to inject some of our own JavaScript into your Pen, to power features of CodePen itself, like the console, which receives information from your rendered page (like logs, errors, etc) and can push commands to execute as well. </p> <p>So how do we inject a <script> into absolutely 100% arbitrary HTML? Well, it's tricky. We're starting to do it with <a href="https://developers.cloudflare.com/workers/">Cloudflare Workers</a> and the <a href="https://developers.cloudflare.com/workers/runtime-apis/html-rewriter/">HTMLRewriter</a> stuff they can do. Even then, it's not particularly easy, with lots of edge cases. Thank gosh for <a href="https://miniflare.dev/">Miniflare</a> for the ability to work on this stuff locally and write tests for it. </p> <h3 class="wp-block-heading" id="h-time-jumps">Time Jumps</h3>