如何用Javascript替代Image對象

Question

我想覆蓋window.Image對象以檢測瀏覽器中的一些XSS攻擊。 看到代碼：

(function(){ 
    if(typeof(window.Image)!=="object"){ 
     var _original_Image=new Image(); 
     Object.defineProperty(_original_Image,'src', { 
      set: function(srcAttr){ 
       if(/document\.cookie/.test(srcAttr)){console.log('cookie attack!')}; 
       _original_Image.setAttribute('src',srcAttr); 
      }, 
      get: function(){return _original_Image.src}; 
     }) 
     window.Image = function(){ return _original_Image }; 
     return _original_Image; 
    } 
}()) 

運行它。

>>> a = new Image() 
<img> 
>>> a.src="document.cookie" 
cookie attack! 
GET http://192.168.0.2/document.cookie 404 (Not Found) 
>>> document.body.appendChild(a) 
<img src="document.cookie"> 

圖像被成功追加。

但有一些problem.see

>>> b = new Image() 
<img src="document.cookie"> 

它menas原來HTMLImageElement改變，這將有最後的IMG元素的attrubutes。

我想僅返回<img>。如何？

Answer 1

我們應該重寫正在創建的Image對象，而不是本機Image對象本身，這就是您正在做的事情。它應該看起來像這樣：

(function() { 
    var NativeImage; 

    var createImage = function() { 
     var image = new NativeImage(arguments); 

     Object.defineProperty(image, 'src', { 
      set: function (srcAttr) { 
       // whatever else you want to put in here 
       image.setAttribute('src',srcAttr); 
      }, 
      get: function() { 
       return image.src; 
      } 
     }); 

     return image; 
    }; 

    if (typeof window.Image !== 'object') { 
     NativeImage = window.Image; 
     window.Image = function() { 
      return createImage.call(this, arguments) ; 
     }; 
    } 
}());