X-Frame-Options'を'SAMEORIGIN'に設定しているため、フレーム内での表示を拒否された。

私は、携帯電話からアクセスできるように、レスポンシブ対応のウェブサイトを開発しています。このサイトには、Google、Facebook、...を使ってログインできる、セキュリティで保護された部分があります。.etc (OAuth)を使ってログインすることができます。

サーバーバックエンドはASP.Net Web API 2で開発し、フロントエンドは主にAngularJSで、一部Razorを使用しています。

認証部分については、Androidを含むすべてのブラウザで正常に動作していますが、iPhoneではGoogle認証が機能せず、次のようなエラーメッセージが表示されます。

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/");

この場合、ヘッダをSAMEORIGINに設定しているので、ドメイン外のiframeでのリソースの読み込みを禁止していることになります。このiframeはクロスドメイン表示ができません。

このためには、apacheやその他のサービスで使用している場所に一致させる必要があります。

apacheを使用している場合、httpd.confファイルにあります。

   "/your_relative_path">
      ProxyPass absolute_path_of_your_application/your_relative_path
      ProxyPassReverse absolute_path_of_your_application/your_relative_path
   


app.filter('scrurl', function($sce) {
    return function(text) {
        text = text.replace("watch?v=", "embed/");
        return $sce.trustAsResourceUrl(text);
    };
});
 class="ytplayer" type="text/html" width="100%" height="360" src="{{youtube_url | scrurl}}& quot; frameborder="0">

 class="ytplayer" type="text/html" width="100%" height="360" src="{{youtube_url | scrurl}}& quot; frameborder="0">

 class="ytplayer" type="text/html" width="100%" height="360" src="{{youtube_url | scrurl}}& quot; frameborder="0">

元の投稿アドレス  http://stackoverflow.com/questions/20498831/refused-to-display-in-a-frame-because-it-set-x-frame-options-to-sameorigin