Từ chối hiển thị trong một khung vì nó đặt 'Tùy chọn khung X' thành 'SAMEORIGIN'

Tôi đang phát triển một trang web được cho là phản hồi để mọi người có thể truy cập nó từ điện thoại của họ. Trang web đã có một số phần bảo mật có thể được đăng nhập bằng Google, Facebook, ... vv (OAuth).

Phần cuối máy chủ được phát triển bằng API Web.Net 2 và giao diện người dùng chủ yếu là AngularJS với một số Dao cạo.

Về phần xác thực, mọi thứ đều hoạt động tốt trong tất cả các trình duyệt bao gồm Android nhưng xác thực Google không hoạt động trên iPhone và nó cho tôi thông báo lỗi này

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

Bây giờ tôi lo ngại rằng tôi không sử dụng bất kỳ iframe nào trong các tệp HTML của mình.

Tôi loay hoay loanh quanh, nhưng không có câu trả lời nào khiến tôi phải khắc phục vấn đề.

Tôi tìm thấy một giải pháp tốt hơn, có lẽ nó có thể giúp ai đó thay thế "watch?v="bằng "v/"và nó sẽ làm việc

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

OK sau khi dành nhiều thời gian hơn cho việc này với sự giúp đỡ của bài viết SO này

Vượt qua "Hiển thị bị cấm bởi X-Frame-Options"

Tôi đã quản lý để giải quyết vấn đề bằng cách thêm &output=embedvào cuối url trước khi đăng lên URL google:

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

Thử sử dụng

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

Bạn có thể tìm thấy tất cả mã được nhúng trong phần 'Mã nhúng' và trông giống như thế này

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

Họ đã đặt tiêu đề thành SAMEORIGIN trong trường hợp này, điều đó có nghĩa là họ đã không cho phép tải tài nguyên trong iframe bên ngoài miền của họ. Vì vậy, iframe này không thể hiển thị tên miền chéo

Đối với mục đích này, bạn cần khớp vị trí trong apache của bạn hoặc bất kỳ dịch vụ nào khác bạn đang sử dụng

Nếu bạn đang sử dụng apache thì trong tệp 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>

Nếu bạn đang sử dụng iframe cho vimeo, hãy thay đổi url từ:

https://vimeo.com/63534746

đến:

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

Nó làm việc cho tôi.

Để nhúng video youtube vào trang angularjs của bạn, bạn chỉ cần sử dụng bộ lọc sau cho video của mình

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>

Tôi đã làm những thay đổi dưới đây và làm việc tốt cho tôi.

Chỉ cần thêm thuộc tính <iframe src="URL" target="_parent" />

_parent: điều này sẽ mở trang nhúng trong cùng một cửa sổ.

_blank: Trong tab khác nhau

Đối với tôi, cách khắc phục là truy cập vào console.developer.google.com và thêm miền ứng dụng vào phần "Nguồn gốc Javascript" trong thông tin đăng nhập OAuth 2.

Hơi muộn, nhưng lỗi này cũng có thể được gây ra nếu bạn sử dụng native application Client IDthay vì a web application Client ID.

Tôi đã có cùng một vấn đề khi thực hiện trong Angular 9. Đây là hai bước tôi đã làm:

1. Thay đổi URL YouTube của bạn từ https://youtube.com/your_codethành https://youtube.com/embed/your_code.

2. Và sau đó chuyển URL thông qua 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>

Có một giải pháp làm việc cho tôi, đề cập đến phụ huynh. Sau khi nhận được url sẽ chuyển hướng đến trang xác thực google, bạn có thể thử đoạn mã sau:

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

Cảm ơn câu hỏi. Đối với iframe YouTube, vấn đề đầu tiên là URL bạn đã cung cấp, đó là URL được nhúng hoặc liên kết URL từ thanh địa chỉ. lỗi này đối với URL không nhúng nhưng nếu bạn muốn cung cấp URL không nhúng thì bạn cần mã hóa trong "ống an toàn" như (đối với cả URL không được nhúng hoặc nhúng):

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

     }

   }
}

nó sẽ tách ra "vedioId". Bạn phải lấy id video sau đó đặt thành URL dưới dạng nhúng. Trong Html

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

Góc 2/5 cảm ơn một lần nữa.

thêm vào dưới đây với URL Suffix

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

Có một vấn đề tương tự như nhúng trò chuyện youtube và tôi tìm ra nó. Có lẽ có một giải pháp tương tự cho vấn đề tương tự.

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'

Trang web của tôi hoạt động với www và không có nó. Vì vậy, để làm cho nó hoạt động, bạn cần đảm bảo rằng bạn đã tải cái được liệt kê trên embed_domain = value ... Có thể có một biến bạn bị thiếu để cho biết nơi nhúng iframe của bạn. Để khắc phục sự cố của tôi đã phải viết một tập lệnh để phát hiện đúng trang web và thực thi đúng tên miền nhúng 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>

hoặc là

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

Hiểu rằng bạn không sử dụng iframe, nhưng vẫn có thể có một số biến bạn cần thêm vào cú pháp của mình để cho biết nơi tập lệnh sẽ được sử dụng.

Gặp vấn đề tương tự trong khi sử dụng iframe để đăng xuất các trang web phụ với các tên miền khác nhau. Giải pháp tôi đã sử dụng là tải iframe trước, sau đó cập nhật nguồn sau khi khung được tải.

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 / nhúng, hai hương vị:

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

dán vào trình duyệt của bạn và xem

bản gốc:

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

một cái cần giữ "watch? V =", cái kia thì không