A Local SVG Sandbox
Scalable Vector Graphics (SVG) encapsulated within Base64-encoded data URIs present a unique security advantage when rendered natively via HTML `` elements. Under these specific deployment conditions, the underlying browser execution engine strictly prohibits the instantiation of embedded JavaScript routines, actively mitigating cross-site scripting (XSS) vectors that may otherwise be present in raw markup.
To analyze the exact structural markup of these vectors without invoking unsafe execution, a client-side sandbox has been designed. It iteratively scans the active DOM for images utilizing SVG data protocols, strips the preliminary URI identifier, and invokes the atob() function to dump the raw ASCII output [1].
The resulting markup is safely printed into preformatted code blocks. As verified by independent browser policy implementations, any malicious event handlers (such as onclick subroutines) embedded within the vectors are definitively neutralized when the image is structurally constrained in this manner [2].
Manually decoding a data URI payload
$ echo "PHN2Zz48Y2lyY2xlIHI9IjMwIi8+PC9zdmc+" | base64 --decode
<svg><circle r="30"/></svg>
Where this sandbox is a read-only demonstration, a companion utility performs the inverse operation interactively: the SVG Data URI Encoder accepts arbitrary markup and emits both the Base64 and the URL-encoded data URI — the latter typically yielding a smaller payload for predominantly-ASCII vector markup — alongside ready-to-deploy <img> and CSS declarations.
References
- Willison, S. "SVG Base64 Embedding Demo". Available: https://tools.simonwillison.net/svg-sandbox.
- Willison, S. "svg-sandbox.html Source Code". Available: https://github.com/simonw/tools/blob/main/svg-sandbox.html.