如何将自有网页改造为可访问任意网站的类浏览器工具（附示例）

嘿，你想做的其实就是一个Web反向代理工具——本质上让你的服务器当中间跑腿的，用户输入目标网址后，服务器去拉取目标网站的内容，改改路径再返回给用户，就像你提到的那个匿名代理站点那样。我在Stack Overflow上经常帮人解决这类问题，下面给你拆解落地的思路和实用方案：

整个流程其实很清晰：

1. 用户在你的网页输入目标URL，提交请求给你的服务器
2. 你的服务器作为中间节点，向目标网站发起HTTP/HTTPS请求
3. 服务器拿到目标网站的响应后，修改页面里的所有资源路径（比如图片、CSS、JS的地址），把它们改成经过你的代理服务的地址
4. 最后把修改后的内容返回给用户，用户就能在你的页面里浏览目标网站了

入门的话推荐轻量易上手的组合：

• 后端：Node.js + Express 或者 Python + Flask，快速搭建代理服务；如果追求高性能可以用Nginx配合脚本，但新手先从Node/Python开始
• 前端：简单的HTML表单+JS，用来接收用户输入的URL，然后展示代理后的内容

1. 先搭好后端代理核心 #

首先安装依赖：

npm install express axios cheerio

然后写核心代理代码（比如server.js）：

const express = require('express');
const axios = require('axios');
const cheerio = require('cheerio');
const app = express();
const port = 3000;

// 托管前端静态页面
app.use(express.static('public'));

// 代理请求的核心路由
app.get('/proxy', async (req, res) => {
  try {
    // 解码用户传入的目标URL
    const targetUrl = decodeURIComponent(req.query.u);
    if (!targetUrl) return res.status(400).send('请输入有效的目标网址');

    // 模拟真实浏览器请求头，避免被目标网站拦截
    const response = await axios.get(targetUrl, {
      headers: {
        'User-Agent': req.headers['user-agent'],
        'Referer': new URL(targetUrl).origin
      },
      responseType: 'arraybuffer'
    });

    // 判断响应类型，处理HTML和二进制资源
    const contentType = response.headers['content-type'] || '';
    if (contentType.includes('text/html')) {
      // 解析HTML，替换所有资源路径
      const html = response.data.toString('utf8');
      const $ = cheerio.load(html);
      const baseUrl = new URL(targetUrl).origin;

      // 替换图片src
      $('img').each((i, elem) => {
        const src = $(elem).attr('src');
        if (src) {
          const absoluteUrl = new URL(src, baseUrl).href;
          $(elem).attr('src', `/proxy?u=${encodeURIComponent(absoluteUrl)}`);
        }
      });

      // 替换CSS链接
      $('link[rel="stylesheet"]').each((i, elem) => {
        const href = $(elem).attr('href');
        if (href) {
          const absoluteUrl = new URL(href, baseUrl).href;
          $(elem).attr('href', `/proxy?u=${encodeURIComponent(absoluteUrl)}`);
        }
      });

      // 替换JS脚本地址
      $('script[src]').each((i, elem) => {
        const src = $(elem).attr('src');
        if (src) {
          const absoluteUrl = new URL(src, baseUrl).href;
          $(elem).attr('src', `/proxy?u=${encodeURIComponent(absoluteUrl)}`);
        }
      });

      // 替换页面链接，让跳转也走代理
      $('a[href]').each((i, elem) => {
        const href = $(elem).attr('href');
        if (href && !href.startsWith('#')) {
          const absoluteUrl = new URL(href, baseUrl).href;
          $(elem).attr('href', `/proxy?u=${encodeURIComponent(absoluteUrl)}`);
        }
      });

      // 返回修改后的HTML
      res.send($.html());
    } else {
      // 二进制资源（图片、视频、字体等）直接返回
      res.setHeader('Content-Type', contentType);
      res.send(response.data);
    }
  } catch (error) {
    console.error('代理请求失败:', error.message);
    res.status(500).send(`访问失败：${error.message}`);
  }
});

app.listen(port, () => {
  console.log(`代理服务运行在 http://localhost:${port}`);
});

2. 写个简单的前端页面 #

在项目根目录创建public文件夹，里面放index.html：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>我的Web代理工具</title>
  <style>
    body { max-width: 1200px; margin: 20px auto; font-family: Arial, sans-serif; }
    .header { margin-bottom: 15px; }
    #urlInput { width: 75%; padding: 10px; font-size: 16px; }
    #goBtn { padding: 10px 20px; font-size: 16px; cursor: pointer; }
    #contentArea { margin-top: 20px; border: 1px solid #eee; padding: 15px; min-height: 500px; }
  </style>
</head>
<body>
  <div class="header">
    <input type="text" id="urlInput" placeholder="输入要访问的网址，例如：https://example.com">
    <button id="goBtn">访问</button>
  </div>
  <div id="contentArea"></div>

  <script>
    const goBtn = document.getElementById('goBtn');
    const urlInput = document.getElementById('urlInput');
    const contentArea = document.getElementById('contentArea');

    goBtn.addEventListener('click', async () => {
      const url = urlInput.value.trim();
      if (!url) {
        alert('请输入有效的网址');
        return;
      }
      try {
        contentArea.innerHTML = '加载中...';
        const response = await fetch(`/proxy?u=${encodeURIComponent(url)}`);
        const content = await response.text();
        contentArea.innerHTML = content;
      } catch (err) {
        contentArea.innerHTML = `加载失败：${err.message}`;
      }
    });

    // 支持回车提交
    urlInput.addEventListener('keydown', (e) => {
      if (e.key === 'Enter') goBtn.click();
    });
  </script>
</body>
</html>

• 反爬拦截：很多网站会检测代理请求，一定要模拟真实浏览器的请求头（UA、Referer这些），必要时可以加IP池或者Cookie转发
• HTTPS配置：你的服务器必须配HTTPS（用Let's Encrypt免费证书就行），否则浏览器会提示不安全，而且无法访问HTTPS的目标网站
• SSRF攻击防范：一定要验证用户输入的URL，禁止访问本地IP、内网资源，避免被攻击者利用
• 法律合规：这个非常重要！代理服务可能涉及版权、隐私问题，务必确保符合当地法律法规，不能用于非法用途
• 样式冲突：如果直接把目标网站的HTML插入到你的页面，可能会和你的页面样式冲突，进阶可以用iframe来隔离，但要处理iframe的跨域问题

• 加匿名化功能：隐藏用户真实IP、修改UA、禁用Cookie，实现类似匿名代理的效果
• 支持POST请求：处理表单提交、AJAX POST等请求，让代理功能更完整
• 浏览器UI模拟：添加前进/后退按钮、地址栏，让界面更像真实浏览器
• 缓存机制：缓存常用资源，提升访问速度，减少目标网站请求频率

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