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?


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.

| improve this answer | |

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.

| improve this answer | |

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.