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

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.

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

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

Essayez d'utiliser

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

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

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

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é

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

Si vous utilisez iframe pour vimeo, changez l'url de:

https://vimeo.com/63534746

à:

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

Ça marche pour moi.

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>

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

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.

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.

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>

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

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.

ajouter le ci-dessous avec le suffixe d'URL

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

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

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

youtube / embed, deux saveurs:

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

coller dans votre navigateur et voir

l'original:

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

l'un doit garder "watch? V =", l'autre pas