Home » Angularjs » Refused to display in a frame because it set 'X-Frame-Options' to 'SAMEORIGIN'

Refused to display in a frame because it set 'X-Frame-Options' to 'SAMEORIGIN'

Posted by: admin November 2, 2017 Leave a comment

Questions:

I am developing a website that is supposed to be responsive so that people can access it from their phones. The site has got some secured parts that can be logged into using Google, Facebook, …etc (OAuth).

The server backend is developed using ASP.Net Web API 2 and the front end is mainly AngularJS with some Razor.

For the authentication part, everything is working fine in all browsers including Android but the Google authentication is not working on iPhone and it gives me this error message

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

Now as far I am concerned I do not use any iframe in my HTML files.

I googled around, but no answer got me to fix the issue.

Answers:

I found a better solution, maybe it can help somebody
replace "watch?v=" by "v/" and it will work

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

Questions:
Answers:

O.K. after spending more time on this with the help of this SO post

Overcoming "Display forbidden by X-Frame-Options"

I managed to solve the issue by adding &output=embed to the end of the url before posting to the google URL:

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

Questions:
Answers:

Try to use

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

You can find all embeded code in ‘Embeded Code’ section and that looks like this

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

Questions:
Answers:

They have set the header to SAMEORIGIN in this case, which means that they have disallowed loading of the resource in an iframe outside of their domain. So this iframe is not able to display cross domain

enter image description here

For this purpose you need to match the location in your apache or any other service you are using

If you are using apache then in httpd.conf file.

  <LocationMatch "/your_relative_path">
      ProxyPass absolute_path_of_your_application/your_relative_path
      ProxyPassReverse absolute_path_of_your_application/your_relative_path
   </LocationMatch>

Questions:
Answers:

If you are using iframe for vimeo, change the url from:

https://vimeo.com/63534746

to:

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

It works for me.

Questions:
Answers:

For embeding youtube video into your angularjs page, you can simply use following filter for your video

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>

Questions:
Answers:

I did the below changes and works fine for me.

Just add the attribute <iframe src="URL" target="_parent" />

_parent: this would open embedded page in same window.

_blank: In different tab

Questions:
Answers:

For me the fix was to go into console.developer.google.com and add the application domain to “Javascript Origins” section of OAuth 2 credentials.

Questions:
Answers:

Little late, but this error can also be caused if you use a native application Client ID instead of a web application Client ID.