SVG Security

From W3C Wiki

Using SVG

SVG can be fetched, embedded and used in different ways.

SVG as image

Markup languages like HTML (and SVG itself) can reference SVG as an image with the <img> tag (HTML namespace) or <image> tag (HTML or SVG namespace).

If an SVG file is fetched as image, then certain requirements apply to this document:

  • The SVG document is not allowed to fetch any resources. This also applies to scripts, stylesheets or images.
  • Fonts shouldn't be loaded as well. The situation in UAs seems to still be unclear though.
  • Scripts must not be executed.
  • The style attribute and the style element can style the document. Restricting these is unpractical. A lot of content already relies on CSS styling and would be broken by changing any default setting. Even though SVG has presentation attributes, these are still implemented as a stylesheet with slightly higher hierarchy than UA styles. UA styles must be applied in certain cases as well.
  • SVG Animations and CSS animations are still allowed. This also allows conditions where animation wait for other animations to be finished.
  • Hit testing must be disabled at all times.
  • Event listeners must be disabled at all times.

SVG as resource document

CSS properties like fill, stroke, filter, clip-path, mask-image, marker-start, marker-mid, marker-end can use IRI references to certain SVG elements like <linearGradient>, <radialGradient>, <pattern>, <filter>, <clipPath>, <mask> or <marker>. Some element can reference other elements by IRI as well, such as <use> but also <linearGradient> or <pattern>.

Most CSS properties use url() to reference SVG resources. In certain situations it is not clear if a url() references an CSS image or a SVG resource. Example:

mask-image: url(image.png); // references an image mask-image: url(image.svg#mask); // references an SVG resource

but

mask-image: url(image.png#mask); // references a resource or image? mask-image: url(image.svg); // references an image?

For this reason both, SVG image and SVG resource must be fetched with the same policies. The one with more restrictions preferred. Therefore, SVG resources have the same restrictions as SVG images.

SVG as document embedded with <iframe>, <embed> or <object>

SVG files can be referenced and embedded by the <iframe>, <embed> or <object> tags in HTML. For each reference the SVG file has its own document and context and shall not be allowed to share the context with the embedding host document. On the other hand, blobs and post messages can be shared between embedded SVG document and host document.

SVG documents can have stylesheets that reference external resources and therefore fetch resources. So far there are no restrictions defined in SVG. Filter Effects is the first to define the corssorigin attribute on <feImage>. Other elements like <image> still don't have this possibility.

There are no restrictions defined for Styling or Scripts. However, implementations like Firefox do just allow referencing resources with the same origin as the SVG document.

Inline SVG

Inline SVG describes the use of the <svg>tag directly in HTML content. This was possible in XHTML by specifying the namespace. In HTML5, the namespaces are set by the parser already. The user does not need to deal with namespaces in markup.

An inline SVG document shares the same context as the host HMTL document. There is no security model defined for inline SVG yet. Input is welcome.

Links

Retrieved from "https://www.w3.org/wiki/index.php?title=SVG_Security&oldid=73623"