Si è rifiutata di essere visualizzata in un frame perché ha impostato "X-Frame-Options" su "SAMEORIGIN"

283

Sto sviluppando un sito web che dovrebbe essere reattivo in modo che le persone possano accedervi dai loro telefoni. Il sito ha alcune parti protette a cui è possibile accedere utilizzando Google, Facebook, ... ecc. (OAuth).

Il backend del server è sviluppato utilizzando ASP.Net Web API 2 e il front end è principalmente AngularJS con alcuni Razor.

Per la parte di autenticazione, tutto funziona correttamente in tutti i browser incluso Android ma l'autenticazione di Google non funziona su iPhone e mi dà questo messaggio di errore

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'.

Per quanto mi riguarda, non uso alcun iframe nei miei file HTML.

Ho cercato su Google, ma nessuna risposta mi ha permesso di risolvere il problema.

angularjs  asp.net-web-api  google-oauth 
— Ali Hmer
fonte
Gli iframe a volte vengono utilizzati dai servizi a cui ti connetti anche se non è visibile (a prima vista)
— NoWomenNoCry

Risposte:

176

Ho trovato una soluzione migliore, forse può aiutare qualcuno sostituirlo "watch?v="con "v/"e funzionerà

var url = url.replace("watch?v=", "v/");
— Aymen Mouelhi
fonte
53
Puoi anche cambiarlo per utilizzare "embed /" invece di "v /" in modo che un URL completo diventi:<iframe width='1080' height='760' src="https://www.youtube.com/embed/dQw4w9WgXcQ" frameborder="0" allowfullscreen></iframe>
— backwardm
2
suggerisco di cambiare questa risposta in "embed /" perché "v /" non funziona più
— tm81
92

OK dopo aver speso più tempo su questo con l'aiuto di questo post SO

Superamento di "Visualizzazione proibita da X-Frame-Options"

Sono riuscito a risolvere il problema aggiungendo &output=embedalla fine dell'URL prima di postare sull'URL di Google:

var url = data.url + "&output=embed";
window.location.replace(url);
— Ali Hmer
fonte
1
in realtà questo è per OAUTH come ho affermato nel mio post originale. e lo fa ancora in OAUTH 2.0. tuttavia, Google ha modificato le sue impostazioni per utilizzare il servizio, quindi ora dovrai modificare specificamente alcune proprietà per utilizzare OAUTH 2.0 e questo è il caso del middleware OWIN 3.0. Fare riferimento a questo collegamento se si riceve un messaggio di errore "access_denied". blogs.msdn.com/b/webdev/archive/2014/07/02/…
— Ali Hmer
1
@AliHmer Grazie mille amico. Mi hai salvato la giornata :) & output = embed ha funzionato come un fascino per me .. :)
— Sahil Manchanda
1
Non funziona neanche per l'iframe del calendario di Google nella visualizzazione web dell'app.
— NoBugs
come posso farlo se voglio visualizzare il mio altro sito Web all'interno della mia app mobile in un iframe
— Abraham,
37

In questo caso hanno impostato l'intestazione su SAMEORIGIN, il che significa che non hanno consentito il caricamento della risorsa in un iframe al di fuori del loro dominio. Quindi questo iframe non è in grado di visualizzare interdominio

inserisci qui la descrizione dell'immagine

A questo scopo è necessario abbinare la posizione nel tuo apache o in qualsiasi altro servizio che stai utilizzando

Se stai usando apache, allora nel file 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
fonte
4
Che cos'è your_relative_path?
— Verde
4
Cos'è your_relative_path?
— Sobiaholic
qual è il percorso relativo dell'uomo
— Abraham il
12

Per incorporare il video di YouTube nella tua pagina angularjs, puoi semplicemente utilizzare il seguente filtro per il tuo video

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>
Espandi lo snippet

— Irfan Muhammad
fonte
7

Ho apportato le seguenti modifiche e funziona bene per me.

Basta aggiungere l'attributo <iframe src="URL" target="_parent" />

_parent: questo aprirà la pagina incorporata nella stessa finestra.

_blank: In una scheda diversa

— rahulnikhare
fonte
1
Non so quanto sia rilevante quella risposta alla domanda originale, ma nel mio caso, in un contesto diverso, ha fornito la soluzione
— Éric Viala
4

Per me la soluzione è stata quella di accedere a console.developer.google.com e aggiungere il dominio dell'applicazione alla sezione "Javascript Origins" delle credenziali di OAuth 2.

— parlamento
fonte
4

Stavo riscontrando lo stesso problema durante l'implementazione in Angular 9. Questi sono i due passaggi che ho fatto:

  1. Cambia il tuo URL YouTube da https://youtube.com/your_codea https://youtube.com/embed/your_code.

  2. E poi passa l'URL DomSanitizerdi Angular.

    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
fonte
2

Un po 'in ritardo, ma questo errore può essere causato anche se si utilizza a native application Client IDinvece di web application Client ID.

— Kevin
fonte
Cosa intendi? Ho anche notato che la cornice funziona in una finestra di Safari, ma non nell'iframe della visualizzazione web di un'app, ma come si modifica?
— NoBugs
Il mio problema era simile, quando ho creato l'ID client dell'applicazione Web non ho incluso gli uris del mio sito Web in due sezioni, li hai inseriti lì quando crei l'ID client nella console degli sviluppatori di Google
— Phylliida
1

C'è una soluzione che ha funzionato per me, riferendosi al genitore. Dopo aver ottenuto l'URL che reindirizzerà alla pagina di autenticazione di Google, puoi provare il seguente codice:

var loc = redirect_location;      
window.parent.location.replace(loc);
— Dimitris Voudrias
fonte
1

Grazie per la domanda. Per l'iframe di YouTube il primo problema è l'URL che hai fornito, l'URL incorporato o il collegamento URL dalla barra degli indirizzi. questo errore per l'URL non incorporato, ma se si desidera fornire un URL non incorporato, è necessario codificare in "pipe sicuro" come (sia per l'URL non incorporato che per quello incorporato):

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

     }

   }
}

dividerà "vedioId". Devi ottenere l'ID video, quindi impostare l'URL come incorporato. In Html

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

Angular 2/5 grazie ancora.

— Rahat Ansari
fonte
0

aggiungere quanto segue con il suffisso URL

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

Ho avuto un problema simile durante l'incorporamento della chat di YouTube e l'ho capito. Forse esiste una soluzione simile per un problema simile.

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'

La mia pagina web funziona con www e senza di essa. Quindi per farlo funzionare devi assicurarti di caricare quello che è elencato su embed_domain = value ... Forse c'è una variabile che ti manca per dire dove incorporare il tuo iframe. Per risolvere il mio problema ho dovuto scrivere uno script per rilevare la pagina Web corretta ed eseguire il nome di dominio incorporato iframe corretto.

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

o 

<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>

Comprendi che non stai utilizzando iframe, ma potrebbe comunque esserci qualche variabile che devi aggiungere alla tua sintassi per dirgli dove verrà utilizzato lo script.

— Luis H Cabrejo
fonte
-1

Ho riscontrato questo problema simile durante l'utilizzo di iframe per disconnettersi da siti secondari con domini diversi. La soluzione che ho usato è stata caricare prima l'iframe, quindi aggiornare l'origine dopo che il frame è stato caricato.

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);
});
Espandi lo snippet

— Nutzs
fonte
Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.