如何在Blogger中阻止指定Widgets脚本加载

我需要在自己的Blogger网站阻止加载https://www.blogger.com/static/v1/widgets/3298326339-widgets.js，尝试了以下脚本但没有生效：

//<![CDATA[
  (function() {
    var scriptToBlock = 'https://www.blogger.com/static/v1/widgets/3298326339-widgets.js';
    var allScripts = document.getElementsByTagName('script');
    
    for (var i = allScripts.length - 1; i >= 0; i--) {
      var src = allScripts[i].getAttribute('src');
      if (src && src === scriptToBlock) {
        allScripts[i].parentNode.removeChild(allScripts[i]);
        break; // 找到后退出循环
      }
    }
  })();
//]]>

原脚本失效原因 #

这段脚本是在页面加载完成后才去查找并移除目标脚本，但此时目标脚本大概率已经完成下载和执行，所以移除操作无法起到阻止加载的作用。

可行解决方案 #

方案一：通过内容安全策略（CSP）拦截

在Blogger模板的<head>标签中添加以下meta标签，通过CSP限制允许加载的脚本源，排除目标脚本的URL：

<meta http-equiv="Content-Security-Policy" content="script-src 'self' 'unsafe-inline' 'unsafe-eval' 你的其他必要脚本域名; object-src 'none';">

注意：需要把你网站正常运行所需的其他脚本域名补充到script-src列表中，避免影响网站功能。

方案二：使用MutationObserver提前拦截脚本插入

这种方法可以在目标脚本被插入到DOM之前就拦截它，把以下代码放在Blogger模板<head>标签的最顶部（确保在目标脚本加载前执行）：

//<![CDATA[
(function() {
  const targetScriptUrl = 'https://www.blogger.com/static/v1/widgets/3298326339-widgets.js';
  
  const observer = new MutationObserver((mutations) => {
    mutations.forEach((mutation) => {
      mutation.addedNodes.forEach((node) => {
        if (node.tagName === 'SCRIPT' && node.src === targetScriptUrl) {
          node.remove();
          observer.disconnect(); // 拦截后停止监听
        }
      });
    });
  });
  
  observer.observe(document.documentElement, {
    childList: true,
    subtree: true
  });
})();
//]]>

内容的提问来源于stack exchange，提问作者Rehan Ahmad