Bonjour à tous,

Je suis en train de développer une extension pour Chrome dans le cadre d’une projet de fin d’étude en cybersécurité. Cet extension a pour but de scanner des sites internet et détecter les vulnérabilités potentielles.
Ce projet est réalisé en Vue.JS3
Côté client je tente de réaliser une lecture du DOM pour détecter les modifications éventuelles.
Nous utilisons les mutation Observer

Donc pour les sachants nous avons :

• Une partie Options
• Une partie DevTools
• Une partie Popup
• Une partie contentScripts

Nous lançons un mutation Observer dans le script de contenu de façon à récupérer le site sur lequel se trouve l’utilisateur, hors pour certains sites, l’extension récupére son propre DOM et je ne comprend pas pourquoi.

Par exemple ici sur https://test.fr la mutation fonctionne bien.
Mutation work

Mais ici sur un site crée pour détecter une DOM XSS fait à la mano ça ne fonctionne pas.
Mutation doesn’t work

import {
    createApp
} from 'vue';
import App from './views/App.vue';
import {
    setupApp
} from '~/logic/common-setup';
import store from '~/store';

(() => {
    var _a;

    const initialize = () => {
        console.log("Initializing...");

        const observer = new MutationObserver(async (mutationsList) => {
            try {
                console.log("Running observer");
                for (let mutation of mutationsList) {
                    switch (mutation.type) {
                        case 'childList':
                            for (let node of mutation.addedNodes) {
                                if (node.tagName === 'SCRIPT' && node.src.startsWith('moz-extension://')) {
                                    return;
                                }
                                // if (node.parentNode && node.parentNode.shadowRoot && node.parentNode.id === 'app-container') {
                                //     continue;
                                // }
                                if (node.nodeType === Node.TEXT_NODE && !node.data.trim()) {
                                    return;
                                }
                                await handleNodeAdded(node);
                            }
                            break;
                        case 'attributes':
                            await handleAttributeModified(mutation.target, mutation.attributeName);
                            break;
                        case 'characterData':
                            if (mutation.target.nodeType === Node.TEXT_NODE && !mutation.target.data.trim()) {
                                return;
                            }
                            await handleCharacterDataModified(mutation.target);
                            break;
                    }
                }
            } catch (error) {
                console.error('Error in observer:', error);
            }
        });

        observer.observe(document.documentElement, {
            childList: true,
            subtree: true,
            attributes: true,
            characterData: true
        });

        const container = document.createElement('div');
        container.id = 'app-container';
        const root = document.createElement('div');
        const styleEl = document.createElement('link');
        const shadowDOM = ((_a = container.attachShadow) === null || _a === void 0 ? void 0 : _a.call(container, {
            mode: 'open'
        })) || container;
        styleEl.setAttribute('rel', 'stylesheet');
        styleEl.setAttribute('href', browser.runtime.getURL('dist/contentScripts/style.css'));
        shadowDOM.appendChild(styleEl);
        shadowDOM.appendChild(root);
        document.body.appendChild(container);
        const app = createApp(App);

        app.use(store);
        setupApp(app);
        app.mount(root);

        store.dispatch('initializeAuthState');

        chrome.runtime.onMessage.addListener((message) => {
            console.log('Content Script: Message received:', message);
            if (message.action === 'setAuthState') {
                store.commit('setAuthState', message.payload);
            } else if (message.action === 'clearAuthState') {
                store.commit('clearAuthState');
            }
        });

        console.info('[WebPionneer] Content script initialized!');
    };

    window.addEventListener('DOMContentLoaded', initialize);
    window.addEventListener('load', initialize);

    const startPolling = () => {
        setInterval(() => {
            console.log('Polling for changes...');
            document.querySelectorAll('your-selector-here').forEach(node => {
                handleNodeAdded(node);
            });
        }, 2000);
    };

    window.addEventListener('DOMContentLoaded', startPolling);
    window.addEventListener('load', startPolling);

    async function handleNodeAdded(node) {
        console.log('Node added:', node);
        await new Promise(resolve => setTimeout(resolve, 1000));
        console.log('Async operation for added node completed');
    }

    async function handleAttributeModified(target, attributeName) {
        console.log('Attribute modified:', target, 'Attribute name:', attributeName);
        await new Promise(resolve => setTimeout(resolve, 1000));
        console.log('Async operation for attribute modification completed');
    }

    async function handleCharacterDataModified(target) {
        console.log('Character data modified:', target);
        await new Promise(resolve => setTimeout(resolve, 1000));
        console.log('Async operation for character data modification completed');
    }
})();

Merci à ceux qui sauront m’apporter une réponse ????