「X-Frame-Options」が「SAMEORIGIN」に設定されているため、フレームへの表示が拒否されました

私は、人々が自分の電話からアクセスできるように応答性があるはずのウェブサイトを開発しています。このサイトには、Google、Facebook、... etc（OAuth）を使用してログインできるいくつかの安全な部分があります。

サーバーのバックエンドはASP.Net Web API 2を使用して開発され、フロントエンドは主にAngularJSといくつかのRazorです。

認証部分については、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'.

今、私はHTMLファイルでiframeを使用していません。

私はググったが、問題を解決するための答えは得られなかった。

私は多分それは誰かが置き換えることができ、よりよい解決策を見つけた"watch?v="ことで"v/"、それが動作します

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

このSO投稿の助けを借りて、これにより多くの時間を費やした後、OK

「X-Frame-Optionsによって禁止された表示」を克服する

私&output=embedはグーグルのURLに投稿する前にURLの最後に追加することで問題を解決することができました：

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>

vimeoにiframeを使用している場合は、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に移動し、アプリケーションドメインをOAuth 2認証情報の「Javascript Origins」セクションに追加することでした。

少し遅れますが、このエラーは、のnative application Client ID代わりにを使用した場合にも発生する可能性がありますweb application Client ID。

私はAngular 9で同じ問題を実装していました。これらは私が実行した2つのステップです。

1. YouTubeのURLをからhttps://youtube.com/your_codeに変更しますhttps://youtube.com/embed/your_code。

2. 次にDomSanitizer、Angular のURLを渡します。

   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>

親を参照して、私のために働いた解決策があります。Google認証ページにリダイレクトするURLを取得したら、次のコードを試すことができます。

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

質問ありがとうございます。YouTube iframeの場合、最初の問題は指定したURLです。これは、埋め込みURLまたはアドレスバーからのURLリンクです。非埋め込みURLに対するこのエラーですが、非埋め込みURLを指定したい場合は、「非埋め込みURLと埋め込み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」が分割されます。ビデオIDを取得してから、埋め込みとしてURLに設定する必要があります。HTMLで

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

Angular 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 =値にリストされているものをロードする必要があります...多分、iframeを埋め込む場所を指定するための欠落変数があります。私の問題を修正するには、適切なWebページを検出して適切な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>

iframeを使用していないことを理解してください。ただし、スクリプトが使用される場所を指示するために、構文に追加する必要がある変数がある場合があります。

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 / embed、2つのフレーバー：

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

1つは「watch？V =」を保持する必要があり、もう1つは保持しない