ISP注入广告致JavaScript运行异常，求可靠前端移除方案

这种ISP恶意注入广告还搞崩应用的情况真的很头疼，我给你几个经过实践验证的前端解决方案，帮你搞定这个问题：

一、移除注入的广告元素 #

ISP注入的广告通常会有固定的特征（比如特定类名、样式、图片来源），可以通过CSS或JavaScript精准定位并清除：

1. 用CSS全局隐藏（快速生效） #

如果能找到广告元素的特征，比如特定类名、图片域名，直接用强制隐藏的样式：

/* 假设广告气泡有专属类名，比如isp-ad-bubble */
.isp-ad-bubble {
  display: none !important;
  visibility: hidden !important;
}

/* 针对广告图片，通过来源域名特征匹配 */
img[src*="ad-isp-domain.com"] { /* 替换为实际广告图的域名关键词 */
  display: none !important;
}

2. 用JavaScript动态删除（应对异步注入的广告） #

很多广告是页面加载后异步注入的，用MutationObserver监听DOM变化，实时删除新出现的广告：

// 监听整个文档的DOM变化
const target = document.documentElement;
const observer = new MutationObserver((mutations) => {
  mutations.forEach((mutation) => {
    if (mutation.type === 'childList') {
      // 根据广告的特征选择元素，比如固定位置的气泡、含广告字样的元素
      const ads = document.querySelectorAll(
        '[style*="fixed; bottom: 20px"], .isp-ad-container, div:contains("广告")'
      );
      ads.forEach(ad => ad.remove());
    }
  });
});

// 启动监听
observer.observe(target, { childList: true, subtree: true });

二、修复jQuery提前调用导致的崩溃 #

ISP的代码在jQuery加载前就调用了$或jQuery，导致报错崩溃，可以提前定义临时占位函数避免报错：

// 提前定义空的$和jQuery函数，拦截ISP的调用
window.$ = window.jQuery = function(selector) {
  // 返回一个空对象，支持链式调用（比如.click()、.on()）
  return {
    on: () => {},
    click: () => {},
    append: () => {},
    // 按需补充ISP代码用到的jQuery方法
  };
};

// 等真实jQuery加载完成后，会自动覆盖这个临时函数
document.addEventListener('DOMContentLoaded', () => {
  console.log('真实jQuery已加载，临时函数已被覆盖');
});

三、长期加固方案 #

这些方法能从根源减少ISP注入的可能性：

• 启用HTTPS：HTTPS加密流量会大幅提高ISP注入广告的难度，多数ISP不会对HTTPS流量进行劫持注入；
• 使用Subresource Integrity (SRI)：给外部资源（比如jQuery）添加哈希验证，防止ISP篡改资源内容：

  <script src="https://code.jquery.com/jquery-3.6.4.min.js"
          integrity="sha256-oP6HI9z1XaZNBrJURtCoUT5SUnxFr8s3BzRl+cbzUq8="
          crossorigin="anonymous"></script>
  

• 配置内容安全策略(CSP)：通过CSP限制只允许加载信任来源的资源，阻止未知脚本/样式注入：

  <meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self' https://code.jquery.com; style-src 'self' 'unsafe-inline';">
  

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