Rifiutato di essere visualizzato in una cornice perché imposta ‘X-Frame-Options’ su ‘SAMEORIGIN’

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 che possono essere registrate usando Google, Facebook, … ecc. (OAuth).

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

Per la parte di autenticazione, tutto funziona perfettamente in tutti i browser, incluso Android, ma l’autenticazione 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'. 

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

Ho cercato su google, ma nessuna risposta mi ha indotto a risolvere il problema.

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

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

OK dopo aver trascorso più tempo su questo con l’aiuto di questo post SO

Superamento di “Visualizzazione vietata da X-Frame-Options”

Sono riuscito a risolvere il problema aggiungendo &output=embed alla fine dell’URL prima di postare l’URL di google:

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

Hanno impostato l’intestazione su SAMEORIGIN in questo caso, il che significa che non hanno consentito il caricamento della risorsa in un iframe al di fuori del proprio dominio. Quindi questo iframe non è in grado di visualizzare il dominio incrociato

inserisci la descrizione dell'immagine qui

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

Se stai usando Apache, allora nel file httpd.conf.

   ProxyPass absolute_path_of_your_application/your_relative_path ProxyPassReverse absolute_path_of_your_application/your_relative_path  

Prova ad usare

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

È ansible trovare tutti i codici incorporati nella sezione “Codice incorporato” e appare in questo modo

  

Se stai utilizzando iframe per vimeo, modifica l’URL da:

https://vimeo.com/63534746

a:

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

Per me funziona.

Per incorporare video di youtube nella tua pagina di 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); }; }); 
  

Ho fatto le modifiche qui sotto e funziona bene per me.

Basta aggiungere l’attributo

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

_blank : in un’altra scheda

Per me la soluzione era andare su console.developer.google.com e aggiungere il dominio dell’applicazione alla sezione “Origini Javascript” delle credenziali OAuth 2.

Poco tardi, ma questo errore può anche essere causato se si utilizza un native application Client ID anziché un web application Client ID .

Grazie per la domanda. Per iframe YouTube il primo problema è l’URL che hai fornito, è l’URL incorporato o il link URL dalla barra degli indirizzi. questo errore per l’URL non incorporato, ma se vuoi fornire un URL non incorporato, devi codificare in “Safe Pipe” come (per entrambi gli URL non incorporati o incorporati):

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

si dividerà “vedioId”. Devi ottenere l’id del video, quindi impostare l’URL come incorporato. In Html

  

Angular 2/5 grazie ancora.

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

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