web-dev-qa-db-fra.com

Refuse de s'afficher dans un cadre parce que l'option 'X-Frame-Options' était définie sur 'SAMEORIGIN'

Je développe un site Web qui est censé être réactif afin que les gens puissent y accéder à partir de leur téléphone. Certaines parties sécurisées du site peuvent être connectées à l'aide de Google, Facebook, etc., etc. (OAuth).

Le backend du serveur est développé à l’aide de l’API Web ASP.Net 2 et le front-end est principalement AngularJS avec certains Razor.

Pour la partie authentification, tout fonctionne correctement dans tous les navigateurs, y compris Android, mais l'authentification de Google ne fonctionne pas sur l'iPhone et me donne ce message d'erreur.

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

En ce qui me concerne, je n’utilise aucun iframe dans mes fichiers HTML.

J'ai cherché sur Google, mais aucune réponse ne m'a permis de résoudre le problème.

angularjsasp.net-web-apigoogle-oauth
226
Ali Hmer

D'ACCORD. après avoir passé plus de temps là-dessus à l’aide de ce SO post

Surmonter "Affichage interdit par X-Frame-Options"

J'ai réussi à résoudre le problème en ajoutant &output=embed à la fin de l'URL avant de poster sur l'URL de Google:

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

J'ai trouvé une meilleure solution, peut-être que cela pourrait aider quelqu'un Remplacer "watch?v=" par "v/" et cela fonctionnera

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

Essayez d'utiliser 

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

Vous pouvez trouver tout le code intégré dans la section 'Code intégré' et cela ressemble à ceci

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

Ils ont défini l'en-tête sur SAMEORIGIN dans ce cas, ce qui signifie qu'ils ont interdit le chargement de la ressource dans une iframe en dehors de leur domaine. Donc, cette iframe n'est pas capable d'afficher des domaines croisés

 enter image description here

Pour ce faire, vous devez faire correspondre le lieu dans votre Apache ou tout autre service que vous utilisez.

Si vous utilisez Apache, utilisez le fichier 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>
25
Ibtesam Latif

Si vous utilisez iframe pour vimeo, modifiez l'URL à partir de:

https://vimeo.com/63534746

à:

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

Ça marche pour moi.

17
Shakir Muhammed

Pour intégrer la vidéo youtube à votre page angularjs, vous pouvez simplement utiliser le filtre suivant pour votre vidéo

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>

11
Irfan Muhammad

J'ai fait les modifications ci-dessous et fonctionne bien pour moi.

Ajoutez simplement l'attribut <iframe src="URL" target="_parent" />

_parent: cela ouvrirait la page incorporée dans la même fenêtre.

_blank: dans un onglet différent

4
rahulnikhare

Pour moi, le correctif consistait à accéder à console.developer.google.com et à ajouter le domaine d'application à la section "Javascript Origins" des informations d'identification OAuth 2.

3
parliament

Merci pour la question . Pour YouTube iframe le premier numéro est l’URL que vous avez indiquée, s’agit-il d’une URL ou d’un lien URL intégré à partir de la barre d’adresse? alors vous devez coder dans "safe Pipe" comme (pour les URL incorporées ou non incorporées):

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

     }

   }
}

il se séparera "vedioId". Vous devez obtenir l'id de la vidéo, puis définir l'URL comme étant intégrée . En HTML

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

Angulaire 2/5 Merci encore.

2
Rahat Ansari

Un peu tard, mais cette erreur peut aussi être provoquée si vous utilisez un native application Client ID au lieu d'un web application Client ID.

2
Kevin

Couru dans ce problème similaire lors de l'utilisation d'iframe pour déconnecter des sous-sites avec des domaines différents. La solution que j'ai utilisée était de charger d'abord l'iframe, puis de mettre à jour la source après le chargement du cadre.

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

1
Nutzs

Une solution simple consiste à ajouter l'extension "Ignorer les en-têtes X-Frame" à votre chrome.

1
saurabh sunny

Il y a une solution qui a fonctionné pour moi, se référant au parent. Après avoir obtenu l'URL qui redirigera vers la page d'authentification Google, vous pouvez essayer le code suivant:

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