如何确保离线JavaScript应用不与网络进行数据传输？

好问题！针对你这种离线应用里使用不可信第三方JS资源、又要保护私密数据的场景，确实有几个纯JS层面的方案可以试试，不用依赖断网或浏览器设置：

1. 全局拦截所有网络请求API #

JavaScript里所有发起网络请求的途径都是通过有限的几个全局API，我们可以在第三方脚本加载前重写这些API，让它们完全无法发送请求。

比如，你可以在HTML的最顶部（一定要早于所有第三方资源的script标签）插入这段代码：

// 拦截 fetch API
const originalFetch = window.fetch;
window.fetch = (...args) => {
  console.warn('Blocked fetch attempt to:', args[0]);
  return Promise.reject(new Error('Network requests are disabled for security'));
};

// 拦截 XMLHttpRequest
const originalXHR = XMLHttpRequest;
window.XMLHttpRequest = function() {
  const xhr = new originalXHR();
  const originalOpen = xhr.open;
  xhr.open = (...args) => {
    console.warn('Blocked XHR attempt to:', args[1]);
    throw new Error('XHR requests are disabled for security');
  };
  return xhr;
};

// 拦截 WebSocket
const originalWebSocket = WebSocket;
window.WebSocket = function(url) {
  console.warn('Blocked WebSocket attempt to:', url);
  throw new Error('WebSocket connections are disabled for security');
};

// 拦截 navigator.sendBeacon（常用于静默上报）
const originalSendBeacon = navigator.sendBeacon;
navigator.sendBeacon = (...args) => {
  console.warn('Blocked sendBeacon attempt to:', args[0]);
  return false;
};

这样一来，不管第三方脚本怎么尝试发起网络请求，都会被拦截并抛出错误，根本无法把数据传出去。需要注意的是，一定要保证这段拦截代码是第一个执行的JS代码，否则第三方脚本可能已经拿到了原始的API引用。

2. 自动静态扫描第三方脚本的网络相关代码 #

如果你想提前排查第三方脚本里的可疑代码，可以写个简单的脚本扫描它的内容，找出所有可能发起网络请求的调用。

基础正则扫描 #

用Node.js写个小工具就能实现：

const fs = require('fs');
const path = require('path');

// 要扫描的第三方脚本路径
const scriptPath = path.join(__dirname, 'third-party-script.js');
const scriptContent = fs.readFileSync(scriptPath, 'utf8');

// 匹配所有常见的网络请求API
const networkKeywords = [
  'fetch(',
  'XMLHttpRequest',
  'new WebSocket(',
  'navigator.sendBeacon(',
  'window.open(' // 防止通过打开新页面传数据
];

console.log('Scanning for network-related code...');
networkKeywords.forEach(keyword => {
  const regex = new RegExp(keyword, 'g');
  const matches = scriptContent.match(regex);
  if (matches) {
    console.log(`Found ${matches.length} instances of "${keyword}":`);
    matches.forEach((match, idx) => {
      // 提取匹配位置附近的代码片段，方便查看上下文
      const matchIndex = scriptContent.indexOf(match, idx > 0 ? scriptContent.indexOf(match) + 1 : 0);
      const context = scriptContent.slice(Math.max(0, matchIndex - 50), matchIndex + 50);
      console.log(`  ${idx + 1}. ...${context.trim()}...`);
    });
  }
});

进阶AST解析 #

如果第三方脚本被混淆过（比如把fetch改成window['f'+'e'+'t'+'c'+'h']这种动态调用），正则就不太好用了。这时候可以用AST解析工具（比如Esprima、Acorn）来分析代码的语法树，更准确地找到网络请求相关的逻辑。比如用Esprima遍历AST节点，查找所有调用fetch、XMLHttpRequest的地方。

3. 用沙箱隔离第三方脚本 #

把不可信的第三方脚本放在一个受限制的iframe沙箱里，让它完全无法访问主页面的网络权限，同时只暴露你需要的功能接口。

示例代码：

<!-- 沙箱iframe，只允许执行脚本，禁止网络请求、跨域等权限 -->
<iframe id="script-sandbox" sandbox="allow-scripts" src="about:blank" style="display: none;"></iframe>

<script>
  const sandboxFrame = document.getElementById('script-sandbox');
  const sandboxWindow = sandboxFrame.contentWindow;

  // 在沙箱里加载第三方脚本，并暴露安全的接口给主应用
  sandboxWindow.document.write(`
    <script src="third-party-visualization.js"><\/script>
    <script>
      // 只暴露我们需要的可视化函数，第三方脚本无法直接访问主页面或发起网络请求
      window.renderVisualization = function(privateData) {
        // 调用第三方脚本的可视化逻辑
        return thirdPartyRenderFunction(privateData);
      };
    <\/script>
  `);

  // 主应用调用沙箱里的安全接口，传入私密数据
  function showMyPrivateData(privateData) {
    // 可以在这里先验证数据，再传给沙箱
    sandboxWindow.renderVisualization(privateData);
  }
</script>

sandbox属性默认会禁止所有网络请求（除非你主动添加allow-same-origin等权限），所以沙箱里的第三方脚本根本没办法把数据上传到网络。同时主应用和沙箱之间的通信是受控的，只有你暴露的接口能接收数据。

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