MutationObserver and Wombat Proxy Conflict on Dynamic Image Source Update

ARiedijk commented 6 months ago

When a webpage contains javascript which uses a MutationObserver which rewrites image src attribute the image not shown in the browser.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Dynamic Div with Image</title>
    <script>
        document.addEventListener("DOMContentLoaded", function() {
            // Create the dynamic div and image
            var container = document.getElementById('container');
            var dynamicDiv = document.createElement('div');
            var img = document.createElement('img');
            img.src = '/images/img1.jpg'; // Set initial image source
            img.setAttribute('data-image', 'img4.jpg');
            dynamicDiv.appendChild(img);
            container.appendChild(dynamicDiv);

             // Function to update image source
             function updateImageSrc(newSrc) {
                observer.disconnect(); // Disconnect observer to avoid triggering its own events
                var data = img.dataset;
                if (data.hasOwnProperty('image')) {
                   img.src = newSrc; // Update the image source
                }

                observer.observe(img, config); // Reconnect the observer
             }

            // Setup the MutationObserver
            var observer = new MutationObserver(function(mutations) {
                mutations.forEach(function(mutation) {
                    console.log("observer change this image to img3 ");
                    updateImageSrc('/images/img3.jpg');

                });
            });

            // Observer configuration and target
            var config = { attributes: true, childList: false, subtree: false };
            observer.observe(img, config);

            // Example: Change the image src after 3 seconds
            setTimeout(function() {
                console.log("change this image to img2");
                img.src = '/images/img2.jpg';
            }, 1000);
        });
    </script>
</head>
<body>
    <div id="container"></div>
</body>
</html>

observertest.zip

When the MutationObserver triggers the updateImageSrc function, the wombat proxy encounters an error at data.hasOwnProperty('image'), causing the javascript proxy to stop working and the image to not be displayed.

ikreymer commented 5 months ago

Looks like this is the same issue as webrecorder/wombat#132, which is now fixed. Can close when next wabac.js with the latest wombat is released. Please comment if there is anything else to be done here.

ikreymer commented 5 months ago

Released in wabac.js 2.17.0 via wombat 3.7.1

webrecorder / wabac.js

MutationObserver and Wombat Proxy Conflict on Dynamic Image Source Update #157