不使用iframe在div加载外部URL失效 求原生及jQuery解决方案

问题根因 #

你遇到的失效问题核心是浏览器同源策略和目标站点的反嵌入配置：

• 你之前测试validator.w3.org正常是因为该站点没有设置禁止嵌入的响应头，而Google这类主流站点都设置了X-Frame-Options: DENY/SAMEORIGIN响应头，明确禁止被非同源的页面用<object>、<iframe>、<embed>这类标签嵌入
• jQuery的.load()方法本质是AJAX请求，同样受同源策略限制，跨域请求没有对方服务器授权的话会被浏览器直接拦截

可行解决方案 #

1. 服务端代理方案（唯一兼容所有场景的方案） #

不管用原生还是jQuery实现，这个方案都是通用的：

• 你自己的后端新增一个代理接口，由后端去请求外部URL的内容，再把内容返回给前端
• 前端直接请求自己的同域代理接口拿内容，插入到div中即可

后端代理示例（以Node.js Express为例）

const express = require('express');
const axios = require('axios');
const app = express();

app.get('/proxy', async (req, res) => {
  const targetUrl = req.query.url;
  try {
    const response = await axios.get(targetUrl);
    res.send(response.data);
  } catch (err) {
    res.status(500).send('请求失败');
  }
});
app.listen(3000);

2. 前端原生实现方案 #

如果目标站点配置了CORS允许你的域名跨域访问，可以直接用fetch请求内容插入：

<div id="contentContainer" style="width: 800px; height: 600px; overflow: scroll; border: 5px ridge blue"></div>
<script>
fetch('你的代理接口地址?url=https://www.google.com')
  .then(res => res.text())
  .then(html => {
    document.getElementById('contentContainer').innerHTML = html;
  })
  .catch(err => console.log(err));
</script>

注意：直接插入外部HTML可能存在XSS安全风险，建议对返回内容做安全过滤后再插入。

3. jQuery实现方案 #

同样基于代理接口，用.load()方法直接加载代理接口返回的内容：

<script src="https://code.jquery.com/jquery-3.4.1.js"></script>
<div id="contentContainer" style="width: 800px; height: 600px; overflow: scroll; border: 5px ridge blue"></div>
<script>
$('#contentContainer').load('你的代理接口地址?url=https://www.google.com', function(err) {
  if (err) console.log('加载失败', err);
});
</script>

两种前端方案的差异 #

• 原生方案不需要引入第三方库，性能更优，兼容性取决于你要适配的浏览器版本，fetch在IE下不支持需要做polyfill
• jQuery方案代码更简洁，自带旧浏览器兼容，但是需要额外加载jQuery库，体积开销更大

补充：如果目标站点没有开放CORS也没有办法做服务端代理，没有任何纯前端方案可以实现直接嵌入Google这类大站的内容，所有前端嵌入方案都会被浏览器的安全策略拦截。

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