javascript - 如何用 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">

图像已成功附加。

但有一些问题。看

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

它意味着原始的 HTMLImageElement 已更改，它将具有最后一个 img 元素的属性。

我只想让它返回<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) ;
        };
    }
}());