JS `MutationObserver` 监控 DOM 变化与安全防护

各位靓仔靓女，大家好！我是你们的老朋友，今天咱们聊聊JavaScript里一个有点酷又有点危险的家伙——MutationObserver。这玩意儿能让你像个老妈子一样盯着DOM的变化，但用不好，就可能变成埋在你代码里的定时炸弹。所以，今天咱们就来扒一扒它的底裤，看看怎么安全又优雅地使用它。

一、MutationObserver：DOM变化的狗仔队

先说说 MutationObserver 是干啥的。简单来说，它是一个API，允许你监听DOM树的变化。你可以让它盯着特定的DOM节点，一旦这个节点或者它的子节点发生了变化（比如属性被修改、子节点被增删），它就会通知你。

想象一下，你有个网页，上面有个数字会不断变化。你想在数字变动的时候做点什么事情，比如发送个统计数据。如果没有 MutationObserver，你可能就得用 setInterval 定时去检查数字是否变化，这效率多低啊！有了 MutationObserver，你就可以安心睡觉，等它通知你数字变了就行。

二、MutationObserver的基本用法：三步走

使用 MutationObserver，一般就三步：

创建观察者 (Observer)： 就像雇佣一个狗仔队，你得先创建一个 MutationObserver 实例。
```
const observer = new MutationObserver(callback);
```
这里的 callback 是个函数，当DOM发生变化时，它会被调用。这个 callback 函数会接收两个参数：
- mutationsList: 一个 MutationRecord 对象的数组，每个对象描述了一个DOM变化。
- observer: MutationObserver 实例本身。

配置观察选项 (Options)： 告诉狗仔队你要盯什么，比如属性变化、子节点变化、文本内容变化等等。

const config = {
    attributes: true,    // 监听属性变化
    childList: true,     // 监听子节点变化
    subtree: true,       // 监听所有后代节点
    characterData: true, // 监听文本内容变化
    attributeFilter: ['class', 'style'], // 监听特定的属性
    attributeOldValue: true, // 记录属性变化前的值
    characterDataOldValue: true // 记录文本内容变化前的值
};

这些选项可以组合使用，根据你的需求来配置。

选项	描述
`attributes`	设为 `true`，监听目标元素的属性变化。
`childList`	设为 `true`，监听目标元素的子节点变化（添加或删除）。
`subtree`	设为 `true`，监听目标元素的所有后代节点的变化。结合 `childList` 使用，可以监控整个子树的节点添加或删除。
`characterData`	设为 `true`，监听目标元素的文本内容变化。
`attributeFilter`	一个字符串数组，指定要监听哪些属性的变化。只有当 `attributes` 为 `true` 时才有效。
`attributeOldValue`	设为 `true`，在 `MutationRecord` 对象中记录属性变化前的值。只有当 `attributes` 为 `true` 时才有效。
`characterDataOldValue`	设为 `true`，在 `MutationRecord` 对象中记录文本内容变化前的值。只有当 `characterData` 为 `true` 时才有效。
`attributeNamespace`	（已废弃）
`characterDataNamespace`	（已废弃）

开始观察 (Observe)： 让狗仔队开始工作，盯着你指定的DOM节点。
```
const targetNode = document.getElementById('my-element');
observer.observe(targetNode, config);
```
这里的 targetNode 是你想监听的DOM节点，config 是你配置的观察选项。

三、一个简单的例子：监听属性变化

<!DOCTYPE html>
<html>
<head>
    <title>MutationObserver Example</title>
</head>
<body>
    <div id="my-element" class="initial-class" style="color: blue;">Hello, world!</div>

    <button id="change-class">Change Class</button>
    <button id="change-style">Change Style</button>

    <script>
        const targetNode = document.getElementById('my-element');
        const changeClassButton = document.getElementById('change-class');
        const changeStyleButton = document.getElementById('change-style');

        // Callback function to execute when mutations are observed
        const callback = (mutationsList, observer) => {
            for (const mutation of mutationsList) {
                if (mutation.type === 'attributes') {
                    console.log('The ' + mutation.attributeName + ' attribute was modified.');
                    console.log('Old value: ' + mutation.oldValue);
                    console.log('New value: ' + targetNode.getAttribute(mutation.attributeName));
                }
            }
        };

        // Create a new observer with the callback function
        const observer = new MutationObserver(callback);

        // Configuration of the observer:
        const config = {
            attributes: true,
            attributeOldValue: true,
            attributeFilter: ['class', 'style']
        };

        // Start observing the target node for configured mutations
        observer.observe(targetNode, config);

        // Example: Change the class of the element
        changeClassButton.addEventListener('click', () => {
            if (targetNode.classList.contains('initial-class')) {
                targetNode.classList.remove('initial-class');
                targetNode.classList.add('new-class');
            } else {
                targetNode.classList.remove('new-class');
                targetNode.classList.add('initial-class');
            }
        });

        // Example: Change the style of the element
        changeStyleButton.addEventListener('click', () => {
            if (targetNode.style.color === 'blue') {
                targetNode.style.color = 'red';
            } else {
                targetNode.style.color = 'blue';
            }
        });
    </script>
