Over a million developers have joined DZone.

Securing Pixel Data: SVG and DOM Content

· Web Dev Zone

Easily build powerful user management, authentication, and authorization into your web and mobile applications. Download this Forrester report on the new landscape of Customer Identity and Access Management, brought to you in partnership with Stormpath.

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>" +
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.

The Web Dev Zone is brought to you by Stormpath—offering a complete, pre-built User Management API for building web and mobile applications, and APIs. Download our new whitepaper: "Build Versus Buy: Customer Identity Management for Web and Mobile Applications".


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

{{ parent.tldr }}

{{ parent.urlSource.name }}