Simon Willison’s Weblog

OpenStreetMap embed URL. I just found out OpenStreetMap have a "share" button which produces HTML for an iframe targetting https://www.openstreetmap.org/export/embed.html, making it easy to drop an OpenStreetMap map onto any web page that allows iframes.

As far as I can tell the supported parameters are:

• bbox= then min longitude, min latitude, max longitude, max latitude
• marker= optional latitude, longitude coordinate for a marker (only a single marker is supported)
• layer=mapnik - other values I've found that work are cyclosm, cyclemap, transportmap and hot (for humanitarian)

Here's HTML for embedding this on a page using a sandboxed iframe - the allow-scripts is necessary for the map to display.

<iframe
  sandbox="allow-scripts"
  style="border: none; width: 100%; height: 20em;"
  src="https://www.openstreetmap.org/export/embed.html?bbox=-122.613%2C37.431%2C-122.382%2C37.559&amp;layer=mapnik&amp;marker=37.495%2C-122.497"
></iframe>

Thanks to this post I learned that iframes are rendered correctly in NetNewsWire, NewsExplorer, NewsBlur and Feedly on Android.

# 25th November 2024, 7:29 pm / sandboxing, iframes, gis, openstreetmap

Cerebras Coder (via) Val Town founder Steve Krouse has been building demos on top of the Cerebras API that runs Llama3.1-70b at 2,000 tokens/second.

Having a capable LLM with that kind of performance turns out to be really interesting. Cerebras Coder is a demo that implements Claude Artifact-style on-demand JavaScript apps, and having it run at that speed means changes you request are visible within less than a second:

Steve's implementation (created with the help of Townie, the Val Town code assistant) demonstrates the simplest possible version of an iframe sandbox:

<iframe
    srcDoc={code}
    sandbox="allow-scripts allow-modals allow-forms allow-popups allow-same-origin allow-top-navigation allow-downloads allow-presentation allow-pointer-lock"
/>

Where code is populated by a setCode(...) call inside a React component.

The most interesting applications of LLMs continue to be where they operate in a tight loop with a human - this can make those review loops potentially much faster and more productive.

# 31st October 2024, 10:39 pm / val-town, llms, react, iframes, ai-assisted-programming, generative-ai, sandboxing, ai, steve-krouse, llama, cerebras

How Anthropic built Artifacts. Gergely Orosz interviews five members of Anthropic about how they built Artifacts on top of Claude with a small team in just three months.

The initial prototype used Streamlit, and the biggest challenge was building a robust sandbox to run the LLM-generated code in:

We use iFrame sandboxes with full-site process isolation. This approach has gotten robust over the years. This protects users' main Claude.ai browsing session from malicious artifacts. We also use strict Content Security Policies (CSPs) to enforce limited and controlled network access.

Artifacts were launched in general availability yesterday - previously you had to turn them on as a preview feature. Alex Albert has a 14 minute demo video up on Twitter showing the different forms of content they can create, including interactive HTML apps, Markdown, HTML, SVG, Mermaid diagrams and React Components.

# 28th August 2024, 11:28 pm / claude-artifacts, anthropic, claude, gergely-orosz, ai, llms, alex-albert, sandboxing, iframes, security, ai-assisted-programming

htmz (via) Astonishingly clever browser platform hack by Lean Rada.

Add this to a page:

<iframe hidden name=htmz onload="setTimeout(() => document.querySelector( this.contentWindow.location.hash || null)?.replaceWith( ...this.contentDocument.body.childNodes ))"></iframe>

Then elsewhere add a link like this:

<a href="/flower.html#my-element" target=htmz>Flower</a>

Clicking that link will fetch content from /flower.html and replace the element with ID of my-element with that content.

# 20th February 2024, 1:21 am / iframes, html, javascript

viewport-preview (via) I built a tiny tool which lets you preview a URL in a bunch of different common browser viewport widths, using iframes.

# 26th July 2022, 12 am / css, testing, projects, mobile, iframes

lite-youtube-embed (via) Handy Web Component wrapper around the standard YouTube iframe embed which knocks over 500KB of JavaScript off the initial page load—I just added this to the datasette.io homepage and increased the Lighthouse performance score from 51 to 93!

# 8th March 2022, 9:13 pm / web-components, paul-irish, youtube, iframes, web-performance

“Likejacking” Takes Off on Facebook. The Facebook Like button is vulnerable to Clickjacking, and is being widely exploited. Since Likes show up in your Facebook stream, it’s an easy attack to make viral. The button is implemented on third party sites as an iframe, which would seem to me to be exploitable by design (just make the iframe transparent in the parent document and trick the user in to clicking in the right place). I can’t think of any way they could support the embedded Like button without being vulnerable to clickjacking, since clickjacking prevention relies on not allowing your UI elements to be embedded in a hostile site while the Like button’s functionality depends on exactly that.

