静态网站：无浏览器插件时阻止第三方在线追踪请求方案咨询

Absolutely, this is totally feasible in modern browsers without relying on extensions—here's how to pull it off with JavaScript (vanilla or with libraries), focused on blocking requests matching glob patterns (including entries from the Disconnect list):

最可靠方案：使用 Service Worker 拦截所有网络请求 #

Service Workers are a modern browser API that run in the background, allowing you to intercept all outbound network requests (including third-party scripts, videos, widget calls) — perfect for your static site needs. This is the most comprehensive way to block tracking without plugins.

Step 1: Register the Service Worker #

Add this script to your main page (e.g., index.html) to register the worker:

if ('serviceWorker' in navigator) {
  window.addEventListener('load', async () => {
    try {
      await navigator.serviceWorker.register('/sw.js');
      console.log('Privacy protection worker registered successfully');
    } catch (err) {
      console.error('Service Worker registration failed:', err);
    }
  });
}

Step 2: Write the Interception Logic (sw.js) #

Create a sw.js file in your site root to handle request blocking. Here's the core logic:

// Define your block rules (glob patterns + Disconnect list entries)
const BLOCK_PATTERNS = [
  'mc.yandex.ru/**',
  '*.doubleclick.net/**',
  '*.google-analytics.com/**',
  // Add entries from the Disconnect Tracking Protection List here
];

// Simple glob-to-regex matching function (or use a library like minimatch)
function matchesGlob(url, pattern) {
  const regexPattern = pattern
    .replace(/\*\*/g, '.*')
    .replace(/\*/g, '[^/]*')
    .replace(/\./g, '\\.')
    .replace(/\//g, '\\/');
  return new RegExp(`^https?://${regexPattern}$`).test(url);
}

// Intercept all fetch requests
self.addEventListener('fetch', (event) => {
  const requestUrl = event.request.url;
  
  // Check if the request matches any block rule
  const shouldBlock = BLOCK_PATTERNS.some(pattern => matchesGlob(requestUrl, pattern));
  
  if (shouldBlock) {
    // Block the request with a 403 response
    event.respondWith(new Response(null, { status: 403, statusText: 'Tracking Blocked' }));
    console.log(`Blocked tracking request: ${requestUrl}`);
  } else {
    // Allow legitimate requests to proceed
    event.respondWith(fetch(event.request));
  }
});

Upgrade: Use a Mature Glob Matching Library

For more robust glob support, import a lightweight library like minimatch directly in your Service Worker:

// Import minimatch at the top of sw.js
importScripts('https://cdnjs.cloudflare.com/ajax/libs/minimatch/3.1.2/minimatch.min.js');

// Update the matching logic
const shouldBlock = BLOCK_PATTERNS.some(pattern => minimatch(requestUrl, pattern, { matchBase: true }));

Step 3: Integrate the Disconnect Tracking List #

Extract relevant domains from the Disconnect list and convert them to glob patterns (e.g., turn google-analytics.com into *.google-analytics.com/** to cover subdomains and all paths).

Alternative: MutationObserver for DOM-Injected Tracking Resources #

If Service Workers aren't an option (e.g., non-HTTPS environments, though modern browsers require HTTPS for SWs except localhost), use MutationObserver to block tracking scripts/iframes inserted into the DOM:

const BLOCK_PATTERNS = [
  'mc.yandex.ru/**',
  // Add your other rules here
];

function matchesGlob(url, pattern) {
  // Reuse the same glob matching function from above
  const regexPattern = pattern
    .replace(/\*\*/g, '.*')
    .replace(/\*/g, '[^/]*')
    .replace(/\./g, '\\.')
    .replace(/\//g, '\\/');
  return new RegExp(`^https?://${regexPattern}$`).test(url);
}

// Watch for new elements added to the DOM
const observer = new MutationObserver((mutations) => {
  mutations.forEach(mutation => {
    mutation.addedNodes.forEach(node => {
      // Block tracking scripts
      if (node.tagName === 'SCRIPT' && node.src) {
        if (BLOCK_PATTERNS.some(pattern => matchesGlob(node.src, pattern))) {
          node.remove();
          console.log(`Blocked tracking script: ${node.src}`);
        }
      }
      // Block tracking iframes
      if (node.tagName === 'IFRAME' && node.src) {
        if (BLOCK_PATTERNS.some(pattern => matchesGlob(node.src, pattern))) {
          node.remove();
          console.log(`Blocked tracking iframe: ${node.src}`);
        }
      }
    });
  });
});

// Start observing the entire document
observer.observe(document.documentElement, { childList: true, subtree: true });

⚠️ Note: This method only blocks resources injected into the DOM — it won't catch hidden tracking requests made via fetch or XMLHttpRequest. Service Workers are still the gold standard.

Key Considerations #

1. HTTPS Requirement: Service Workers only work over HTTPS (localhost is exempt for development). Ensure your static site is deployed on an HTTPS server.
2. Browser Support: All modern browsers (Chrome, Firefox, Edge, Safari 11.1+) support Service Workers, covering the vast majority of visitors.
3. Avoid False Positives: Test thoroughly to ensure legitimate third-party resources (like CDNs or video hosts) aren't accidentally blocked.
4. Worker Updates: When modifying your block rules, update the Service Worker's version or content to trigger a refresh for existing visitors.

内容的提问来源于stack exchange，提问作者Саша Черных