'X-Frame-Options'ı' SAMEORIGIN 'olarak ayarladığından bir çerçevede görüntülenmeyi reddetti

İnsanların telefonlarından erişebilmeleri için duyarlı olması gereken bir web sitesi geliştiriyorum. Sitede Google, Facebook, ... vb. (OAuth) kullanarak giriş yapabileceğiniz bazı güvenli bölümler var.

Sunucu arka ucu ASP.Net Web API 2 kullanılarak geliştirilmiştir ve ön uç çoğunlukla bazı Razor ile AngularJS'dir.

Kimlik doğrulama kısmı için, Android dahil tüm tarayıcılarda her şey iyi çalışıyor, ancak Google kimlik doğrulaması iPhone'da çalışmıyor ve bana bu hata mesajını veriyor

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

Şimdiye kadar HTML dosyalarımda iframe kullanmıyorum diye endişeleniyorum.

Etrafımda dolaştım, ancak hiçbir yanıt sorunu çözmemi sağladı.

Ben belki birileri yerine yardımcı olabilir, daha iyi bir çözüm buldum "watch?v="tarafından "v/"ve işe yarayacak

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

Tamam bu SO yazı yardımıyla daha fazla zaman geçirdikten sonra

"Ekran X-Frame-Options tarafından yasaklandı"

&output=embedGoogle URL'sine göndermeden önce URL'nin sonuna ekleyerek sorunu çözmeyi başardım :

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

Kullanmaya çalışmak

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

Tüm gömülü kodları 'Gömülü Kod' bölümünde bulabilirsiniz ve şuna benzer

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

Bu durumda üstbilgiyi SAMEORIGIN olarak belirlediler. Bu nedenle, bu iframe alanlar arası görüntüleyemez

Bu amaçla, apache'nizdeki konumu veya kullandığınız diğer hizmetleri eşleştirmeniz gerekir

Apache kullanıyorsanız httpd.conf dosyasında.

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

Vimeo için iframe kullanıyorsanız, URL'yi şununla değiştirin:

https://vimeo.com/63534746

için:

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

Benim için çalışıyor.

Youtube videosunu angularjs sayfanıza yerleştirmek için videonuz için aşağıdaki filtreyi kullanabilirsiniz

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>

Aşağıdaki değişiklikleri yaptım ve benim için iyi çalışıyor.

Sadece özelliği ekleyin <iframe src="URL" target="_parent" />

_parent: bu gömülü sayfayı aynı pencerede açar.

_blank: Farklı sekmede

Benim için düzeltme, console.developer.google.com adresine gitmek ve uygulama etki alanını OAuth 2 kimlik bilgilerinin "Javascript Origins" bölümüne eklemekti.

Biraz geç, ancak bir native application Client IDyerine bir kullanırsanız bu hata da oluşabilir web application Client ID.

Aynı sorunu Açısal 9'da uyguluyordum. Yaptığım iki adım:

1. YouTube URL'nizi olarak https://youtube.com/your_codedeğiştirin https://youtube.com/embed/your_code.

2. Ve sonra URL'yi DomSanitizerAngular üzerinden geçirin.

   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>

Benim için işe yarayan, ebeveynine atıfta bulunan bir çözüm var. Google kimlik doğrulama sayfasına yönlendirilecek URL'yi aldıktan sonra aşağıdaki kodu deneyebilirsiniz:

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

Soru için teşekkürler. YouTube iframe için ilk sorun, verdiğiniz URL'dir, adres çubuğundan gömülü URL veya URL bağlantısıdır. gömülü olmayan URL için bu hata, ancak gömülü olmayan URL vermek istiyorsanız, "güvenli Boru" gibi (hem gömülü olmayan hem de gömülü URL için) kodlamanız gerekir:

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

     }

   }
}

"vedioId" 'ı ayıracaktır. Video kimliğini almanız ve ardından URL olarak katıştırılmış olarak ayarlamanız gerekir. Html'de

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

Açısal 2/5 tekrar teşekkürler.

URL Soneki ile aşağıdakileri ekleyin

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

Benzer bir sorun youtube sohbet gömme vardı ve ben anladım. Belki de benzer sorun için benzer bir çözüm var.

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'

Web sayfam www ile ve onsuz çalışır. Bu yüzden çalışması için embed_domain = değerinde listelenen değeri yüklediğinizden emin olmanız gerekir ... Belki de iframe'inizi nereye yerleştireceğinizi söyleyecek bir değişken vardır. Sorunumu düzeltmek için doğru web sayfasını tespit etmek ve uygun iframe gömme etki alanı adını yürütmek için bir komut dosyası yazmak zorunda kaldı.

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

veya

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

İframe'leri kullanmadığınızı anlayın, ancak komut dosyasının nerede kullanılacağını söylemek için sözdiziminize eklemeniz gereken bazı değişkenler olabilir.

Farklı etki alanlarına sahip alt sitelerin oturumunu kapatmak için iframe kullanırken bu benzer sorunla karşılaştım. Kullandığım çözüm önce iframe'i yüklemek, ardından çerçeve yüklendikten sonra kaynağı güncellemektir.

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, iki lezzet:

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

tarayıcınıza yapıştırın ve görün

orijinal:

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

biri "izlemek? V =" tutmak gerekir, diğeri değil