Détecter/intercepter l'insertion de <img>dans le DOM

Question

Nous utilisons un rapport d'analyse tiers script fourni par cette société d'analyse. Il ajoute une image de 1x1 pixel dans le DOM avec des données de rapport dans l'URL de l'image.

Existe-t-il un moyen pour moi de surveiller le DOM et d'intercepter cette <img> et modifier son attribut "src" avant que le navigateur ne demande l'image ?

Cela semble être une chose vraiment étrange à faire, je sais, mais il y a une fonctionnalité que nous aimerions hacker sur ce rapport script (le script est obsfucé).

Answer 1

Dans les navigateurs non-IE, vous pouvez détecter l'insertion d'un nœud DOM en utilisant la fonction DOMNodeInserted événement. Je ne sais pas si le navigateur aura effectué la requête HTTP au moment où l'événement est déclenché ; un test rapide montre que ce n'est pas le cas dans Firefox. Comme cela ne fonctionne pas dans IE, ce n'est peut-être pas une solution acceptable de toute façon.

document.body.addEventListener("DOMNodeInserted", function(evt) {
    var node = evt.target;
    if (node.nodeType == 1 && node.tagName == "IMG") {
        node.src = "http://www.gravatar.com/avatar/be21766f09e0e5fd3a2f8cc721ceba2e?s=32&d=identicon&r=PG"; // Your gravatar
    }
}, false);

Answer 2

Tentez le coup. Je ne sais pas si cela sera utile, mais j'ai eu envie de bricoler et cela permet de prendre en compte le scénario dans lequel une tierce partie incorpore volontairement un retard :

$(document).ready(function() {
// match an image with specific dimension, return it
function imgNinja() {
    var $img =  $("img").filter(function() {
        return ($(this).height() == 1 && $(this).width() == 1);
    });
    return $img;
}

// periodically execute this to check for matches
function keepSeeking() {
    $img = imgNinja();
    if($img.length) {
        alert('found it');
        clearInterval(i);
        // do something with image
    }
}

// insert a fake into the DOM at a bit of an interval
function addNastyImage() {
   var $invader = $('<img src="foo.jpg" height="1px" width="1px"/>'); 
    $('html').append($invader);
}

setTimeout(addNastyImage, 5000);
var i = setInterval(keepSeeking, 1000);
});

Démonstration : http://jsfiddle.net/NyEdE/3/

Answer 3

Si le script de tiers utilise une méthode (comme le .appendChild ) pour ajouter l'élément au document, vous pouvez probablement le faire en remplaçant cette méthode de l'objet concerné par votre propre fonction.

Cela aurait l'avantage de fonctionner dans tous les navigateurs, et je pense que vous ne généreriez qu'une seule requête HTTP (pour l'URL modifiée, pas pour l'URL d'origine).

Answer 4

En s'appuyant sur ce qu'Adam a suggéré :

$(document).ready(function() {
  $("img[src='http://example.com/example.gif']").attr('src','http://example.com/new_src.gif');
});