我如何绕过X框架选项

时间:2019-10-17 03:22:10

标签: angular typescript x-frame-options

我正在尝试在单击链接时在iframe中显示一个网站,但是我遇到了x-frame-option问题。然后,我使用x-frame-bypass。当我像下面这样在 HTML 中使用时,它可以正常工作。

HTML

<html>

<head>
<title></title>
<script src="https://unpkg.com/@ungap/custom-elements-builtin"></script>
<script type="module" src="https://unpkg.com/x-frame-bypass"></script>
</head>
<body>
<iframe is="x-frame-bypass" src="https://news.ycombinator.com/" name="myIframe"></iframe>

</body>
</html>

但是,当我尝试单击链接并在iframe中打开时,它不起作用。我正在使用角度。像波纹管这样的示例代码。

index.html

<html>
<head>
  <meta charset="utf-8">
  <title></title>
  <script src="https://unpkg.com/@ungap/custom-elements-builtin"></script>
  <script type="module" src="https://unpkg.com/x-frame-bypass"></script>
  <base href="/">

  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
  <my-app>Loading...</my-app>
</body>
</html>

app.component.html

<div style="text-align:center">
  <h1>
   Test Open URL in Iframe
  </h1>
  <a class="link-call" (click)="onTest('https://news.ycombinator.com/')" style="background:red;padding: 14px 25px;color:white;cursor:pointer">test</a>
  </div>


<iframe is="x-frame-bypass" width="100%" height="100%" frameBorder="0" [src]="urlSafe"></iframe>

app.component.ts

name = 'Set iframe source';
  url: string;
  urlSafe: SafeResourceUrl;

  constructor(public sanitizer: DomSanitizer) { }

  ngOnInit() {

  }
  onTest(url){
    this.urlSafe= this.sanitizer.bypassSecurityTrustResourceUrl(url);
  }

DEMO供您参考

0 个答案:

没有答案