首页 > 解决方案 > 如何在角度应用程序中打开其他网站

问题描述

我正在尝试加载另一个网站,我将在其中列出网站列表。如果我点击网站链接,它必须在我的 Angular 应用程序中打开网站。是否有任何可用的选项在角度或任何地方我可以用来加载他们限制加载网站的网站

我曾尝试使用 HTML 标记元素 iframe、嵌入、对象和 jquery 加载函数来加载站点。一些网站正在打开,一些网站限制在其他应用程序上打开

<html>
<body>
<iframe src="https://stackoverflow.com" height="100%" width="100%"></iframe>
</body>
</html>

在角度

  <div >
    <iframe id="companyFrame" [src]="sourceURL | safe" class="frame"> 
    </iframe>
  </div>

  @Pipe({ name: "safe" })
  export class SafePipe implements PipeTransform {
  constructor(private sanitizer: DomSanitizer) {}
  transform(url) {
    return this.sanitizer.bypassSecurityTrustResourceUrl(url);
   }
  }

例如,我希望加载 StackOverflow 主页站点,但我收到一个错误,例如Refused to display ' https://stackoverflow.com/ ' in a frame 因为它将'X-Frame-Options'设置为'sameorigin'。 如果网站所有者不想允许,它是限制在 iframe 中加载页面的浏览器默认选项。所以我想要替代选项而不是 iframe

标签: htmlangulariframex-frame-options

解决方案


'X-Frame-Options' 由所有者/服务器强制执行,因此人们不能将他们的网站用作使用 iframe 的其他网站。

像这样想一个情况:如果你在整个页面的 iframe 中启动 google,那么你可以使用你的 url 为 google 服务,你也可以做更多疯狂的事情。

您可以使用一些 chorme/FF 扩展来绕过它。但是你不能指望你的所有用户都会使用它。

https://chrome.google.com/webstore/detail/ignore-x-frame-headers/gleekbfjekiniecknbkamfmkohkpodhe


推荐阅读