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&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_7307315 · 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);
  }

}

user_9663546 · 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 && !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);
        }

     }

   }
}

it will split out "vedioId". You have to get video id then set to URL as embedded. In Html

Angular 2/5 thanks again.

user_5013769 · Answer

If you are using iframe for Google Docs Viewer, change iframe from:

iframe src="https://docs.google.com/viewer?url=' + url_your_document

to:

iframe src="https://docs.google.com/viewer?url=' + url_your_document + '&embedded=true"

It works for me.

user_7425780 · Answer

add the below with URL Suffix

/override-http-headers-default-settings-x-frame-options

user_3835045 · 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&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.

or

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_3621268 · Answer

On apache you need to edit security.conf:

nano /etc/apache2/conf-enabled/security.conf

and set:

Header set X-Frame-Options: "sameorigin"

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_17029269 · Answer

Here is code which I used and displayed successfully in Iframe and I am making this code in cshtml in C#.

@if (item.DisplayValue2 != null)
{
   
   
      @item.DisplayValue1
   
   
 

   @{
       var url = item.DisplayValue2.Replace("watch?v=", "embed/");
     }

user_6468147 · Answer

I test all items but this code help me:

       ?rs:embed=true

For example I want to load a pbix in my application. I use this code :

And it works.

user_1789556 · 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.

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);
});

user_2208909 · Answer

youtube/embed, two flavors:

https://www.youtube.com/embed/watch?v=eAxV4uO8oTU&list=RDeAxV4uO8oTU&start_radio=1 https://www.youtube.com/embed/CNG7yrHHJ5A

paste in your browser and see

the original:

https://www.youtube.com/watch?v=eAxV4uO8oTU&list=RDeAxV4uO8oTU&start_radio=1 https://www.youtube.com/watch?v=CNG7yrHHJ5A

one needs to keep "watch?V=", the other not

user_7192433 · Answer

in the php file (index.php) add this line in the top

if still not work try this

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

21 Answers