Weigerde weergave in een frame omdat ‘X-Frame-Options’ was ingesteld op ‘SAMEORIGIN’

Ik ontwikkel een website die responsief moet zijn, zodat mensen er vanaf hun telefoon toegang toe hebben. De site heeft een aantal beveiligde delen waarop kan worden ingelogd met Google, Facebook, …etc (OAuth).

De server-backend is ontwikkeld met ASP.Net Web API 2 en de front-end is voornamelijk AngularJS met wat Razor.

Voor het authenticatiegedeelte werkt alles prima in alle browsers, inclusief Android, maar de Google-authenticatie werkt niet op de iPhone en ik krijg deze foutmelding

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

Wat mij betreft gebruik ik geen iframe in mijn HTML-bestanden.

Ik heb wat gegoogled, maar ik kreeg geen antwoord om het probleem op te lossen.


Antwoord 1, autoriteit 100%

Ik heb een betere oplossing gevonden, misschien kan iemand er iets aan doen
vervang "watch?v=" door "v/" en het zal werken

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

Antwoord 2, autoriteit 55%

O.K. na hier meer tijd aan te hebben besteed met behulp van dit SO-bericht

Overwinnen van “Display verboden door X-Frame-Options”

Ik heb het probleem kunnen oplossen door &output=embed toe te voegen aan het einde van de url voordat ik het naar de Google-URL plaatste:

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

Antwoord 3, autoriteit 26%

Probeer

. te gebruiken

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

Je kunt alle ingesloten code vinden in het gedeelte ‘Ingesloten code’ en dat ziet er zo uit

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

Antwoord 4, autoriteit 24%

Ze hebben in dit geval de header ingesteld op SAMEORIGIN, wat betekent dat ze het laden van de bron in een iframe buiten hun domein niet hebben toegestaan. Dit iframe kan dus geen domeinoverschrijdend weergeven

voer hier de afbeeldingsbeschrijving in

Hiervoor moet je overeenkomen met de locatie in je apache of een andere service die je gebruikt

Als je apache gebruikt, dan in het httpd.conf-bestand.

  <LocationMatch "/your_relative_path">
      ProxyPass absolute_path_of_your_application/your_relative_path
      ProxyPassReverse absolute_path_of_your_application/your_relative_path
   </LocationMatch>

Antwoord 5, autoriteit 11%

Als je iframe voor vimeo gebruikt, verander dan de url van:

https://vimeo.com/63534746

naar:

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

Het werkt voor mij.


Antwoord 6, autoriteit 7%

Als u YouTube-video wilt insluiten in uw angularjs-pagina, kunt u eenvoudig het volgende filter voor uw video gebruiken

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>

Antwoord 7, autoriteit 4%

Ik heb de onderstaande wijzigingen aangebracht en werkt prima voor mij.

Voeg gewoon het attribuut <iframe src="URL" target="_parent" />

toe

_parent: dit zou de ingesloten pagina in hetzelfde venster openen.

_blank: op ander tabblad


Antwoord 8, autoriteit 2%

Voor mij was de oplossing om naar console.developer.google.com te gaan en het applicatiedomein toe te voegen aan het gedeelte ‘Javascript Origins’ van OAuth 2-inloggegevens.


Antwoord 9, autoriteit 2%

Ik had hetzelfde probleem bij het implementeren in Angular 9. Dit zijn de twee stappen die ik heb gedaan:

  1. Wijzig je YouTube-URL van https://youtube.com/your_code in https://youtube.com/embed/your_code.

  2. En geef de URL dan door via DomSanitizer van 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>
    

Antwoord 10

Een beetje laat, maar deze fout kan ook worden veroorzaakt als je een native application Client ID gebruikt in plaats van een web application Client ID.


Antwoord 11

Er is een oplossing die voor mij werkte, verwijzend naar de ouder. Nadat je de url hebt gekregen die doorverwijst naar de Google-verificatiepagina, kun je de volgende code proberen:

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

Antwoord 12

Bedankt voor de vraag.
Voor YouTube iframe is het eerste probleem de URL die je hebt gegeven, is het een ingesloten URL of een URL-link uit de adresbalk.
deze fout voor niet-ingesloten URL, maar als u een niet-ingesloten URL wilt geven, moet u coderen in “safe Pipe” zoals (voor zowel niet-ingesloten als ingesloten URL):

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

het zal “vedioId” uitsplitsen. U moet de video-ID ophalen en vervolgens instellen op URL als ingesloten.
In HTML

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

Hoekig 2/5
nogmaals bedankt.


Antwoord 13

voeg het onderstaande toe met URL-achtervoegsel

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

Antwoord 14

Ik had een soortgelijk probleem met het insluiten van YouTube-chat en ik heb het opgelost. Misschien is er een gelijkaardige oplossing voor gelijkaardig probleem.

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'

Mijn webpagina werkt met www en zonder www. Dus om het te laten werken, moet je ervoor zorgen dat je degene laadt die wordt vermeld op de waarde embed_domain=… Misschien is er een variabele die je mist om te vertellen waar je je iframe moet insluiten. Om mijn probleem op te lossen, moest ik een script schrijven om de juiste webpagina te detecteren en de juiste iframe-embed-domeinnaam uit te voeren.

<iframe src='https://www.youtube.com/live_chat?v=yDc9BonIXXI&embed_domain=your.domain.web' width="100%" height="600" frameborder='no' scrolling='no'></iframe>

of

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

Begrijp dat u geen iframes gebruikt, maar toch kan er een variabele zijn die u aan uw syntaxis moet toevoegen om aan te geven waar het script zal worden gebruikt.


Antwoord 15

Op apache moet je security.conf bewerken:

nano /etc/apache2/conf-enabled/security.conf

en stel in:

Header set X-Frame-Options: "sameorigin"

Schakel vervolgens mod_headers in:

cd /etc/apache2/mods-enabled
ln -s ../mods-available/headers.load headers.load

En herstart Apache:

service apache2 restart

En voila!


Antwoord 16

Ook tegen dit soortgelijk probleem aan bij het gebruik van iframe om uit te loggen bij subsites met verschillende domeinen. De oplossing die ik gebruikte was om eerst het iframe te laden en vervolgens de bron bij te werken nadat het frame is geladen.

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

Antwoord 17

youtube/embed, twee smaken:

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

plak in je browser en kijk

het origineel:

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

de ene moet “watch?V=” houden, de andere niet

LEAVE A REPLY

Please enter your comment!
Please enter your name here

Other episodes