SVG taint fix, and additional taint testing options

Author: niklasvh

src/Preload.js

@@ -32,7 +32,7 @@ html2canvas.Preload = function(element, opts){
         return (img.crossOrigin !== undefined);
     })(new Image()),
     timeoutTimer;
-    
+
     link.href = window.location.href;
     pageOrigin  = link.protocol + link.host;
     opts = opts || {};
@@ -44,8 +44,9 @@ html2canvas.Preload = function(element, opts){
     element = element || doc.body;
 
     function isSameOrigin(url){
-        link.href = url;
-        var origin = link.protocol + link.host;
+        link.href = url;  
+        link.href = link.href; // YES, BELIEVE IT OR NOT, that is required for IE9 - http://jsfiddle.net/niklasvh/2e48b/
+        var origin = link.protocol + link.host;              
         return (origin === pageOrigin);
     }
 
@@ -240,7 +241,7 @@ html2canvas.Preload = function(element, opts){
                     imageObj = images[src] = { img: img };
                     images.numTotal++;
                     setImageLoadHandlers(img, imageObj);
-                } else if ( isSameOrigin( src ) || options.allowTaint ===  true ) {
+                } else if ( isSameOrigin( src ) || options.allowTaint ===  true ) {                    
                     imageObj = images[src] = { img: img };
                     images.numTotal++;
                     setImageLoadHandlers(img, imageObj);

src/Renderer.js

@@ -11,7 +11,8 @@ html2canvas.Renderer = function(parseQueue, opts){
     var options = {
         "width": null,
         "height": null,
-        "renderer": "canvas"
+        "renderer": "canvas",
+        "taintTest": true // do a taint test with all images before applying to canvas
     },
     queue = [],
     canvas,
@@ -81,8 +82,12 @@ html2canvas.Renderer = function(parseQueue, opts){
         a,
         newCanvas,
         bounds,
+        testCanvas = document.createElement("canvas"),
+        hasCTX = ( testCanvas.getContext !== undefined ),
         storageLen,
         renderItem,
+        testctx = ( hasCTX ) ? testCanvas.getContext("2d") : {},
+        safeImages = [],
         fstyle;
 
         canvas.width = canvas.style.width = (!usingFlashcanvas) ? options.width || zStack.ctx.width : Math.min(flashMaxSize, (options.width || zStack.ctx.width) );
@@ -136,6 +141,21 @@ html2canvas.Renderer = function(parseQueue, opts){
                             }else if(renderItem.name === "drawImage") {
 
                                 if (renderItem['arguments'][8] > 0 && renderItem['arguments'][7]){    
+                                    if ( hasCTX && options.taintTest ) {
+                                        if ( safeImages.indexOf( renderItem['arguments'][ 0 ].src ) === -1 ) {
+                                            testctx.drawImage( renderItem['arguments'][ 0 ], 0, 0 );
+                                            try {
+                                                testctx.getImageData( 0, 0, 1, 1 );
+                                            } catch(e) {      
+                                                testCanvas = document.createElement("canvas");
+                                                testctx = testCanvas.getContext("2d");
+                                                continue;
+                                            }
+                                          
+                                            safeImages.push( renderItem['arguments'][ 0 ].src );
+                                        
+                                        }
+                                    }
                                     ctx.drawImage.apply( ctx, renderItem['arguments'] );                                   
                                 }      
                             }

tests/image.svg

@@ -60,11 +60,13 @@
 
         <img src="image.jpg" style="width:0px;height:0px;border:1px solid black" />
         <img src="image.jpg" style="width:0px;height:0px;" />
-
+        
         <canvas id="testcanvas" style="width:100px;height:100px;"></canvas>
         <br />
         Image without src attribute, should not crash:
         <img style="width:50px;height:50px;border:1px solid red;display:block;" />
 
+        SVG taints image:<br /> <!-- http://fi.wikipedia.org/wiki/Tiedosto:Svg.svg -->
+        <img src="image.svg" />
     </body>
 </html>