Over a million developers have joined DZone.

Securing Pixel Data: SVG and DOM Content

· Web Dev Zone

Learn why developers are gravitating towards Node and its ability to retain and leverage the skills of JavaScript developers and the ability to deliver projects faster than other languages can.  Brought to you in partnership with IBM.

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.

Make the transition to Node.js if you are Java, PHP, Rails or .NET developer with these resources to help jumpstart your Node.js knowledge plus pick up some development tips.  Brought to you in partnership with IBM.

Topics:

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 }}