</body>
</html>

在这个例子中，我们监听了 id="my-element" 这个div的 class 和 style 属性的变化。当点击按钮修改class或者style的时候，控制台会输出相关信息。

四、MutationObserver的坑：小心无限循环！

MutationObserver 很强大，但也藏着不少坑。最大的坑就是无限循环。

想象一下，你的 callback 函数里修改了DOM，而你又监听了DOM的变化。这样，每次DOM变化都会触发 callback，callback 又会修改DOM，然后又触发 callback… 永无止境！这就像你追着自己的尾巴跑，最终只能把浏览器搞崩溃。

怎么避免无限循环？

仔细设计你的 callback 函数。 确保你的 callback 函数不会触发它自己监听的DOM变化。

在 callback 函数里临时停止观察。 在修改DOM之前，先调用 observer.disconnect() 停止观察，修改完之后再调用 observer.observe() 重新开始观察。

const callback = (mutationsList, observer) => {
    observer.disconnect(); // 停止观察

    // 修改DOM
    targetNode.textContent = 'New content';

    observer.observe(targetNode, config); // 重新开始观察
};

使用 MutationRecord 对象的 target 属性。 MutationRecord 对象的 target 属性指向发生变化的DOM节点。你可以检查 target 节点是否是你想要修改的节点，避免不必要的处理。

const callback = (mutationsList, observer) => {
    for (const mutation of mutationsList) {
        if (mutation.type === 'characterData' && mutation.target === targetNode) {
            // 只处理目标节点的文本内容变化
            console.log('Text content changed:', mutation.target.textContent);
        }
    }
};

五、MutationObserver的安全防护：防XSS攻击

MutationObserver 还有一个潜在的安全风险：XSS攻击。

如果你的网站允许用户输入HTML，并且你使用 MutationObserver 监听DOM变化，那么恶意用户可能会通过注入恶意的HTML代码来执行XSS攻击。

怎么防范XSS攻击？

永远不要信任用户的输入。 对用户的输入进行严格的验证和过滤，防止恶意代码注入。
使用安全的DOM操作方法。 避免使用 innerHTML 和 outerHTML，因为它们可能会执行HTML代码。尽量使用 textContent、setAttribute 等方法来操作DOM。
内容安全策略 (CSP)。 CSP是一种安全机制，可以限制浏览器加载和执行哪些资源。通过配置CSP，你可以防止浏览器执行来自未知来源的脚本。

六、MutationObserver的最佳实践：提升性能

MutationObserver 虽然强大，但也可能影响性能。如果使用不当，可能会导致页面卡顿甚至崩溃。

怎么提升性能？

只监听必要的DOM变化。 不要监听所有的DOM变化，只监听你真正关心的变化。
使用 subtree: false。 除非你真的需要监听所有后代节点的变化，否则尽量避免使用 subtree: true。
及时停止观察。 当你不再需要监听DOM变化时，及时调用 observer.disconnect() 停止观察。
节流 (Throttling) 和防抖 (Debouncing)。 如果DOM变化非常频繁，可以考虑使用节流和防抖技术来限制 callback 函数的执行频率。

七、总结：用好MutationObserver，让你的代码更优雅

MutationObserver 是一个强大的API，可以让你优雅地监听DOM变化。但它也藏着不少坑，需要小心使用。记住以下几点：

避免无限循环。
防范XSS攻击。
提升性能。

只要掌握了这些技巧，你就可以用好 MutationObserver，让你的代码更健壮、更安全、更高效。

最后，送给大家一个小技巧：

如果你想在开发过程中调试 MutationObserver，可以使用浏览器的开发者工具。在Chrome浏览器中，你可以打开“Performance”面板，然后选择“Record”按钮，开始记录性能数据。当DOM发生变化时，你可以在性能数据中看到 MutationObserver 的执行情况。

好了，今天的讲座就到这里。希望大家都能成为 MutationObserver 的高手！下课！

发表回复 取消回复

发表回复取消回复