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

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.

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

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

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>

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

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>

Se você estiver usando o iframe para vimeo, altere o URL de:

https://vimeo.com/63534746

para:

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

Funciona para mim.

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>

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

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.

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.

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>

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

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.

adicione o abaixo com sufixo URL

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

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.

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

youtube / embed, dois sabores:

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

cole no seu navegador e veja

o original:

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

um precisa ficar vigiando? V = ", o outro não