Over a million developers have joined DZone.
{{announcement.body}}
{{announcement.title}}

Securing Pixel Data: SVG and DOM Content

DZone's Guide to

Securing Pixel Data: SVG and DOM Content

· Web Dev Zone
Free Resource

Learn how to build modern digital experience apps with Crafter CMS. Download this eBook now. Brought to you in partnership with Crafter Software

To show pixels or not to show pixels? -- to web applications, that is. This is a question that impacts both usability and security, and so concerns anyone interested in emerging HTML standards.

Recently Robert O'Callahan listed a few reasons NOT to expose web page pixel data to web applications. He mentioned these dangers:

Robert's original post hinted at a Gecko workaround -- which only Gecko's heavy restrictions make possible, insofar as in Gecko, SVG can't be used to pass data from anywhere but the same document. 

Later Robert posted a follow-up explaining in detail, with an example, how to render HTML elements into a canvas. The key is SVG's foreignObject, a key element of SVG's extensibility. Jumping straight to an application -- here's how Robert codes this example:

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var data = "data:image/svg+xml," +
           "<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'>" +
             "<foreignObject width='100%' height='100%'>" +
               "<div xmlns='http://www.w3.org/1999/xhtml' style='font-size:40px'>" +
                 "<em>I</em> like <span style='color:white; text-shadow:0 0 2px blue;'>cheese</span>" +
               "</div>" +
             "</foreignObject>" +
           "</svg>";
var img = new Image();
img.src = data;
img.onload = function() { ctx.drawImage(img, 0, 0); }

So this works, but isn't it still insecure?

No, because Firefox's specific SVG restrictions directly address every security worry mentioned in the earlier post. (Though the issue is beginning to remind me of the old TEMPEST problem, which seemed irremediably disturbing in my CRT-and-X-Files days.)

The image/data interaction vs. security debate is ongoing, though, and comments on Robert's two blog posts (1,2) are worth reading. Maybe consider these problems as you think about how you'll be developing in our HTML5 future.

Crafter is a modern CMS platform for building modern websites and content-rich digital experiences. Download this eBook now. Brought to you in partnership with Crafter Software.

Topics:

Opinions expressed by DZone contributors are their own.

The best of DZone straight to your inbox.

SEE AN EXAMPLE
Please provide a valid email address.

Thanks for subscribing!

Awesome! Check your inbox to verify your email so you can start receiving the latest in tech news and resources.
Subscribe

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}