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

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.

Vincennes

Answer 1

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

Vincennes

actually this is for OAUTH as I stated in my original post. and still does in OAUTH 2.0. although, Google has changed its settings to use the service, so now you will specifically have to change some properties to use OAUTH 2.0 and this is the case in OWIN 3.0 middleware. Refer to this link if you are receiving a "access_denied" error message. blogs.msdn.com/b/webdev/archive/2014/07/02/… – Vincennes

Doesn't work for Google-calendar iframe within app webview either. – Raycher

how o i do this i f i wan tto display my other website inside my mobile app in a iframe – Splashboard

@AliHmer I have an error as A potentially dangerous Request.Path value was detected when I used &output=embed. Could give me a suggestion/solution to resolve this? – Chalcopyrite

Worth mentioning that &output=embed is (or was) a Google-specific workaround. That is, Google would see &output=embed and remove the x-frame-options: SAMEORIGIN response header, but this isn't going to help if you're trying to embed www.apple.com who doesn't follow the same convention (and for good reason on their side). That is, this is not a use-case agnostic solution. – Clarita

Answer 2

I found a better solution. Replace "watch?v=" by "v/" and it will work

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

Dermatoid

You can also change that to use "embed/" instead of "v/" so a full URL would become: <iframe width='1080' height='760' src="https://www.youtube.com/embed/dQw4w9WgXcQ" frameborder="0" allowfullscreen></iframe> – Chapple

i suggest to change this answer to "embed/" because "v/" is not working anymore – Explicable

Answer 3

Try to use https://www.youtube.com/embed/YOUR_VIDEO_CODE:

You can find all embedded code in the '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>

Remiss

Re "Embeded": Do you mean "Embedded"? – Busterbustle

Answer 4

If you are using an iframe for Vimeo, change the URL from:

https://vimeo.com/63534746

to:

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

It works for me.

Gelman

In case someone does a quick drive by and use this solution: Please note the change from HTTPS to HTTP, a not secure protocol. Your requirements may vary but Beware. Personally I would avoid this solution. Also; HTTP is quickly going out of fashion and I would not be suprised if browsers won't allow for it at all in the near future. – Correct

Answer 5

For embedding YouTube video into your AngularJS page, you can simply use the 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>

Gadroon

Answer 6

I did the below changes, and it worked fine for me.

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

_parent: this would open an embedded page in the same window.

_blank: In a different tab

Townley

I don't know how relevant is that answer to the original question, but in my case, in a different context, it provided the solution – Outfoot

Answer 7

For me, the fix was to go into console.developer.google.com and add the application domain to the "JavaScript Origins" section of OAuth 2 credentials.

Congener

Answer 8

I was having the same issue implementing in Angular 9. These are the two steps I did:

1. Change your YouTube URL from https://youtube.com/your_code to https://youtube.com/embed/your_code.

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

   <iframe width="420" height="315" [src]="getLink()" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
   

Goldin

Answer 9

This error can also be caused if you use a native application Client ID instead of a web application Client ID.

Schlegel

What do you mean? I also noticed that the frame works in a Safari window, but not in an app's webview's iframe, but how do you change this? – Raycher

My issue was similar, when making the web application Client ID I didn't include my website's uris in two sections you put them there when making the client id in the google developers console – Sarcoid

Answer 10

There was a solution that worked for me, referring to the parent. After getting the URL that will redirect to the Google authentication page, you can try the following code:

var loc = redirect_location;
window.parent.location.replace(loc);

Stanfordstang

Answer 11

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.

Tether

Answer 12

On Apache, you need to edit file 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 voilà!

Ecotype

Answer 13

For a YouTube iframe, the first issue is the URL you have given, is it embedded URL or URL link from the address bar.

This error for a nonembedded URL, but if you want to use a nonembedded URL then you need to code in a "safe Pipe" like (for both nonembedded or embedded 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 separatedID = match[2];
            let embedUrl = '//www.youtube.com/embed/' + separatedID;
            return this.sanitizer.bypassSecurityTrustResourceUrl(embedUrl);
        }

     }

   }
}

It will split out "vedioId". You have to get the video id and then set to URL as embedded.

In HTML

 <div>
   <iframe width="100%" height="300" [src]="video.url | safe"></iframe>
 </div>

Angular 2/5

Colwin

Re "vedioId": Do you mean "videoId"? – Busterbustle

OK, the OP has left the building;: "Last seen more than 4 years ago". Perhaps somebody else can chine in? – Busterbustle

Answer 14

Add the below with a URL suffix:

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

Stentor

@NickDimou Try this linkedin.com/pulse/working-iframe-angular-thiago-adriano – Stentor

Answer 15

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)
{
   <div id="[email protected]" class="collapse" role="tabpanel" aria-labelledby="[email protected]" data-parent="#accordion" style="">
   <div class="card-body">
      @item.DisplayValue1
   </div>
   <br /> <br />
   @{
       var url = item.DisplayValue2.Replace("watch?v=", "embed/");
     }
    <iframe width="560" height="315" src=@url frameborder="0" allowfullscreen                            style="margin-bottom: 25px; margin-left: 25px;">   
   </iframe></div>

Worcester

Answer 16

I had an similar issue embedding YouTube chat, and I figured it out. Maybe there is a similar solution for a similar problem.

It 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 you’re missing to tell where to embed your iframe. To fix my problem, I had to write a script to detect the right webpage and execute the proper iframe embedded domain name.

<iframe src='https://www.youtube.com/live_chat?v=yDc9BonIXXI&embed_domain=your.domain.web' width="100%" height="600" frameborder='no' scrolling='no'></iframe>

or

<iframe src='https://www.youtube.com/live_chat?v=yDc9BonIXXI&embed_domain=www.your.domain.web' width="100%" height="600" frameborder='no' scrolling='no'></iframe>

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

Hypotonic