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.
O.K., after spending more time on this with the help of
the 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);