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


272

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.


los iframes a veces están siendo utilizados por servicios a los que se conecta, incluso si no es visible (a primera vista)
NoWomenNoCry

Respuestas:


171

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/");

51
También puede cambiar eso para usar "incrustar /" en lugar de "v /" para que se convierta en una URL completa:<iframe width='1080' height='760' src="https://www.youtube.com/embed/dQw4w9WgXcQ" frameborder="0" allowfullscreen></iframe>
backwardm

1
sugiero cambiar esta respuesta a "incrustar /" porque "v /" ya no funciona
tm81

88

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

1
en realidad esto es para OAUTH como dije en mi publicación original. y todavía lo hace en OAUTH 2.0. aunque, Google ha cambiado su configuración para usar el servicio, por lo que ahora tendrá que cambiar específicamente algunas propiedades para usar OAUTH 2.0 y este es el caso en el middleware OWIN 3.0. Consulte este enlace si recibe un mensaje de error "access_denied". blogs.msdn.com/b/webdev/archive/2014/07/02/…
Ali Hmer

1
@AliHmer Muchas gracias amigo. Me salvaste el día :) & output = embed funcionó como un encanto para mí .. :)
Sahil Manchanda

1
Tampoco funciona para el marco flotante de Google Calendar dentro de la vista web de la aplicación.
NoBugs


35

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

ingrese la descripción de la imagen aquí

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>

2
¿Qué es your_relative_path?
Verde

2
¿Cuál es tu ruta_relativa?
Sobiaholic


11

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>


7

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


1
No sé cuán relevante es esa respuesta a la pregunta original, pero en mi caso, en un contexto diferente, proporcionó la solución
Éric Viala,

4

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.


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.


¿Qué quieres decir? También noté que el marco funciona en una ventana de Safari, pero no en el iframe de la vista web de una aplicación, pero ¿cómo se cambia esto?
NoBugs

Mi problema fue similar, al hacer la aplicación web ID de cliente no incluí las uris de mi sitio web en dos secciones, las puse allí al hacer la identificación del cliente en la consola de desarrolladores de Google
Phylliida

2

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>

1

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

0

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.


0

agregue el siguiente con sufijo URL

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

0

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.


-1

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


Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.