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

Question

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 amp 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

User · Answer

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

User · Answer

Thanks for the question  For YouTube iframe the first issue is the URL you have given  is it embedded URL or URL link from address bar  this error for non embed URL but if you want to give non embed URL then you need to code in  safe Pipe  like for both non embedded or embed 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  amp  amp   url            const regExp        youtu be   v   u   w   embed   watch  v    amp v        amp                   let match   value match regExp           if  match  amp  amp  match 2  length    11                console log match 2                let sepratedID   match 2               let embedUrl      www youtube com embed     sepratedID              return this sanitizer bypassSecurityTrustResourceUrl embedUrl                               it will split out  vedioId   You have to get video id then set to URL as embedded  In Html    lt div gt      lt iframe width  100   height  300   src   video url   safe  gt  lt  iframe gt    lt  div gt    Angular 2 5 thanks again

User · Answer

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   lt iframe width  560  height  315   src  https   www youtube com embed YOUR VIDEO CODE  frameborder  0  allowfullscreen gt  lt  iframe gt

User · Answer

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

User · Answer

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    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      lt LocationMatch   your relative path  gt        ProxyPass absolute path of your application your relative path       ProxyPassReverse absolute path of your application your relative path     lt  LocationMatch gt

User · Answer

I was having the same issue implementing in Angular 9  These are the two steps I did    Change your YouTube URL from https   youtube com your code to https   youtube com embed your code  And then pass the URL through DomSanitizer of Angular   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             lt iframe width  420  height  315   src   getLink    webkitallowfullscreen mozallowfullscreen allowfullscreen gt  lt  iframe gt

User · Answer

There is a solution that worked for me  referring to the parent  After getting the url that will redirect to google authentication page  you can try the following code   var loc   redirect location        window parent location replace loc

User · Answer

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

User · Answer

youtube embed  two flavors   https   www youtube com embed watch v eAxV4uO8oTU amp list RDeAxV4uO8oTU amp start radio 1 https   www youtube com embed CNG7yrHHJ5A  paste in your browser and see  the original    https   www youtube com watch v eAxV4uO8oTU amp list RDeAxV4uO8oTU amp start radio 1 https   www youtube com watch v CNG7yrHHJ5A  one needs to keep  watch V    the other not

User · Answer

I did the below changes and works fine for me   Just add the attribute  lt iframe src  URL  target   parent    gt    parent  this would open embedded page in same window    blank  In different tab

User · Answer

O K  after spending more time on this with the help of this SO post  Overcoming  quot Display forbidden by X-Frame-Options quot   I managed to solve the issue by adding  amp output embed to the end of the url before posting to the google URL   var url   data url     amp output embed   window location replace url

User · Answer

On apache you need to edit security conf  nano  etc apache2 conf-enabled security conf  and set  Header set X-Frame-Options   quot sameorigin quot   Then enable mod headers  cd  etc apache2 mods-enabled  ln -s    mods-available headers load headers load  And restart Apache  service apache2 restart  And voila

User · Answer

add the below with URL Suffix   override-http-headers-default-settings-x-frame-options

User · Answer

For embeding youtube video into your angularjs page  you can simply use following filter for your video   x000D   x000D  app filter  scrurl   function  sce    x000D      return function text    x000D          text   text replace  watch v     embed     x000D          return  sce trustAsResourceUrl text   x000D         x000D      x000D   lt iframe class  ytplayer  type  text html  width  100   height  360  src    youtube url   scrurl    frameborder  0  gt  lt  iframe gt  x000D   x000D   x000D

User · Answer

Had an similar issue embeding youtube chat and I figure it out  Maybe there is a similar solution for similar problem   Refused to display  https   www youtube com live chat v yDc9BonIXXI amp embed domain your domain web  in a frame because it set  X-Frame-Options  to  sameorigin    My webpage works with www and without it  So to make it work you need to make sure you load the one that is listed on the embed domain  value    Maybe there is a variable your missing to tell where to embed your iframe   To fix my problem had to write a script to detect the right webpage and execute proper iframe embed domain name    lt iframe src  https   www youtube com live chat v yDc9BonIXXI amp embed domain your domain web  width  100   height  600  frameborder  no  scrolling  no  gt  lt  iframe gt    or    lt iframe src  https   www youtube com live chat v yDc9BonIXXI amp embed domain www your domain web  width  100   height  600  frameborder  no  scrolling  no  gt  lt  iframe gt    Understand you are not using iframes  but still there may be some variable you need to add to your syntax to tell it where the script is going to be used

User · Answer

Ran into this similar issue while using iframe to logout of sub sites with different domains   The solution I used was to load the iframe first  then update the source after the frame is loaded    x000D   x000D  var frame   document createElement  iframe    x000D  frame style display    none   x000D  frame setAttribute  src    about blank    x000D  document body appendChild frame   x000D  frame addEventListener  load        gt    x000D    frame setAttribute  src   url   x000D      x000D   x000D   x000D

User · Answer

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

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

Examples related to angularjs

Examples related to asp.net-web-api

Examples related to google-oauth