CodePen Radio

373: Script Injection with Cloudflare Workers


Listen Later

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>

...more
View all episodesView all episodes
Download on the App Store

CodePen RadioBy CodePen Blog

  • 4.9
  • 4.9
  • 4.9
  • 4.9
  • 4.9

4.9

85 ratings


More shows like CodePen Radio

View all
The Joe Rogan Experience by Joe Rogan

The Joe Rogan Experience

229,674 Listeners

Pivot by New York Magazine

Pivot

9,724 Listeners

Syntax - Tasty Web Development Treats by Wes Bos & Scott Tolinski - Full Stack JavaScript Web Developers

Syntax - Tasty Web Development Treats

985 Listeners

Darknet Diaries by Jack Rhysider

Darknet Diaries

8,077 Listeners

Prof G Markets by Vox Media Podcast Network

Prof G Markets

1,480 Listeners