Embed Open Search dashboard in iframe with AWS Cognito authentication - amazon-cognito

I'm trying to embed an Open search dashboard in an iframe inside a react application. The iframe code is provided by Open Search:
<iframe
title="Dashboard"
src="https://app-name.us-east-1.es.amazonaws.com/_dashboards/app/dashboards?security_tenant=READ_ONLY#/view/app-id?_g=(filters:!(),refreshInterval:(pause:!t,value:0),time:(from:now-15m,to:now))&_a=(description:'',filters:!(),fullScreenMode:!f,options:(hidePanelTitles:!f,useMargins:!t),query:(language:kuery,query:''),timeRestore:!f,title:test_abm,viewMode:view)"
></iframe>
but I'm getting the following error:
Refused to display 'https://app_name.auth.us-east-1.amazoncognito.com/' in a frame because it set 'X-Frame-Options' to 'deny'.
I think cognito is blocking the conection because it doesn't detect that I'm logged in.
Is there a way to pass my auth token to the iframe so it will display the dashboard?

Related

tableau iframe call prompts login

I am using tableau trusted ticket call to show a report embeded in my site.
I formed a url and when I call it in browser tab, reports correctly loads but when I call it in iframe it prompts with tableau login screen.
third-party cookies are enabled in the browser.
anything am missing?

Aws amplify federated sign in trough iframe 'X-Frame-Options' to 'deny'

Is there a way to call Auth.federatedSignIn({ provider: CognitoHostedUIIdentityProvider.Facebook }); inside iframe but from new tab(window)?
I've tried to add link with targe=_top or target=_blank but that didn't solved my problem. I mean I need to open new window with cognito hosted UI? Though if link is clicked outside of iframe everything works properly..

Embedding Firebase social login in an iframe

I have a React app embedded in an iframe. The app uses firebase-authentication to sign in using Google, Facebook or Twitter. While the authentication mechanism works perfectly outside an iframe, it does not work within an iframe due to cross-origin issues. Any ideas how to work around this?
Here's the code that embeds the React app in an iframe:
<iframe
id="myframe"
src="https://example.com/my-frame"
scrolling="no"
></iframe>
When the React app redirects to the social login, I get the following error message in Chrome DevTools:
Refused to display 'https://accounts.google.com/o/oauth2/auth?response_type=code&client_id=xyz&scope=https://www.googleapis.com/auth/userinfo.email+profile+openid&redirect_uri=https://example.firebaseapp.com/__/auth/handler&state=AH..oE' in a frame because it set 'X-Frame-Options' to 'sameorigin'.
It appears that Google Sign In is sending x-frame-options:SAMEORIGIN header which is preventing the browser from opening that page. Is there a way to work around this?
Thanks in advance!
OAuth providers like accounts.google.com refuse to render in a frame or iframe. This is done for security reasons.
There is nothing you can do to bypass that. However, you could switch to using signInWithPopup instead if you are using Firebase Auth to sign-in from an iframe.

Mobile Safari FB.login Oauth Redirect Error

I have a mobile web application that integrates with the Facebook Graph API.
Basically, it uses the JS SDK to obtain details about the viewing user that it can then use to render user specific content.
I use the FB.login function to have the user login to my Facebook app. This should work as follows:
JS on pages detects that user has not logged in to Facebook app
User is given button to click to fire FB.login
User is redirected to Facebook page to authorise the app and login
User is redirected back to my mobile web application
JS on pages detects that user is logged in to Facebook app, polls user data from Graph and renders it.
This all works fine on Android, but the redirect step does not work on Mobile Safari
The user gets an error referring to an EntityRef, which looks like the Content-type being sent to the browser is XML but where the content includes an illegal character:
Error on line 1 at column 49: EntityRef: expecting ';'
This is the actual link that is generating the error:
https://m.facebook.com/dialog/oauth?display=touch&domain=cgfoodscomp.herokuapp.com&scope=email&e2e=%7B%7D&app_id=135937919902029&locale=en_US&sdk=joey&client_id=135937919902029&redirect_uri=https%3A%2F%2Fs-static.ak.facebook.com%2Fconnect%2Fxd_arbiter.php%3Fversion%3D24%23cb%3Df3cf8ca2ac%26origin%3Dhttps%253A%252F%252Fcgfoodscomp.herokuapp.com%252Ff2d1c54b04%26domain%3Dcgfoodscomp.herokuapp.com%26relation%3Dopener%26frame%3Df35f8ac348&origin=2&response_type=token%2Csigned_request
When you open this in another browser, you get a response with Javascript (I won't post it here as it contains script tags), which contains references to the iPhone:
iPhone.*Version/(5|6)
I'm actually using a Version 4 IOS.
Does anyone know if this stuff is supposed to work in Version 4?
This is a Facebook Bug, which is due for resolution:
https://developers.facebook.com/bugs/339889299473431

Redirect to own site when user logs in via Facebook app

I am building an app with the functionality to publish
messages to users walls while specific actions runs on
my website.
What I have done is (briefly):
Registered my own app on Facebook
Added a login button on my website with permission
to publish:
Log in on Facebook
Downloaded facebook-php-sdk library
It is now I start having problems. I do not know how
to do what I want to do now.
What I want to do:
When a user logs on to facebook via my website. I want
a file on my site to be called, where I can update the
user's data in my own database as well.
Because that is not what the canvas url is meant to do? How it
is no, seems no file at all is called on my site when
I click on Login.
Since you are using the Facebook PHP-SDK you noticed that there are two options for the users to login:
Using the XFBML button, which will:
Open a login dialog (pop-up) asking for permissions..etc
When a successful authentication/authorization is complete the dialog will close, the auth.login event will be triggered and based on that the page will get reloaded window.location.reload();
The PHP in the top of the page will get into business and $session = $facebook->getSession(); will actually retrieve a session! $user = $facebook->getUser(); will retrieve the current user
Using the Login URL generated by the Library $loginUrl = $facebook->getLoginUrl(); this URL will get you through the same flow and if you noticed there's a next redirect_uri parameter which will redirect you back after a successful process to that URL (mainly the same URL you are at), where you can change that parameter if you like.
The canvas URL is the URL Facebook uses when it displays your application from within Facebook. You would use this functionality if you expect users to use your application while in Facebook itself.
When authenticating using Facebook's API (assuming graph API usage here), you provide a redirect_uri as part of the authentication URL. Once Facebook has authorized your application, it will redirect the user's web browser to the URI you specified. This URI can be any link you desire on your site. You should use the link as the determination of when the user is logged in successfully, e.g., https://mywebsite/facebook/loggedin.