Refused to display a frame because it set 'X-F

问题:

I am trying to set a iframe in the ionic3 but I am facing with this problem Refused to display a frame of webpages.

This is my code.

 <ion-content>
      <div #frame style="width:100%; height:100%; overflow:scroll !important;-webkit-overflow-scrolling:touch !important">
        <iframe [src]="url" class="iframe" scrolling="yes" ></iframe>
      </div>
    </ion-content>

 onInput() {
    this.open = true;
    this.url = this.domSanitizer.bypassSecurityTrustResourceUrl('https://www.youtube.com/embed/results?search_query=' + this.myInput);
}

回答1:

When you send a request like GET, POST, iframe (GET), etc. Your browser or WebView adds by deffault a header in "Request-Headers" with name "origin". That header, CAN´T be change it.

In your case, I can see than the url you are trying to embed it´s: "https://www.youtube.com/embed/results?search_query= + this.myInput" but Youtube´s documentation say than the url must be: "http://www.youtube.com/embed/VIDEO_ID?origin=http://yourPage.com".

When you use <iframe> with Youtube, ALWAYS you have to send a origin in parameters of the link.

origin: This parameter provides an extra security measure for the IFrame API and is only supported for IFrame embeds. If you are using the IFrame API, which means you are setting the enablejsapi parameter value to 1, you should always specify your domain as the origin parameter value. https://developers.google.com/youtube/player_parameters?hl=en-419#origin

Here you have a link to documentation de Youtube: https://developers.google.com/youtube/player_parameters?hl=en-419

Greetings!

回答2:

Try throwing this in your config.xml file in both platform sections

    <allow-navigation href="*" />
    <allow-navigation href="https://*youtube.com/*" />

回答3:

Youtube set X-FRAME-OPTIONS to SAMEORIGIN on their response header, so that means only sites with the same origin as Youtube (youtube.com) can load that site in an iframe or object.

https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/X-Frame-Options

You'll have to go about embedding the video the way Youtube wants you to.