Email or username:

Password:

Forgot your password?
Top-level
Simon Willison

I'm wondering if I can give untrusted authors the ability to go wild with custom SVG in a framed-off fixed size area of a web page, without breaching the security of the wider page or application

18 comments
Joe Crawford

@simon SVG can do a lot, but perhaps a Web Component that would only hold a single svg would sequester such an SVG and prevent it from attempting to suck in information about the enclosing page.

Simon Willison

This is great! This Cloudflare Rust library includes a detailed test suite that tells me everything I wanted to know mastodon.theorangeone.net/@jak

Simon Willison

... and it looks like that means I can do an img tag with an src that points to a base64 encoded SVG object and any nasty JavaScript etc will be disabled for me - here's an example which seems to demonstrate that working gistpreview.github.io/?03f0076

Screenshot showing three SVG examples demonstrating base64 embedding. Contains heading "SVG Base64 Embedding Demo" followed by three panels: 1) "Simple Sun SVG" showing a yellow circle with rays, labeled "A basic sun shape with rays" 2) "Pelican SVG" showing a gray stylized bird shape, labeled "A stylized pelican shape" 3) "SVG with JavaScript (ignored)" showing a pink square with text "JS Ignored", labeled "SVG with JavaScript that gets ignored when embedded as an image". Footer note states "When SVGs are embedded using img tags with base64 data URIs, any JavaScript or interactive elements are safely ignored by the browser."
Kevin Marks

@simon right, an img tag sandboxes them. What I do for svgshare.com is both display them as img and also run the svg through python html5lib and remove any script elements. (I also inline it in the upload dialogue so anyone trying to xss me does it to themselves instead). The other approach is what feedparser does and whitelist svg and html elements.

sage

@simon The main downside with this approach is that it doesn't let you style the SVG paths with CSS, which may or may not be necessary depending on your use case

sayrer

@simon you can try stuff like github.com/cure53/DOMPurify. I am not sure that is the best one, but they exist (I wrote one, once upon a time).

Marco Rogers

@simon sounds like you want a sandboxed iframe?

Simon Willison

@polotek yeah probably! I'm still trying to work up my confidence in those, detailed and comprehensive documentation on exactly what the sandbox attribute does has been hard to come by

Terence Eden

@simon the JS in an SVG cannot interact with anything outside of itself.
So while an SVG can do all sorts of crazy things, it can't escape its sandbox.

Jake Archibald

@simon <iframe sandbox> is useful here. You can even allow JavaScript but have it run in an opaque origin.

Simon Willison

@jaffathecake I'm desperately keen on learning the true ins and outs of that, but I've found detailed documentation (including browser support) on all of the options you can stuff in that sandbox attribute frustratingly difficult to locate

Simon Willison

@jaffathecake it's the best I've seen but it still leaves me with so many questions... how good is browser support for each of those allowX things? What do browser security experts advise in terms of using them?

I'm really paranoid :/

Jake Archibald

@simon the browser support for the various allow features is in the table at the end of the page

Frederik Braun �

@simon @jaffathecake if you just want the SVG displayed, put them in an <img> tag. Otherwise, your favorite sanitizer library DOMPurify has great SVG support. (Iframe sandbox works really great too!!)

Go Up