Recusou-se a exibir em um quadro porque definiu 'X-Frame-Options' como 'SAMEORIGIN'

272

Estou desenvolvendo um site que deve ser responsivo para que as pessoas possam acessá-lo de seus telefones. O site possui algumas partes seguras que podem ser acessadas usando o Google, Facebook, ... etc (OAuth).

O servidor back-end é desenvolvido usando o ASP.Net Web API 2 e o front-end é principalmente o AngularJS com um pouco de Razor.

Para a parte de autenticação, tudo está funcionando bem em todos os navegadores, incluindo o Android, mas a autenticação do Google não está funcionando no iPhone e é exibida a seguinte mensagem de erro

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

Agora, no que me diz respeito, não uso iframe nos meus arquivos HTML.

Eu procurei no Google, mas nenhuma resposta me levou a resolver o problema.

Ali Hmer
fonte
iframes são por vezes sendo usado por serviços que você conectar-se mesmo se não estiver visível (à primeira vista)
NoWomenNoCry

Respostas:

171

Eu encontrei uma solução melhor, talvez ele possa ajudar alguém substituir "watch?v="por "v/"e irá funcionar

var url = url.replace("watch?v=", "v/");
Aymen Mouelhi
fonte
51
Você também pode alterar isso para usar "embed /" em vez de "v /" para que um URL completo se torne:<iframe width='1080' height='760' src="https://www.youtube.com/embed/dQw4w9WgXcQ" frameborder="0" allowfullscreen></iframe>
backwardm
1
eu sugiro alterar esta resposta para "embed /" porque "v /" não está mais funcionando
tm81
88

OK, depois de passar mais tempo nisso com a ajuda deste post do SO

Superando "Exibição proibida por X-Frame-Options"

Consegui resolver o problema adicionando &output=embedao final do URL antes de postar no URL do Google:

var url = data.url + "&output=embed";
window.location.replace(url);
Ali Hmer
fonte
1
na verdade, isso é para OAUTH, como afirmei no meu post original. e ainda funciona no OAUTH 2.0. embora o Google tenha alterado suas configurações para usar o serviço, agora você precisará alterar especificamente algumas propriedades para usar o OAUTH 2.0 e esse é o caso do middleware OWIN 3.0. Consulte este link se estiver recebendo uma mensagem de erro "access_denied". blogs.msdn.com/b/webdev/archive/2014/07/02/…
Ali Hmer
1
@AliHmer Muito obrigado amigo. Você salvou meu dia :) & = saída incorporar funcionou como aa encanto para mim .. :)
Sahil Manchanda
1
Também não funciona para o iframe do Google Agenda na visualização na web do aplicativo.
NoBugs
43

Tente usar

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

Você pode encontrar todo o código incorporado na seção 'Código incorporado' e que se parece com isso

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

Eles definiram o cabeçalho como SAMEORIGIN nesse caso, o que significa que eles não permitiram o carregamento do recurso em um iframe fora de seu domínio. Portanto, esse iframe não pode exibir vários domínios

insira a descrição da imagem aqui

Para esse fim, você precisa corresponder ao local em seu apache ou qualquer outro serviço que esteja usando

Se você estiver usando o apache, no arquivo 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
2
O que é your_relative_path?
Verde
2
Qual é o seu caminho_relativo?
Sobiaholic 10/0318
11

Para incorporar o vídeo do youtube na sua página angularjs, você pode simplesmente usar o seguinte filtro para o seu vídeo

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

Fiz as alterações abaixo e funciona bem para mim.

Basta adicionar o atributo <iframe src="URL" target="_parent" />

_parent: isso abriria a página incorporada na mesma janela.

_blank: Na guia diferente

rahulnikhare
fonte
1
Eu não sei o quão relevante é que a resposta à pergunta original, mas no meu caso, num contexto diferente, desde que a solução
Éric Viala
4

Para mim, a correção foi acessar console.developer.google.com e adicionar o domínio do aplicativo à seção "Javascript Origins" das credenciais do OAuth 2.

parlamento
fonte
2

Um pouco tarde, mas esse erro também pode ser causado se você usar um em native application Client IDvez de um web application Client ID.

Kevin
fonte
O que você quer dizer? Também notei que o quadro funciona em uma janela do Safari, mas não no iframe de uma visualização da web do aplicativo, mas como você muda isso?
NoBugs 30/07/2015
Meu problema foi semelhante, ao fazer a aplicação Web Client ID eu não incluí uris do meu site em duas seções que você colocá-los lá ao fazer a ID de cliente no console desenvolvedores do Google
Phylliida
2

Eu estava tendo o mesmo problema de implementação no Angular 9. Estas são as duas etapas que fiz:

  1. Altere seu URL do YouTube de https://youtube.com/your_codepara https://youtube.com/embed/your_code.

  2. E depois passe o URL através DomSanitizerdo 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
1

Existe uma solução que funcionou para mim, referindo-se aos pais. Depois de obter o URL que será redirecionado para a página de autenticação do Google, você pode tentar o seguinte código:

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

Obrigado pela pergunta. Para o iframe do YouTube, o primeiro problema é o URL que você forneceu, é o URL incorporado ou o link do URL na barra de endereços. esse erro para URL não incorporado, mas se você deseja fornecer URL não incorporado, precisará codificar em "Pipe seguro", como (para URL não incorporado ou incorporado):

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

     }

   }
}

ele irá dividir "vedioId". Você precisa obter o ID do vídeo e definir o URL como incorporado. Em HTML

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

Angular 2/5 obrigado novamente.

Rahat Ansari
fonte
0

adicione o abaixo com sufixo URL

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

Tive um problema semelhante ao incorporar o bate-papo do youtube e eu descobri. Talvez exista uma solução semelhante para um problema semelhante.

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'

Minha página da web funciona com www e sem ela. Portanto, para que funcione, você precisa carregar a que está listada no valor embed_domain = ... Talvez haja uma variável ausente para dizer onde incorporar seu iframe. Para corrigir meu problema, escrevi um script para detectar a página correta e executar o nome de domínio apropriado do iframe.

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

ou

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

Entenda que você não está usando iframes, mas ainda pode haver alguma variável que você precisa adicionar à sua sintaxe para informar onde o script será usado.

Luis H Cabrejo
fonte
-1

Ocorreu um problema semelhante ao usar o iframe para fazer logout de sub sites com domínios diferentes. A solução que usei foi carregar o iframe primeiro e depois atualizar a fonte após o carregamento do quadro.

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
fonte