Securely render SVG

Question

How can I securely render SVG documents in a media sharing application?

I think the same-origin policy might help a bit if I host the SVG documents on a separate domain and render them inside an <iframe> element, but I'm not sure the same-origin policy will catch something similar to <script>window.top.location = 'http://malic.io.us/pwnd'</script> in the SVG.

I have not been able to find anything via web search. Do you have any canonical best practices or is this an underdeveloped corner of the web specifications?

Answer 1

You should use the img-tag instead of iframe or object. If you do so, the following security restrictions are applied (independent of the origin of the file) to the SVG:

• JavaScript is disabled.
• External resources (e.g. images, stylesheets) cannot be loaded, though they can be used if inlined through BlobBuilder object URLs or data: URIs.
• :visited-link styles aren't rendered.
• Platform-native widget styling (based on OS theme) is disabled.

This information is documented here.

Answer 2

No final solution, but valuable information:

Paul Stone gave a talk 'Precision Timing - Attacking browser privacy with SVG and CSS' at OWASP AppSec Research 2013: High quality recording found here, medium quality recording found here.

Additionally, Fredrik Braun's talk 'Origin Policy Enforcement in Modern Browsers' might be of interest too: High quality recording found here, medium quality recording found here.