首页 > 解决方案 > 阻止具有特定 url 的脚本

问题描述

我有一个 html 文档并在其中加载一个脚本,如下所示:

<!doctype html>
<html lang="en">

<head>   
  <meta charset="utf-8">

      <script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
</head>

<body>

</body>

</html>

我的问题是,是否有一种方法可以code.jquery.com通过在它之前添加一个脚本来阻止来自源的脚本调用,该脚本扫描它然后阻止它。

我没有找到任何关于它的东西。

希望您能够帮助我。

提前致谢!

标签: javascripthtml

解决方案


您可以使用我编写的以下函数来阻止脚本运行。 blockScript将遍历所有脚本标签并删除包含您提供的来源的任何脚本标签的来源。请注意,此用途包括API,它将删除所有匹配的脚本标签。

块脚本

function blockScript(origin) {
    const scripts = Array.from(document.getElementsByTagName("SCRIPT"));
    if (scripts.length > 0) {
        scripts.forEach((script) => {
            if (script.src.includes(origin)) {
                document.head.removeChild(script);
            }
        })
    }
}

突变观察者

并且使用MutationObserver,您可以观察 DOM 变化。

const observer = new MutationObserver((mutationsList, observer) => {
    for(let mutation of mutationsList) {
        const addedNodes = Array.from(mutation.addedNodes);
        if (addedNodes && addedNodes.some(n => n.nodeName === 'SCRIPT')) {
            blockScript('code.jquery.com');
        }
        observer.disconnect();
    }
});
observer.observe(document, { childList: true, subtree: true });

把所有东西放在一起......

<script>
    function blockScript(origin) {
        const scripts = Array.from(document.getElementsByTagName("SCRIPT"));
        if (scripts.length > 0) {
            scripts.forEach((script) => {
                if (script.src.includes(origin)) {
                    document.head.removeChild(script);
                }
            })
        }
    }
</script>
<script>
    const observer = new MutationObserver((mutationsList, observer) => {
        for(let mutation of mutationsList) {
            const addedNodes = Array.from(mutation.addedNodes);
            if (addedNodes && addedNodes.some(n => n.nodeName === 'SCRIPT')) {
                blockScript('code.jquery.com');
            }
            observer.disconnect();
        }
    });
    observer.observe(document, { childList: true, subtree: true });
</script>
<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous" ></script>
<script>
    $(document).ready(function() {
        console.log('I am undefined');
    })
</script>

你应该得到

Uncaught ReferenceError: $ is not defined

我只使用 Chrome 对此进行了测试。


推荐阅读