时间戳

首页 > 解决方案 > 控制 DOM 中的每个“src”属性更改

javascript - 控制 DOM 中的每个“src”属性更改

问题描述

我正在编写一个需要监视新的“脚本”元素并阻止一些已知来源的 Javascript 代码。

为了捕捉这些，我尝试使用MutationObserver和 __ defineSetter __ ，它们都可以观察“src”的变化，但只有在 HTTP 请求已经发送之后——所以即使我改变了 src，它也没有真正被阻止。

window.HTMLScriptElement.prototype.__defineSetter__('src', function (d) 
    {
        console.log("HTMLScriptElement: ",d);
        if (d.indexOf('localhost') != -1) {
            //BLOCK SCRIPT
        }
    });

    new MutationObserver(function (a) {
        a.forEach((e) => {
            e.addedNodes.forEach((z) => 
            {
                if (z.nodeName.toLowerCase() == "script" && z.src.indexOf('localhost') != -1) 
                {
                    //BLOCK SCRIPT
                }
            })
        })
    }).observe(window.document, {
        attributes: true,
        childList:true,
        subtree:true
    });

标签： javascriptmutation-observersjavascript-injection

解决方案

您可以使用服务工作者来拦截网络请求。这样的事情应该可以解决问题：

self.addEventListener('fetch', function (event) {
    const blockedUrls = [
        //...
    ];
    if (blockedUrls.some(x => event.request.url.startsWith(x))) {
        event.respondWith(new Response('blocked', { status: 401, statusText: 'Unauthorized' }));
    }
});

推荐阅读