Se negó a mostrar en un marco porque establece 'X-Frame-Options' en 'SAMEORIGIN'

Estoy desarrollando un sitio web que se supone que debe responder para que las personas puedan acceder a él desde sus teléfonos. El sitio tiene algunas partes seguras que se pueden iniciar sesión con Google, Facebook, ... etc. (OAuth).

El servidor back-end se desarrolla utilizando ASP.Net Web API 2 y el front-end es principalmente AngularJS con algo de Razor.

Para la parte de autenticación, todo funciona bien en todos los navegadores, incluido Android, pero la autenticación de Google no funciona en iPhone y me da este mensaje de error

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

Ahora, en lo que a mí respecta, no uso ningún iframe en mis archivos HTML.

Busqué en Google, pero ninguna respuesta me consiguió solucionar el problema.

He encontrado una solución mejor, tal vez puede ayudar a alguien sustituir "watch?v="por "v/"y funcionará

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

OK después de pasar más tiempo en esto con la ayuda de esta publicación SO

Superar "Pantalla prohibida por X-Frame-Options"

Logré resolver el problema agregando &output=embedal final de la URL antes de publicar en la URL de Google:

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

Tratar de usar

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

Puede encontrar todo el código incrustado en la sección 'Código incrustado' y se ve así

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

Han establecido el encabezado en SAMEORIGIN en este caso, lo que significa que no han permitido cargar el recurso en un iframe fuera de su dominio. Por lo tanto, este iframe no puede mostrar dominios cruzados

Para este propósito, debe coincidir con la ubicación en su apache o cualquier otro servicio que esté utilizando

Si está utilizando apache, entonces en el archivo 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>

Si está utilizando iframe para vimeo, cambie la url de:

https://vimeo.com/63534746

a:

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

Esto funciona para mi.

Para insertar videos de YouTube en su página angularjs, simplemente puede usar el siguiente filtro para su 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>

Hice los siguientes cambios y funciona bien para mí.

Solo agrega el atributo <iframe src="URL" target="_parent" />

_parent: esto abriría la página incrustada en la misma ventana.

_blank: En una pestaña diferente

Para mí, la solución fue ir a console.developer.google.com y agregar el dominio de la aplicación a la sección "Orígenes de Javascript" de las credenciales de OAuth 2.

Poco tarde, pero este error también puede ser causado si usa un en native application Client IDlugar de un web application Client ID.

Estaba teniendo el mismo problema al implementar en Angular 9. Estos son los dos pasos que hice:

1. Cambia tu URL de YouTube de https://youtube.com/your_codea https://youtube.com/embed/your_code.

2. Y luego pasa la URL a través DomSanitizerde 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>

Hay una solución que funcionó para mí, en referencia a los padres. Después de obtener la URL que redirigirá a la página de autenticación de Google, puede probar el siguiente código:

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

Gracias por la pregunta Para el iframe de YouTube, el primer problema es la URL que ha proporcionado, es una URL incrustada o un enlace URL de la barra de direcciones. este error para URL no incrustada pero si desea proporcionar URL no incrustada, entonces necesita codificar en "Safe Pipe" como (para URL no incrustada o incrustada):

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

     }

   }
}

se dividirá "vedioId". Debe obtener la identificación del video y luego configurarla como URL como incrustada. En HTML

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

Angular 2/5 gracias de nuevo.

agregue el siguiente con sufijo URL

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

Tuve un problema similar al insertar el chat de YouTube y lo descubrí. Tal vez hay una solución similar para un problema similar.

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'

Mi página web funciona con www y sin ella. Por lo tanto, para que funcione, debe asegurarse de cargar el que aparece en el valor embed_domain = ... Tal vez haya una variable que le falta para decir dónde incrustar su iframe. Para solucionar mi problema tenía que escribir un script para detectar la página web correcta y ejecutar el nombre de dominio de incrustación de iframe adecuado.

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

Comprenda que no está usando iframes, pero aún puede haber alguna variable que necesite agregar a su sintaxis para decirle dónde se usará el script.

Me encontré con este problema similar al usar iframe para cerrar sesión en sub sitios con diferentes dominios. La solución que usé fue cargar el iframe primero, luego actualizar la fuente después de cargar el marco.

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, dos sabores:

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

pegar en su navegador y ver

el original:

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

uno necesita mantener "watch? V =", el otro no