# 3rd June 2010, 10:01 am / clickjacking, facebook, iframes, likebutton, likejacking, phishing, security, recovered

Busting frame busting: a study of clickjacking vulnerabilities at popular sites (via) Fascinating and highly readable security paper from the Stanford Web Security Research group. Clickjacking can be mitigated using framebusting techniques, but it turns out that almost all of those techniques can be broken in various ways. Fun examples include double-nesting iframes so that the framebusting script overwrites the top-level frame rather than the whole window, and a devious attack against the IE and Chrome XSS filters which tricks them in to deleting the framebusting JavaScript by reflecting portions of it in the framed page’s URL. The authors suggest a new framebusting snippet that should be more effective, but sadly it relies on blanking out the whole page in CSS and making it visible again in JavaScript, making it inaccessible to browsers with JavaScript disabled.

# 24th May 2010, 11:40 am / clickjacking, framebusting, iframes, javascript, security, xss, recovered

premasagar’s sandie. “Sandie is a simple method for loading external JavaScript files into a page without affecting the global scope, to avoid collisions between conflicting scripts”—works by loading the script in an invisible iframe (hence a new global scope) and then passing a reference to a callback function in the parent page.

# 6th May 2010, 8:37 pm / javascript, premasagar-rose, sandie, recovered, iframes, sandboxing

JSLitmus. “A lightweight tool for creating ad-hoc JavaScript benchmark tests”. Includes an ingenious hack for graphing the results—it generates a Google Chart, then provides a TinyURL for viewing that chart in the future. The TinyURL is generated by pointing an inconspicuous iframe at the TinyURL API and letting the user copy-and-paste the resulting shortened URL directly out of the iframe.

# 28th October 2009, 5:11 pm / jslitmus, benchmarking, javascript, tinyurl, google-charts, iframes

Why an OAuth iframe is a Great Idea. Because users should a) learn to be phished and b) not even be given the option to avoid being phished if they know what they’re doing? No, no and thrice no. If you want to improve the experience, use a popup window so the user can still see the site they are signing in to in the background.

# 16th July 2009, 8:29 pm / oauth, security, phishing, iframes

Ehy IE8, I Can Has Some Clickjacking Protection? (via) IE8 has built-in protection against clickjacking, but it’s opt-in (with a custom HTTP header) and IE only. It turns out the usual defence against clickjacking (using framebusting JavaScript) doesn’t work in IE as it can be worked around with a security=“restricted” attribute on an iframe.

# 29th January 2009, 1:39 pm / clickjacking, ie, ie8, http, security, javascript, iframes

Quickchoice—a Speed Dial clone (via) Lovely demonstration of the CSS transform property, as supported by modern browsers. The magic is all in the iframe { transform: scale(0.25, 0.25) translate(-1200px, -900px) }

# 23rd December 2008, 12:49 pm / speeddial, javascript, css, csstransform, iframes

FB App Canvas Pages: I Think I’d Use IFrames. Facebook’s Charlie Cheever explains the difference between FBML canvas pages, iframe pages and XFBML when building Facebook apps. I’m always surprised at APIs that load untrusted content in an iframe, as it seems like an invitation for frame-busting phishing attacks.

# 2nd October 2008, 2:39 pm / facebook, charlie-cheever, framebusting, iframes, security, phishing, fbml, xfbml, facebookapi

This Week in HTML 5—Episode 7: Clickjacking. Clickjacking is when a third party site is embedded in an iframe with opacity 0 and positioned such that a click on the page actually hits a button on the now invisible third party site. Mark Pilgrim explains how the NoScript site uses this in a non malicious way to for the “install now!” button.

# 1st October 2008, 1:48 am / noscript, clickjacking, mark-pilgrim, phishing, security, iframes, opacity, html5

The Future of Comet: Part 1, Comet Today. Absolutely the best summary I’ve seen of all of the current Comet techniques in one place.

# 11th December 2007, 1:13 pm / comet, jacob-rus, longpolling, javascript, ajax, xmlhttprequest, iframes

Background Iframe (bgiframe). jQuery plugin that inserts an iframe shim behind an element in IE, allowing the element to be positioned overlapping a select box without the select box showing through.

# 9th August 2007, 2:54 pm / jquery, internet-explorer, javascript, ie, select, brandon-aaron, iframes, plugins

Firefox promiscuous IFRAME access bug. Lets malicious sites “display disruptive or misleading contents in the context of an attacked site” and intercept keystrokes! The demo worked in Camino 1.5 as well. Avoid using Gecko-based browsers until this is patched?

# 6th June 2007, 10 am / michal-zalewski, camino, firefox, security, iframes

Cross Domain Frame Communication with Fragment Identifiers. Google are using this crazy iframe/fragment trick for their new Mapplets API.

# 31st May 2007, 2:15 pm / google-maps, google, hack, javascript, iframes