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

272

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.

Ali Hmer
quelle
iframes werden manchmal von Diensten verwendet, mit denen Sie eine Verbindung herstellen, auch wenn sie (auf den ersten Blick) nicht sichtbar sind
NoWomenNoCry

Antworten:

171

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/");
Aymen Mouelhi
quelle
51
Sie können dies auch ändern, um "embedded /" anstelle von "v /" zu verwenden, sodass eine vollständige URL lautet:<iframe width='1080' height='760' src="https://www.youtube.com/embed/dQw4w9WgXcQ" frameborder="0" allowfullscreen></iframe>
backwardm
1
Ich schlage vor, diese Antwort in "embedded /" zu ändern, da "v /" nicht mehr funktioniert
tm81
88

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);
Ali Hmer
quelle
1
Eigentlich ist dies für OAUTH, wie ich in meinem ursprünglichen Beitrag angegeben habe. und tut es immer noch in OAUTH 2.0. Obwohl Google seine Einstellungen geändert hat, um den Dienst zu nutzen, müssen Sie jetzt einige Eigenschaften ändern, um OAUTH 2.0 zu verwenden. Dies ist in der OWIN 3.0-Middleware der Fall. Verweisen Sie auf diesen Link, wenn Sie die Fehlermeldung "access_denied" erhalten. blogs.msdn.com/b/webdev/archive/2014/07/02/…
Ali Hmer
1
@AliHmer Vielen Dank Kumpel. Du hast meinen Tag gerettet :) & output = embedded hat wie ein Zauber für mich funktioniert .. :)
Sahil Manchanda
1
Funktioniert auch nicht für den Google-Kalender-Iframe in der App-Webansicht.
NoBugs
42

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>
Bogdan Alexandru Militaru
quelle
35

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

Geben Sie hier die Bildbeschreibung ein

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>
Ibtesam Latif
quelle
2
Was ist your_relative_path?
Grün
2
Was ist dein_relativer_Pfad?
Sobiaholic
11

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>

Irfan Muhammad
quelle
7

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

rahulnikhare
quelle
1
Ich weiß nicht, wie relevant diese Antwort auf die ursprüngliche Frage ist, aber in meinem Fall lieferte sie in einem anderen Kontext die Lösung
Éric Viala,
4

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.

Parlament
quelle
2

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

Kevin
quelle
Was meinst du? Mir ist auch aufgefallen, dass der Frame in einem Safari-Fenster funktioniert, jedoch nicht im Iframe der Webansicht einer App. Wie können Sie dies ändern?
NoBugs
Mein Problem war ähnlich, als ich die Client-ID der Webanwendung erstellte. Ich habe die Uris meiner Website nicht in zwei Abschnitte aufgenommen, die Sie dort abgelegt haben, als Sie die Client-ID in der Google-Entwicklerkonsole erstellt haben
Phylliida
2

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>
Vivek Thakkar
quelle
1

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);
Dimitris Voudrias
quelle
0

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.

Rahat Ansari
quelle
0

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

/override-http-headers-default-settings-x-frame-options
Arul
quelle
0

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.

Luis H Cabrejo
quelle
-1

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);
});

Nutzs
quelle