Weigerte sich, in einem Frame angezeigt zu werden, da 'X-Frame-Options' auf 'SAMEORIGIN' gesetzt wurde.

Ich entwickle eine Website, die reaktionsschnell sein soll, damit die Leute von ihren Handys aus darauf zugreifen können. Die Site verfügt über einige gesicherte Teile, bei denen Sie sich mit Google, Facebook usw. anmelden können (OAuth).

Das Server-Backend wurde unter Verwendung der ASP.Net-Web-API 2 entwickelt und das Front-End besteht hauptsächlich aus AngularJS mit einigen Razor.

Für den Authentifizierungsteil funktioniert in allen Browsern, einschließlich Android, alles einwandfrei, aber die Google-Authentifizierung funktioniert auf dem iPhone nicht und es wird diese Fehlermeldung angezeigt

Refused to display 'https://accounts.google.com/o/openid2/auth
?openid.ns=http://specs.openid.ne…tp://axschema.org/namePerson
/last&openid.ax.required=email,name,first,last'
in a frame because it set 'X-Frame-Options' to 'SAMEORIGIN'.

Soweit es mich betrifft, verwende ich keinen Iframe in meinen HTML-Dateien.

Ich habe gegoogelt, aber keine Antwort hat mich dazu gebracht, das Problem zu beheben.

Ich habe eine bessere Lösung gefunden, vielleicht kann sie jemandem helfen, "watch?v="durch zu ersetzen, "v/"und es wird funktionieren

var url = url.replace("watch?v=", "v/");

OK, nachdem Sie mit Hilfe dieses SO-Beitrags mehr Zeit damit verbracht haben

Überwindung von "Anzeige durch X-Frame-Optionen verboten"

Ich habe es geschafft, das Problem zu lösen, indem ich es &output=embedvor dem Posten auf der Google-URL am Ende der URL hinzugefügt habe :

var url = data.url + "&output=embed";
window.location.replace(url);

Versuchen zu benutzen

https://www.youtube.com/embed/YOUR_VIDEO_CODE

Sie finden den gesamten eingebetteten Code im Abschnitt "Eingebetteter Code", und das sieht so aus

<iframe width="560" height="315"  src="https://www.youtube.com/embed/YOUR_VIDEO_CODE" frameborder="0" allowfullscreen></iframe>

In diesem Fall haben sie den Header auf SAMEORIGIN gesetzt, was bedeutet, dass sie das Laden der Ressource in einem Iframe außerhalb ihrer Domäne nicht zugelassen haben. Dieser Iframe kann also keine domänenübergreifende Anzeige anzeigen

Zu diesem Zweck müssen Sie den Speicherort in Ihrem Apache oder einem anderen von Ihnen verwendeten Dienst abgleichen

Wenn Sie Apache verwenden, dann in der Datei httpd.conf.

  <LocationMatch "/your_relative_path">
      ProxyPass absolute_path_of_your_application/your_relative_path
      ProxyPassReverse absolute_path_of_your_application/your_relative_path
   </LocationMatch>

Wenn Sie iframe für vimeo verwenden, ändern Sie die URL von:

https://vimeo.com/63534746

zu:

http://player.vimeo.com/video/63534746

Für mich geht das.

Zum Einbetten von YouTube-Videos in Ihre AngularJS-Seite können Sie einfach den folgenden Filter für Ihr Video verwenden

app.filter('scrurl', function($sce) {
    return function(text) {
        text = text.replace("watch?v=", "embed/");
        return $sce.trustAsResourceUrl(text);
    };
});

<iframe class="ytplayer" type="text/html" width="100%" height="360" src="{{youtube_url | scrurl}}" frameborder="0"></iframe>

Ich habe die folgenden Änderungen vorgenommen und funktioniert gut für mich.

Fügen Sie einfach das Attribut hinzu <iframe src="URL" target="_parent" />

_parent: Dies würde die eingebettete Seite im selben Fenster öffnen.

_blank: In einer anderen Registerkarte

Für mich bestand die Lösung darin, in console.developer.google.com die Anwendungsdomäne zum Abschnitt "Javascript Origins" der OAuth 2-Anmeldeinformationen hinzuzufügen.

Etwas spät, aber dieser Fehler kann auch verursacht werden, wenn Sie a native application Client IDanstelle von a verwenden web application Client ID.

Ich hatte das gleiche Problem bei der Implementierung in Angular 9. Dies sind die beiden Schritte, die ich ausgeführt habe:

1. Ändere deine YouTube-URL von https://youtube.com/your_codenach https://youtube.com/embed/your_code.

