ปฏิเสธที่จะแสดงในเฟรมเนื่องจากตั้งค่า 'X-Frame-Options' เป็น 'SAMEORIGIN'

ฉันกำลังพัฒนาเว็บไซต์ที่ควรจะตอบสนองเพื่อให้ผู้คนสามารถเข้าถึงได้จากโทรศัพท์ของพวกเขา ไซต์มีบางส่วนที่ปลอดภัยซึ่งสามารถลงชื่อเข้าใช้ด้วย Google, Facebook, ... ฯลฯ (OAuth)

แบ็กเอนด์ของเซิร์ฟเวอร์ได้รับการพัฒนาโดยใช้ ASP.Net Web API 2 และส่วนหน้าส่วนใหญ่เป็น AngularJS พร้อมกับมีดโกนบางส่วน

สำหรับส่วนการรับรองความถูกต้องทุกอย่างทำงานได้ดีในเบราว์เซอร์ทั้งหมดรวมถึง Android แต่การรับรองความถูกต้องของ Google ไม่ทำงานบน iPhone และมันทำให้ฉันข้อความผิดพลาดนี้

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

ตอนนี้ฉันกังวลว่าฉันจะไม่ใช้ iframe ใด ๆ ในไฟล์ HTML ของฉัน

ฉัน googled ไปรอบ ๆ แต่ไม่มีคำตอบให้ฉันแก้ไขปัญหา

ฉันพบวิธีแก้ปัญหาที่ดีกว่าอาจช่วยให้ใครบางคนแทนที่"watch?v="ด้วย"v/"และมันจะทำงาน

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

ตกลงหลังจากใช้เวลากับเรื่องนี้มากขึ้นด้วยความช่วยเหลือของโพสต์ SO นี้

การเอาชนะ "แสดงผลต้องห้ามโดย X-Frame-Options"

ฉันจัดการเพื่อแก้ไขปัญหาโดยการเพิ่ม &output=embedที่ส่วนท้ายของ URL ก่อนโพสต์ไปยัง URL ของ google:

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

ลองใช้ดู

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

คุณสามารถค้นหารหัสฝังทั้งหมดได้ในส่วน 'รหัสฝังตัว' และมีลักษณะเช่นนี้

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

พวกเขาได้ตั้งค่าส่วนหัวเป็น SAMEORIGIN ในกรณีนี้ซึ่งหมายความว่าพวกเขาไม่อนุญาตให้โหลดทรัพยากรใน iframe นอกโดเมน ดังนั้น iframe นี้จะไม่สามารถแสดงข้ามโดเมนได้

เพื่อจุดประสงค์นี้คุณต้องจับคู่ตำแหน่งใน Apache หรือบริการอื่น ๆ ที่คุณใช้งานอยู่

หากคุณใช้ apache อยู่ในไฟล์ 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>

หากคุณใช้ iframe สำหรับ vimeo ให้เปลี่ยน url จาก:

https://vimeo.com/63534746

ถึง:

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

มันใช้งานได้สำหรับฉัน

สำหรับการฝังวิดีโอ youtube ลงในหน้า angularjs ของคุณคุณสามารถใช้ตัวกรองต่อไปนี้สำหรับวิดีโอของคุณ

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>

ฉันทำการเปลี่ยนแปลงด้านล่างและทำงานได้ดีสำหรับฉัน

เพียงเพิ่มคุณสมบัติ <iframe src="URL" target="_parent" />

_parent: นี่จะเป็นการเปิดเพจแบบฝังในหน้าต่างเดียวกัน

_blank: ในแท็บอื่น

สำหรับฉันการแก้ไขคือไปที่ console.developer.google.com และเพิ่มโดเมนแอปพลิเคชันในส่วน "Javascript Origins" ของข้อมูลรับรอง OAuth 2

สายเล็กน้อย แต่ข้อผิดพลาดนี้อาจเกิดขึ้นได้หากคุณใช้ a native application Client IDแทนweb application Client IDแทน

ฉันมีปัญหาเดียวกันกับการใช้งานใน Angular 9 เหล่านี้คือสองขั้นตอนที่ฉันทำ:

1. เปลี่ยน URL ของ YouTube ของคุณจากไปhttps://youtube.com/your_codehttps://youtube.com/embed/your_code

2. แล้วส่ง URL ผ่านDomSanitizerของแองกูลาร์

   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>

มีวิธีแก้ปัญหาที่ใช้งานได้สำหรับฉันหมายถึงผู้ปกครอง หลังจากรับ URL ที่จะเปลี่ยนเส้นทางไปยังหน้าการรับรองความถูกต้องของ Google คุณสามารถลองใช้รหัสต่อไปนี้:

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

ขอบคุณสำหรับคำถาม สำหรับ iframe ของ YouTube ปัญหาแรกคือ URL ที่คุณให้มามันเป็น URL ที่ฝังหรือลิงค์ URL จากแถบที่อยู่ ข้อผิดพลาดนี้สำหรับ URL ที่ไม่ฝัง แต่หากคุณต้องการให้ URL ที่ไม่ได้ฝังคุณต้องเขียนโค้ดใน "safe Pipe" เช่น (สำหรับทั้ง 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);
        }

     }

   }
}

มันจะแยก "vedioId" คุณต้องรับรหัสวิดีโอจากนั้นตั้งค่าเป็น URL แบบฝัง ใน Html

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

เชิงมุม 2/5 ขอบคุณอีกครั้ง

เพิ่มด้านล่างด้วยส่วนต่อท้าย URL

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

มีปัญหาที่คล้ายกันฝังการแชทของ YouTube และฉันคิดออก อาจมีวิธีแก้ไขปัญหาคล้ายกันสำหรับปัญหาที่คล้ายกัน

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'

หน้าเว็บของฉันใช้งานได้กับ www และไม่มีมัน ดังนั้นเพื่อให้มันใช้งานได้คุณต้องแน่ใจว่าคุณโหลดสิ่งที่อยู่ในรายการในembed_domain = value ... บางทีอาจมีตัวแปรที่คุณขาดหายไปเพื่อบอกตำแหน่งที่จะฝัง iframe ของคุณ เพื่อแก้ไขปัญหาของฉันต้องเขียนสคริปต์เพื่อตรวจสอบหน้าเว็บที่เหมาะสมและดำเนินการฝังชื่อโดเมน iframe ที่เหมาะสม

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

หรือ

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

เข้าใจว่าคุณไม่ได้ใช้ iframes แต่ก็ยังอาจมีตัวแปรบางตัวที่คุณต้องเพิ่มลงในไวยากรณ์ของคุณเพื่อบอกว่าสคริปต์จะใช้งานที่ใด

พบปัญหาที่คล้ายคลึงกันนี้ในขณะที่ใช้ iframe เพื่อออกจากระบบไซต์ย่อยที่มีโดเมนต่างกัน วิธีแก้ปัญหาที่ฉันใช้คือโหลด iframe ก่อนจากนั้นอัปเดตแหล่งที่มาหลังจากโหลดเฟรมแล้ว

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 / ฝังสองรสชาติ:

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

วางในเบราว์เซอร์ของคุณและดู

ต้นตำรับ:

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

หนึ่งต้องการเก็บ "watch? V =" อันอื่นที่ไม่ใช่