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 tem algumas partes seguras que podem ser acessadas usando o Google, Facebook, … etc (OAuth).

O backend do servidor é desenvolvido usando o ASP.Net Web API 2 e o front end é principalmente o AngularJS com alguma 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 isso me dá essa 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, até onde sei, não uso nenhum iframe em meus arquivos HTML.

Eu pesquisei por aí, mas nenhuma resposta me levou a corrigir o problema.

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

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

OK, depois de passar mais tempo com isso com a ajuda desta postagem SO

Superando “Display proibido por X-Frame-Options”

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

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

Eles definiram o header como SAMEORIGIN neste 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 o domínio cruzado

insira a descrição da imagem aqui

Para este efeito, você precisa coincidir com a localização em seu apache ou qualquer outro serviço que você está usando

Se você estiver usando o apache, então no arquivo httpd.conf.

   ProxyPass absolute_path_of_your_application/your_relative_path ProxyPassReverse absolute_path_of_your_application/your_relative_path  

Tente usar

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

Você pode encontrar todos os códigos incorporados na seção “Código Embeded” e que se parece com isso

  

Se você estiver usando o iframe para o 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); }; }); 
  

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

Basta adicionar o atributo

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

_blank : na aba diferente

Para mim, a solução era entrar em console.developer.google.com e adicionar o domínio do aplicativo à seção “Origens Javascript” das credenciais do OAuth 2.

Pouco tarde, mas esse erro também pode ser causado se você usar um native application Client ID vez de um web application Client ID .

Obrigado pela pergunta. Para o iframe do YouTube, o primeiro problema é o URL que você forneceu, ele é um URL incorporado ou um link de URL da barra de endereço. este erro para URL não incorporado, mas se você deseja fornecer URL não incorporada, será necessário codificar em “Tubulação segura” 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 vai dividir “vedioId”. Você precisa obter o ID do vídeo e, em seguida, definir como URL como incorporado. Em Html

  

Angular 2/5 obrigado novamente.

Existe uma solução que funcionou para mim, referindo-se ao pai. Depois de obter o URL que redirectá 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);