如何实现输入URL展示网站移动端视图，解决iframe CORS等安全加载问题？

你遇到的iframe加载失败不是CORS策略导致的，是目标站点配置了X-Frame-Options或CSP的frame-ancestors响应头，禁止自身页面被第三方站点嵌入，属于浏览器的点击劫持防护机制。而curl方案只请求了初始HTML源码，没有处理相对路径资源、UA校验、Cookie依赖、客户端JS渲染逻辑，所以会出现资源缺失的情况。

方案1：服务端代理转发（适合静态站点/简单动态站点） #

通过服务端作为中间代理层，转发所有目标站点的请求，移除禁止嵌入的响应头，同时替换资源路径为代理地址，即可在iframe中正常加载。

核心实现代码 #

代理逻辑 proxy.php

<?php
// 生产环境请补充完整的安全校验逻辑，避免SSRF等漏洞
if (!isset($_GET['url'])) die('缺少URL参数');
$targetUrl = $_GET['url'];
// 基础URL合法性校验
if (!filter_var($targetUrl, FILTER_VALIDATE_URL)) die('URL格式不合法');

// 模拟移动端Safari UA
$mobileUA = 'Mozilla/5.0 (iPhone; CPU iPhone OS 16_0 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/16.0 Mobile/15E148 Safari/604.1';

$ch = curl_init($targetUrl);
curl_setopt($ch, CURLOPT_USERAGENT, $mobileUA);
curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
curl_setopt($ch, CURLOPT_FOLLOWLOCATION, true);
curl_setopt($ch, CURLOPT_SSL_VERIFYPEER, true); // 生产环境建议保持开启，避免证书伪造风险
curl_setopt($ch, CURLOPT_HEADER, true);

$response = curl_exec($ch);
$headerSize = curl_getinfo($ch, CURLINFO_HEADER_SIZE);
$rawHeaders = substr($response, 0, $headerSize);
$responseBody = substr($response, $headerSize);
curl_close($ch);

// 移除禁止嵌入的响应头
$cleanHeaders = preg_replace('/(X-Frame-Options|Content-Security-Policy.*frame-ancestors):.*\r\n/i', '', $rawHeaders);

// 替换HTML内的资源路径为代理地址（示例仅处理基础路径，生产环境需要适配所有资源类型）
$hostInfo = parse_url($targetUrl);
$baseHost = $hostInfo['scheme'] . '://' . $hostInfo['host'];
$responseBody = str_replace(['src="/', 'href="/'], ['src="proxy.php?url='.urlencode($baseHost).'/', 'href="proxy.php?url='.urlencode($baseHost).'/'], $responseBody);

// 输出处理后的响应头和内容
foreach (explode("\r\n", $cleanHeaders) as $header) {
    if (!empty($header) && !str_starts_with(strtolower($header), 'transfer-encoding')) {
        header($header);
    }
}
echo $responseBody;
?>

前端页面修改

<form method="get">
  <input name="website_url" type="url" required placeholder="输入要测试的站点URL">
  <input type="submit" value="查看移动端效果">
</form>

<?php if (isset($_GET['website_url'])): ?>
<!-- 设置移动端常用视口大小 -->
<iframe src="proxy.php?url=<?=urlencode($_GET['website_url'])?>" width="390" height="844" style="border: 1px solid #eee;"></iframe>
<?php endif; ?>

方案局限性 #

无法完美适配复杂客户端渲染（SPA）站点，部分依赖原始域名环境的JS逻辑可能运行异常。

方案2：无头浏览器模拟加载（适合所有站点，100%还原真实效果） #

使用无头浏览器（Puppeteer/Playwright/Chromedp）在服务端启动模拟移动端的浏览器实例，完整加载页面所有资源、执行JS逻辑后，要么直接返回截图，要么将渲染完成的内容处理后输出，完全还原真实移动设备的加载效果。

核心逻辑示例（Node.js + Puppeteer） #

const puppeteer = require('puppeteer');

async function getMobilePageResult(targetUrl) {
  const browser = await puppeteer.launch({ headless: 'new' });
  const page = await browser.newPage();
  // 配置移动端参数
  await page.setUserAgent('Mozilla/5.0 (iPhone; CPU iPhone OS 16_0 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/16.0 Mobile/15E148 Safari/604.1');
  await page.setViewport({ width: 390, height: 844, isMobile: true, hasTouch: true, deviceScaleFactor: 3 });
  // 等待页面所有资源加载完成
  await page.goto(targetUrl, { waitUntil: 'networkidle0', timeout: 30000 });
  
  // 输出方式1：返回整页截图，直接给前端展示
  const fullPageScreenshot = await page.screenshot({ fullPage: true, type: 'png' });
  // 输出方式2：返回渲染完成的HTML内容，处理后给iframe加载
  const renderedHtml = await page.content();
  
  await browser.close();
  return { fullPageScreenshot, renderedHtml };
}

方案优势 #

支持所有类型站点，包括纯客户端渲染的SPA、需要登录的站点、有复杂JS交互的站点，加载效果和真实移动端完全一致。

• 必须严格校验用户输入的URL，禁止访问内网IP段、本地回环地址、内部服务域名等，避免SSRF漏洞
• 生产环境需要限制单用户的请求频率，添加IP池轮换，避免被目标站点封禁
• 不要存储用户请求的敏感页面内容，避免合规风险

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