Refus de s'afficher dans un cadre, car il a défini «X-Frame-Options» sur «SAMEORIGIN»


272

Je développe un site Web qui est censé être réactif afin que les gens puissent y accéder depuis leur téléphone. Le site dispose de quelques parties sécurisées auxquelles vous pouvez vous connecter à l'aide de Google, Facebook, ... etc (OAuth).

Le serveur principal est développé en utilisant ASP.Net Web API 2 et le frontal est principalement AngularJS avec certains Razor.

Pour la partie authentification, tout fonctionne bien dans tous les navigateurs, y compris Android, mais l'authentification Google ne fonctionne pas sur iPhone et cela 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'.

Maintenant, 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.


les iframes sont parfois utilisés par les services
auxquels

Réponses:


171

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

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

51
Vous pouvez également changer cela pour utiliser "embed /" au lieu de "v /" afin qu'une URL complète devienne:<iframe width='1080' height='760' src="https://www.youtube.com/embed/dQw4w9WgXcQ" frameborder="0" allowfullscreen></iframe>
backwardm

1
je suggère de changer cette réponse en "embed /" car "v /" ne fonctionne plus
tm81

88

OK après avoir passé plus de temps à ce sujet avec l'aide de ce message SO

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 publier sur l'URL Google:

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

1
en fait, c'est pour OAUTH comme je l'ai dit dans mon message d'origine. et fait toujours dans OAUTH 2.0. bien que Google ait modifié ses paramètres pour utiliser le service, vous devrez maintenant spécifiquement modifier certaines propriétés pour utiliser OAUTH 2.0 et c'est le cas dans le middleware OWIN 3.0. Reportez-vous à ce lien si vous recevez un message d'erreur "access_denied". blogs.msdn.com/b/webdev/archive/2014/07/02/…
Ali Hmer

1
@AliHmer Merci beaucoup mon pote. Vous avez sauvé ma journée :) & output = embed a fonctionné comme un charme pour moi .. :)
Sahil Manchanda

1
Ne fonctionne pas non plus pour l'iframe Google Agenda dans la vue Web de l'application.
NoBugs


35

Dans ce cas, ils ont défini l'en-tête sur SAMEORIGIN, ce qui signifie qu'ils ont interdit le chargement de la ressource dans une iframe en dehors de leur domaine. Donc, cet iframe ne peut pas afficher le domaine croisé

entrez la description de l'image ici

À cette fin, vous devez faire correspondre l'emplacement dans votre apache ou tout autre service que vous utilisez

Si vous utilisez apache, puis dans 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>

2
Qu'est-ce que c'est your_relative_path?
Green

2
Quel est votre_ chemin_relatif?
Sobiaholic


11

Pour intégrer une vidéo YouTube dans 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>


7

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

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

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

_blank: Dans un onglet différent


1
Je ne sais pas dans quelle mesure cette réponse à la question initiale est pertinente, mais dans mon cas, dans un contexte différent, elle a fourni la solution
Éric Viala

4

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.


2

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


Que voulez-vous dire? J'ai également remarqué que le cadre fonctionne dans une fenêtre Safari, mais pas dans l'iframe de la vue Web d'une application, mais comment changez-vous cela?
NoBugs

Mon problème était similaire, lors de la création de l'ID client de l'application Web, je n'ai pas inclus les uris de mon site Web dans deux sections, vous les y avez ajoutées lors de la création de l'ID client dans la console des développeurs Google
Phylliida

2

J'avais le même problème à implémenter dans Angular 9. Ce sont les deux étapes que j'ai faites:

  1. Modifiez votre URL YouTube de https://youtube.com/your_codeà https://youtube.com/embed/your_code.

  2. Et puis passez l'URL DomSanitizerd'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

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

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

0

Merci pour la question. Pour YouTube iframe, le premier problème est l'URL que vous avez donnée, est-ce une URL intégrée ou un lien URL de la barre d'adresse. cette erreur pour l'URL non intégrée, mais si vous souhaitez donner une URL non intégrée, vous devez coder comme "Safe Pipe" comme (pour les URL non intégrées ou intégré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 divisera "vedioId". Vous devez obtenir l'ID vidéo, puis définir l'URL comme intégrée. En Html

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

Angular 2/5 merci encore.


0

ajouter le ci-dessous avec le suffixe d'URL

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

0

J'ai eu un problème similaire lors de l'intégration du chat YouTube et je l'ai compris. Il existe peut-être une solution similaire pour un problème similaire.

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'

Ma page Web fonctionne avec www et sans elle. Donc, pour le faire fonctionner, vous devez vous assurer que vous chargez celui qui est répertorié sur la valeur embed_domain = ... Peut-être qu'il y a une variable que vous manquez pour dire où intégrer votre iframe. Pour résoudre mon problème, j'ai dû écrire un script pour détecter la bonne page Web et exécuter le nom de domaine intégré iframe approprié.

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

Sachez que vous n'utilisez pas d'iframes, mais qu'il peut encore y avoir une variable que vous devez ajouter à votre syntaxe pour lui dire où le script va être utilisé.


-1

Ran dans ce problème similaire tout en utilisant iframe pour se déconnecter des sous-sites avec différents domaines. La solution que j'ai utilisée était de charger l'iframe en premier, 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);
});


En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.