Ionic3中嵌入iframe遇X-Frame-Options sameorigin问题求助

嘿，我看你在Ionic3项目里嵌iframe时碰到了那个烦人的X-Frame-Options报错，这个问题我之前帮朋友排查过，给你唠唠原因和解决办法！

首先得搞懂这个报错：Refused to display a frame because it set 'X-Frame-Options' to 'sameorigin'，意思是你要嵌入的网站（比如你代码里的YouTube）设置了安全响应头，只允许和它同域名的页面把它嵌成iframe，外部域名直接嵌入会被浏览器的安全机制拦截，这可不是Ionic的锅哦。

先看你的代码，你已经用domSanitizer.bypassSecurityTrustResourceUrl处理了URL，这一步是完全正确的，所以问题不在Ionic的安全校验上，核心是目标网站的限制。

给你针对性的解决办法：

针对YouTube这类视频平台的专属方案 #

YouTube本身不允许直接嵌入普通的视频页面，但它提供了官方的嵌入接口！你需要把原来的URL换成Embed格式：
比如原来的视频链接是https://www.youtube.com/watch?v=xxx，就改成https://www.youtube.com/embed/xxx（把watch?v=换成embed/），这个格式是YouTube专门开放给iframe嵌入的，不会触发X-Frame-Options的限制。

替换后你的代码里的url设置就变成：

this.url = this.domSanitizer.bypassSecurityTrustResourceUrl('https://www.youtube.com/embed/你的视频ID');

通用场景的替代思路（如果是其他第三方网站） #

如果是别的网站也出现这个问题，分两种情况：

• 如果目标网站是你自己开发的：可以修改服务器配置，把X-Frame-Options响应头改成allow-from [你的Ionic项目域名]，或者直接移除这个响应头（但要注意，移除可能带来点击劫持的安全风险，谨慎操作）。
• 如果是第三方网站且没有提供嵌入接口：那没办法直接用iframe嵌入了，你可以考虑用Ionic的InAppBrowser插件引导用户在外部浏览器打开目标页面，或者看看有没有官方API可以获取内容来展示。

最后再确认下你的DomSanitizer注入是否正确，组件里要先导入并注入：

import { DomSanitizer } from '@angular/platform-browser';

constructor(private domSanitizer: DomSanitizer) {}

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