DZone
Web Dev Zone
Thanks for visiting DZone today,
Edit Profile
  • Manage Email Subscriptions
  • How to Post to DZone
  • Article Submission Guidelines
Sign Out View Profile
  • Post an Article
  • Manage My Drafts
Over 2 million developers have joined DZone.
Log In / Join
  • Refcardz
  • Trend Reports
  • Webinars
  • Zones
  • |
    • Agile
    • AI
    • Big Data
    • Cloud
    • Database
    • DevOps
    • Integration
    • IoT
    • Java
    • Microservices
    • Open Source
    • Performance
    • Security
    • Web Dev
DZone > Web Dev Zone > Securing Pixel Data: SVG and DOM Content

Securing Pixel Data: SVG and DOM Content

John Esposito user avatar by
John Esposito
·
Nov. 09, 11 · Web Dev Zone · Interview
Like (0)
Save
Tweet
4.09K Views

Join the DZone community and get the full member experience.

Join For Free

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:

  • cross-origin information leakage (as in an iframe)
  • path leakage via <input type="file">
  • fingerprinting by theme detection
  • css history sniffing via link's visitedness

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.

SVG Data (computing)

Opinions expressed by DZone contributors are their own.

Popular on DZone

  • What Developers Need to Know About Table Partition Pruning
  • 3 Best Tools to Implement Kubernetes Observability
  • 3 Reasons Why You Should Centralize Developer Tools, Processes, and People
  • Automation Testing vs. Manual Testing: What's the Difference?

Comments

Web Dev Partner Resources

X

ABOUT US

  • About DZone
  • Send feedback
  • Careers
  • Sitemap

ADVERTISE

  • Advertise with DZone

CONTRIBUTE ON DZONE

  • Article Submission Guidelines
  • MVB Program
  • Become a Contributor
  • Visit the Writers' Zone

LEGAL

  • Terms of Service
  • Privacy Policy

CONTACT US

  • 600 Park Offices Drive
  • Suite 300
  • Durham, NC 27709
  • support@dzone.com
  • +1 (919) 678-0300

Let's be friends:

DZone.com is powered by 

AnswerHub logo