2. Und dann geben Sie die URL DomSanitizervon Angular weiter.

   import { Component, OnInit } from "@angular/core";
   import { DomSanitizer } from '@angular/platform-browser';
   
   @Component({
     selector: "app-help",
     templateUrl: "./help.component.html",
     styleUrls: ["./help.component.scss"],
   })
   export class HelpComponent implements OnInit {
   
     youtubeVideoLink: any = 'https://youtube.com/embed/your_code'
   
     constructor(public sanitizer: DomSanitizer) {
       this.sanitizer = sanitizer;   
     }
   
     ngOnInit(): void {}
   
     getLink(){
       return this.sanitizer.bypassSecurityTrustResourceUrl(this.youtubeVideoLink);
     }
   
   }

   <iframe width="420" height="315" [src]="getLink()" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>

Es gibt eine Lösung, die für mich funktioniert hat und sich auf die Eltern bezieht. Nachdem Sie die URL erhalten haben, die zur Google-Authentifizierungsseite umleitet, können Sie den folgenden Code ausprobieren:

var loc = redirect_location;      
window.parent.location.replace(loc);

Danke für die Frage. Für YouTube-Iframe ist das erste Problem die von Ihnen angegebene URL, eine eingebettete URL oder ein URL-Link aus der Adressleiste. Dieser Fehler gilt für nicht eingebettete URLs. Wenn Sie jedoch eine nicht eingebettete URL angeben möchten, müssen Sie in "safe Pipe" wie (sowohl für nicht eingebettete als auch für eingebettete URLs) codieren:

import {Pipe, PipeTransform} from '@angular/core';
import {DomSanitizer} from '@angular/platform-browser';

@Pipe({name: 'safe'})
export class SafePipe implements PipeTransform {

constructor(private sanitizer: DomSanitizer) {

}

transform(value: any, url: any): any {
    if (value && !url) {
        const regExp = /^.*(youtu.be\/|v\/|u\/\w\/|embed\/|watch\?v=|\&v=)([^#\&\?]*).*/;
        let match = value.match(regExp);
        if (match && match[2].length == 11) {
            console.log(match[2]);
            let sepratedID = match[2];
            let embedUrl = '//www.youtube.com/embed/' + sepratedID;
            return this.sanitizer.bypassSecurityTrustResourceUrl(embedUrl);
        }

     }

   }
}

es wird "vedioId" aufgeteilt. Sie müssen die Video-ID abrufen und dann die URL als eingebettet festlegen. In HTML

 <div>
   <iframe width="100%" height="300" [src]="video.url | safe"></iframe>
 </div>

Angular 2/5 nochmals vielen Dank.

Fügen Sie das Folgende mit dem URL-Suffix hinzu

/override-http-headers-default-settings-x-frame-options

Hatte ein ähnliches Problem beim Einbetten des YouTube-Chats und ich finde es heraus. Vielleicht gibt es eine ähnliche Lösung für ein ähnliches Problem.

Refused to display 'https://www.youtube.com/live_chat?v=yDc9BonIXXI&embed_domain=your.domain.web' in a frame because it set 'X-Frame-Options' to 'sameorigin'

Meine Webseite funktioniert mit www und ohne. Damit es funktioniert, müssen Sie sicherstellen, dass Sie diejenige laden, die auf dem Wert embedded_domain = aufgeführt ist. Möglicherweise fehlt eine Variable, um anzugeben , wo Ihr Iframe eingebettet werden soll. Um mein Problem zu beheben, musste ein Skript geschrieben werden, um die richtige Webseite zu erkennen und den richtigen iframe-Einbettungsdomänennamen auszuführen.

<iframe src='https://www.youtube.com/live_chat?v=yDc9BonIXXI&embed_domain=your.domain.web' width="100%" height="600" frameborder='no' scrolling='no'></iframe>

oder

<iframe src='https://www.youtube.com/live_chat?v=yDc9BonIXXI&embed_domain=www.your.domain.web' width="100%" height="600" frameborder='no' scrolling='no'></iframe>

Verstehen Sie, dass Sie keine Iframes verwenden, aber möglicherweise müssen Sie Ihrer Syntax noch eine Variable hinzufügen, um anzugeben, wo das Skript verwendet werden soll.

Bei der Verwendung von iframe zum Abmelden von Unterseiten mit unterschiedlichen Domänen ist dieses Problem aufgetreten. Die Lösung, die ich verwendet habe, bestand darin, zuerst den Iframe zu laden und dann die Quelle zu aktualisieren, nachdem der Frame geladen wurde.

var frame = document.createElement('iframe');
frame.style.display = 'none';
frame.setAttribute('src', 'about:blank');
document.body.appendChild(frame);
frame.addEventListener('load', () => {
  frame.setAttribute('src', url);
});

Youtube / Embed, zwei Geschmacksrichtungen:

https://www.youtube.com/embed/watch?v=eAxV4uO8oTU&list=RDeAxV4uO8oTU&start_radio=1 https://www.youtube.com/embed/CNG7yrHHJ5A

in Ihren Browser einfügen und sehen

das Original:

https://www.youtube.com/watch?v=eAxV4uO8oTU&list=RDeAxV4uO8oTU&start_radio=1 https://www.youtube.com/watch?v=CNG7yrHHJ5A

einer muss "Wache halten? V =", der andere nicht