web-dev-qa-db-ja.com

'X-Frame-Options'を 'SAMEORIGIN'に設定しているため、フレームに表示することを拒否しました

私は人々が彼らの電話からそれにアクセスできるように敏感であると思われるウェブサイトを開発しています。このサイトには、Google、Facebookなどを使ってログインできる安全な部分がいくつかあります（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を使用していません。

グーグルを回ったが、問題を解決するための答えが見つからなかった。

angularjsasp.net-web-apigoogle-oauth
238
Ali Hmer

OK。この[SO postの助けを借りて、これについてさらに時間を費やした後

"X-Frame-Optionsで禁止されている表示"を克服する

GoogleのURLに投稿する前に、URLの末尾に&output=embedを追加して問題を解決しました。

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

私はもっ​​と良い解決策を見つけました、おそらく誰かが"watch?v="を"v/"に置き換えるのを助けることができて、それはうまくいくでしょう

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

使ってみる

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>
34
Bogdan Alexandru Militaru

この場合、ヘッダーをSAMEORIGINに設定しています。つまり、ドメイン外のiframeにリソースをロードすることはできません。そのため、このiframeはクロスドメインを表示できません

enter image description here

この目的のために、あなたはあなたの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>
28
Ibtesam Latif

Vimeoにiframeを使用している場合は、次のURLを変更します。

https://vimeo.com/63534746

に：

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

わたしにはできる。

18
Shakir Muhammed

Angularjsページにyoutubeビデオを埋め込むには、ビデオに次のフィルターを使用するだけです

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>
11
Irfan Muhammad

私は以下の変更をしました、そして私のためにうまく働きます。

属性<iframe src="URL" target="_parent" />を追加するだけです

_parent：これは同じウィンドウで埋め込みページを開きます。

_blank：別のタブに

6
rahulnikhare

私にとっての修正は、console.developer.google.comにアクセスし、アプリケーションドメインをOAuth 2認証情報の「Javascript Origins」セクションに追加することでした。

3
parliament

質問ありがとうございます。 YouTube iframeの場合、最初の問題はあなたが与えたURLですが、埋め込みURLかアドレスバーからのURLリンクです。非埋め込みURLに対するこのエラーですが、非埋め込みURLを指定したい場合は、（非埋め込みまたは埋め込みURLの両方に対して） "safe Pipe"のようにコーディングする必要があります。

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 ありがとうございます。

2
Rahat Ansari

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

2
Kevin

異なるドメインを持つサブサイトからログアウトするために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);
});
1
Nutzs

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

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

簡単な解決策はあなたのクロムに "X-Frameヘッダーを無視する"拡張子を追加することです。

0
saurabh sunny