Menolak untuk ditampilkan dalam bingkai karena mengatur 'X-Frame-Options' ke 'SAMAORIGIN'

Saya mengembangkan situs web yang seharusnya responsif sehingga orang dapat mengaksesnya dari ponsel mereka. Situs ini memiliki beberapa bagian aman yang dapat login menggunakan Google, Facebook, ... dll (OAuth).

Backend server dikembangkan menggunakan ASP.Net Web API 2 dan ujung depan terutama AngularJS dengan beberapa Razor.

Untuk bagian otentikasi, semuanya bekerja dengan baik di semua browser termasuk Android tetapi otentikasi Google tidak berfungsi pada iPhone dan itu memberi saya pesan kesalahan ini

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

Sejauh ini saya khawatir saya tidak menggunakan iframe dalam file HTML saya.

Saya mencari di sekitar, tetapi tidak ada jawaban membuat saya untuk memperbaiki masalah ini.

Saya menemukan solusi yang lebih baik, mungkin itu dapat membantu seseorang menggantinya "watch?v="dengan "v/"dan akan bekerja

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

OK setelah menghabiskan lebih banyak waktu untuk hal ini dengan bantuan posting SO ini

Mengatasi "Tampilan terlarang oleh X-Frame-Options"

Saya berhasil menyelesaikan masalah dengan menambahkan &output=embedke bagian akhir url sebelum memposting ke URL google:

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

Coba gunakan

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

Anda dapat menemukan semua kode sematan di bagian 'Kode Sematan' dan yang terlihat seperti ini

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

Mereka telah mengatur tajuk ke SAMAORIGIN dalam kasus ini, yang berarti bahwa mereka telah melarang pemuatan sumber daya dalam iframe di luar domain mereka. Jadi iframe ini tidak dapat menampilkan domain silang

Untuk tujuan ini, Anda harus mencocokkan lokasi di apache atau layanan lain yang Anda gunakan

Jika Anda menggunakan apache maka dalam file 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>

Jika Anda menggunakan iframe untuk vimeo, ubah url dari:

https://vimeo.com/63534746

untuk:

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

Ini bekerja untuk saya.

Untuk menanamkan video youtube ke halaman angularjs Anda, Anda cukup menggunakan filter berikut untuk video Anda

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>

Saya melakukan perubahan di bawah dan berfungsi dengan baik untuk saya.

Tambahkan saja atributnya <iframe src="URL" target="_parent" />

_parent: ini akan membuka halaman tertanam di jendela yang sama.

_blank: Di tab berbeda

Bagi saya perbaikannya adalah masuk ke console.developer.google.com dan menambahkan domain aplikasi ke bagian "Javascript Origins" dari kredensial OAuth 2.

Agak terlambat, tetapi kesalahan ini juga bisa disebabkan jika Anda menggunakan native application Client IDa web application Client ID.

Saya mengalami masalah yang sama dengan penerapan pada Angular 9. Ini adalah dua langkah yang saya lakukan:

1. Ubah URL YouTube Anda dari https://youtube.com/your_codemenjadi https://youtube.com/embed/your_code.

2. Dan kemudian melewati URL melalui DomSanitizerAngular.

   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>

Ada solusi yang berhasil untuk saya, merujuk pada orang tua. Setelah mendapatkan url yang akan dialihkan ke halaman autentikasi Google, Anda dapat mencoba kode berikut:

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

Terima kasih untuk pertanyaannya. Untuk YouTube iframe masalah pertama adalah URL yang Anda berikan, apakah itu URL yang disematkan atau tautan URL dari bilah alamat. kesalahan ini untuk URL yang tidak diembed tetapi jika Anda ingin memberikan URL yang tidak diembed maka Anda perlu kode seperti "safe Pipe" seperti (untuk URL yang tidak di-embed atau di-embed):

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

     }

   }
}

itu akan membagi "vedioId". Anda harus mendapatkan id video kemudian menetapkan ke URL sebagai tertanam. Dalam Html

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

Sudut 2/5 terima kasih lagi.

tambahkan di bawah ini dengan Akhiran URL

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

Punya masalah serupa embed youtube chat dan saya mengetahuinya. Mungkin ada solusi serupa untuk masalah serupa.

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'

Halaman web saya berfungsi dengan www dan tanpa www. Jadi untuk membuatnya bekerja, Anda perlu memastikan Anda memuat salah satu yang terdaftar di embed_domain = nilai ... Mungkin ada variabel Anda yang hilang untuk memberitahu di mana harus menanamkan iframe Anda. Untuk memperbaiki masalah saya harus menulis skrip untuk mendeteksi halaman web yang tepat dan menjalankan nama domain embr iframe yang tepat.

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

atau

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

Pahami bahwa Anda tidak menggunakan iframe, tetapi masih ada beberapa variabel yang perlu Anda tambahkan ke sintaks Anda untuk memberi tahu di mana skrip akan digunakan.

Mengalami masalah serupa saat menggunakan iframe untuk keluar dari sub situs dengan domain berbeda. Solusi yang saya gunakan adalah memuat iframe terlebih dahulu, kemudian memperbarui sumber setelah frame dimuat.

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, dua rasa:

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

rekatkan di browser Anda dan lihat

asli:

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

satu harus tetap "menonton? V =", yang lain tidak