title: how to override the Image object with Javascript
body: <p>I want to override the window.Image object for detected some XSS Attack on browser.
  see the code:</p>
  
  <pre><code>(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;
      }
  }())
  </code></pre>
  
  <p>run it.</p>
  
  <pre><code>&gt;&gt;&gt; a = new Image()
  &lt;img&gt;
  &gt;&gt;&gt; a.src="document.cookie"
  cookie attack!
  GET http://192.168.0.2/document.cookie 404 (Not Found) 
  &gt;&gt;&gt; document.body.appendChild(a)
  &lt;img src="document.cookie"&gt;
  </code></pre>
  
  <p>the image was successful appended.</p>
  
  <p>but there's some problem.see</p>
  
  <pre><code>&gt;&gt;&gt; b = new Image()
  &lt;img src="document.cookie"&gt;
  </code></pre>
  
  <p>it menas the original HTMLImageElement is changed, it will have the last img elements' attrubutes.</p>
  
  <p>I want to it return <code>&lt;img&gt;</code> only. how to?</p>