iframe因策略限制无法加载第三方站点，求可行解决方案

问题代码 #

<!DOCTYPE html>
<html>
<head>
<p>Please see these following stocks</p>
</head>
<body>
<iframe src="https://finance.yahoo.com/quote/META/history/" title="META"></iframe>
<iframe src="https://www.bloomberg.com/quote/MSF:GR" title="MSF:GR"></iframe>
<iframe src="https://www.google.com/finance/quote/AMZN:NASDAQ" title="AMZN:NASDAQ"></iframe>
</body>
</html>

遇到的错误 #

• Unrecognized Content-Security-Policy directive 'require-trusted-types-for'
• 拒绝在框架中显示谷歌财经页面，原因是对方设置了X-Frame-Options为sameorigin
• Service Worker导航预加载请求在preloadResponse完成前被取消，若要使用preloadResponse，需用waitUntil()或respondWith()等待Promise完成
• 拒绝在框架中显示彭博页面，原因是对方的Content Security Policy（CSP）仅允许自身域名及指定子域名嵌入
• 拒绝在框架中显示雅虎财经页面，原因是对方的CSP仅允许自身关联域名嵌入

可行解决办法 #

1. 替换为官方嵌入组件/数据API
   多数财经平台都提供了官方嵌入工具或数据接口，这类工具专门适配外部网站展示需求，不会触发跨域嵌入限制。可以直接查找对应平台的「Embed」功能，生成官方提供的代码替换现有iframe。

2. 搭建服务器端代理中转内容
   自己开发简单后端服务，作为代理请求目标财经页面内容，再将内容返回给前端展示。这种方式能绕开浏览器跨域限制，但要注意：

   • 严格遵守目标网站的使用条款与robots协议，避免侵权
   • 需要处理页面样式、资源加载的适配问题，额外做开发调整

3. 忽略非核心错误
   第一个错误是旧浏览器对新CSP指令的兼容问题，不影响核心功能的话可以直接忽略，或升级浏览器版本解决；第三个Service Worker相关错误，若未主动使用预加载功能，直接移除相关Service Worker代码即可消除。

4. 用链接跳转替代嵌入
   放弃iframe嵌入，在页面添加指向各财经页面的跳转链接，让用户点击后直接访问原网站查看内容，完全避开所有嵌入限制，是最快捷的方案。

内容的提问来源于stack exchange，提问作者Y.D