如何通过Electron阻止JS捕获DOM并发送数据？求数据上传限制方案

嘿，这个问题很实际——既要用指定的JS文件，又要防它偷DOM数据上传，完全可以实现！下面分Electron和普通浏览器两种场景给你讲具体方案，再聊聊你想的限制上传量的思路，最后给最优建议：

Electron作为桌面端框架，能给你比浏览器多得多的控制权，核心思路是提前拦截目标JS的行为，主要有两种方式：

1. 用Preload脚本劫持关键API #

Preload脚本会在页面所有JS之前加载，能安全地修改渲染进程的全局对象，不会被目标JS覆盖：

• 在BrowserWindow的webPreferences里配置preload文件：

  // 主进程代码
  const mainWindow = new BrowserWindow({
    webPreferences: {
      preload: path.join(__dirname, 'preload.js'),
      contextIsolation: true, // 开启上下文隔离，更安全
      nodeIntegration: false
    }
  });
  

• 在preload脚本里，劫持DOM读取方法和网络请求方法：

  // preload.js
  const { contextBridge } = require('electron');
  
  contextBridge.exposeInMainWorld('safeAPI', {
    init: () => {
      // 劫持fetch请求
      const originalFetch = window.fetch;
      window.fetch = function(url, options) {
        // 通过调用栈判断请求是否来自目标JS
        const stack = new Error().stack;
        if (stack?.includes('your-target-script.js')) {
          // 检查请求体是否包含DOM内容（比如HTML标签）
          if (options?.body && /<html>|<body>|<div>/.test(options.body)) {
            console.log('已阻止目标JS上传DOM数据');
            return Promise.reject('DOM上传被拦截');
          }
        }
        return originalFetch.apply(this, arguments);
      };
  
      // 劫持XMLHttpRequest
      const originalXHRsend = XMLHttpRequest.prototype.send;
      XMLHttpRequest.prototype.send = function(body) {
        const stack = new Error().stack;
        if (stack?.includes('your-target-script.js') && body && /<html>|<body>/.test(body)) {
          console.log('已阻止XHR方式的DOM上传');
          return;
        }
        originalXHRsend.apply(this, arguments);
      };
  
      // 劫持能获取整个DOM的属性，比如outerHTML
      Object.defineProperty(document.documentElement, 'outerHTML', {
        get: function() {
          const stack = new Error().stack;
          if (stack?.includes('your-target-script.js')) {
            return ''; // 返回空内容，或者假的DOM结构
          }
          // 否则返回真实的outerHTML
          return Object.getOwnPropertyDescriptor(HTMLElement.prototype, 'outerHTML').get.call(this);
        }
      });
    }
  });
  

• 最后在页面的渲染进程里调用window.safeAPI.init()即可生效。

2. 主进程拦截网络请求 #

用Electron的webRequestAPI在主进程直接拦截所有出站请求：

// 主进程代码
const { session } = require('electron');

session.defaultSession.webRequest.onBeforeRequest({ urls: ['<all_urls>'] }, (details, callback) => {
  // 检查请求发起者是否是目标JS
  if (details.initiator?.endsWith('your-target-script.js')) {
    // 如果是POST请求，读取请求体判断是否包含DOM内容
    if (details.method === 'POST' && details.requestBody?.raw) {
      const body = Buffer.from(details.requestBody.raw[0].bytes).toString();
      if (/<html>|<body>/.test(body)) {
        console.log('主进程拦截了DOM上传请求');
        callback({ cancel: true }); // 取消请求
        return;
      }
    }
  }
  callback({ cancel: false }); // 允许正常请求
});

普通浏览器里没有Electron的特权，只能通过**用户脚本（比如Tampermonkey/Greasemonkey）**实现，原理和Electron的preload类似，提前注入脚本劫持API：

1. 安装Tampermonkey插件，新建一个用户脚本；
2. 设置脚本的匹配规则和运行时机：

   // ==UserScript==
   // @name         阻止目标JS上传DOM
   // @namespace    http://tampermonkey.net/
   // @version      0.1
   // @description  拦截指定JS的DOM上传行为
   // @match        https://your-target-site.com/*
   // @run-at       document-start // 确保在目标JS之前加载
   // @grant        none
   // ==/UserScript==
   

3. 写入劫持代码（和preload里的逻辑类似）：

   (function() {
       'use strict';
   
       // 劫持fetch
       const originalFetch = window.fetch;
       window.fetch = function(url, options) {
         const stack = new Error().stack;
         if (stack?.includes('your-target-script.js') && options?.body && /<html>|<body>/.test(options.body)) {
           console.log('阻止了DOM上传请求');
           return Promise.reject('拦截成功');
         }
         return originalFetch.apply(this, arguments);
       };
   
       // 劫持XHR
       const originalXHRsend = XMLHttpRequest.prototype.send;
       XMLHttpRequest.prototype.send = function(body) {
         const stack = new Error().stack;
         if (stack?.includes('your-target-script.js') && body && /<html>|<body>/.test(body)) {
           console.log('阻止了XHR方式的DOM上传');
           return;
         }
         originalXHRsend.apply(this, arguments);
       };
   
       // 劫持DOM读取方法
       Object.defineProperty(document.documentElement, 'outerHTML', {
         get: function() {
           const stack = new Error().stack;
           if (stack?.includes('your-target-script.js')) {
             return '';
           }
           return Object.getOwnPropertyDescriptor(HTMLElement.prototype, 'outerHTML').get.call(this);
         }
       });
   })();
   

这个思路可以作为补充，但算不上最优方案：

• 目标JS可能把DOM内容压缩、加密或者分片上传，小数据量也可能包含敏感信息；
• 我们要阻止的是DOM数据被上传，而不是单纯限制大小，直接拦截包含DOM内容的请求，或者阻止DOM被读取，比限制数据量更精准，也不会误拦正常的小数据请求。

1. 优先选Electron环境：Electron的preload和webRequest能提供双重保障，甚至可以用vm模块把目标JS放在沙箱里运行，彻底限制它的DOM访问权限；
2. 针对性劫持API：先分析目标JS的行为——用浏览器开发者工具的Sources面板打断点，看它具体调用了哪些DOM读取方法（比如document.querySelector、Element.innerHTML）和网络API，然后只劫持这些方法，避免影响页面其他功能；
3. 双重拦截：同时做「DOM读取劫持」和「网络请求拦截」，哪怕目标JS换了一种读取DOM的方式，也能被网络拦截挡住；
4. 测试验证：上线前一定要测试，确保目标JS的正常功能不受影响，同时确实能阻止DOM数据上传。

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