I have 2 domains, one that hosts my app - myapp, and the other that hosts gooddata dashboards - analytics.myapp. I would like to embed a gooddata dashboard to a page in my app. I have set the frame-src to allow requests from the domain where the dashboard is:
set $CSP "${CSP}; frame-src https://analytics.myapp.com/";
add_header Content-Security-Policy ${CSP};
I have also set the CORS at the host analytics.myapp to allow requests from myapp domain:
ingress:
nginx.ingress.kubernetes.io/enable-cors: "true"
nginx.ingress.kubernetes.io/cors-allow-origin: "http://localhost:10000, https://myapp.com"
I want to embed an iframe with content from the domain analytics.myapp, which is possible to see only after you are authenticated, into a page on myapp domain. Right now when I load the content the iframe is displaying a login page, and if I try to log in through an iframe, I get an error:
Blocked autofocusing on a <input> element in a cross-origin subframe.
If I login to the analytics.myapp with a user in a different tab that doesn't work, since cookies are not sent to the myapp domain.
I see that it is possible to authenticate through an api in their docs. And they also have docs on how to embed their dashboard, but in order to see the embedded dashboard docs say:
Users must be workspace members to see the embedded dashboard.
I don't have SSO (single sign on) implemented yet, but I wonder once I implement it, will there be still issues with CORS? I would imagine that once I implement this, and a user from myapp domain goes to a page where I have an iframe with the embedded dashboard from analytics.myapp, that they will be redirected to an auth endpoint on myapp where user will be authenticated through SSO for analytics.myapp and redirected back to analytics.myapp with the user data.
Now is that the correct flow and will that work with an iframe, are there any CORS issues with this, and can that be implemented like that?
Related
I followed the guide to setup the embedded sign in experience using b2c and an IFrame (Embedded Sign-In Doc).
However, I am not quite sure on how to get the Access token and use it throughout my Application.
So far I got the IFrame to display the SignIn/SignUp Form and the login/signup works flawless.
But after that the IFrame redirects to the landing page of the application and my "parent" Page does not receive an ID Token.
(The url of the "parent" Page matches the redirect url of the iframe authorization request)
The src of the IFrame is the authorization request url of my b2c policy.
PS: Viewing the network Tab I can see the issued and valid ID Token in the "confirmed" response (redirect-url/#id_token=eyJ0eX...) from the b2c Policy.
Best
Max
this why it is indicated in the doc to use window.top.location.reload(); so that the page reloads once login is done and you can capture the id token in your page logic normally.
An example of that is that you can use the following script in your layout:
<!-- Because the authorization flow happens inside the iframe, we need to reload the main page.-->
<script>
if (document.referrer.startsWith('#Configuration.GetSection("AzureAdB2C")["Instance"]'))
window.top.location.reload();
</script>
Another alternative is that you can set the redirect-url for your login request to a "LoginCompleted" page, and have it do the redirection for you.
Here are a couple of examples of this in action using pre-built samples:
(.netcore, uses redirect script) https://github.com/helshabini/active-directory-aspnetcore-webapp-openidconnect-v2/tree/master/1-WebApp-OIDC/1-7-B2C-Embedded
(.net framework, uses login completed page) https://github.com/azure-ad-b2c/sign-in-with-iframe
(nodejs, uses redirect script) https://github.com/techjazz-MS/B2C_EmbeddedSignin_nodejs_passportjs_Sample
I want to allow a login that happened on a parent site to automatically allow the iframed site to be logged in.
Here is the specific situation:
I have a site that is a simple login page. After login the user has menu with a series of URLS (all with the same base domain but with different ports).
main.example.com (main site)
main.example.com:14002 (iframe #1)
main.example.com:14003 (iframe #2)
...
The user selects one of the menu items and the url is loaded into the iframe.
The menu is driven off of a database table.
All the URLs will be loaded from the IIS but they all run on different ports so we have good control of being able to restart them and deploy new ones in the middle of the day.
What I am struggling with is finding a way to allow the login of the main site to allow the secure login of iframe sites.
In other words, how can the iframed site securely know the user id of the user that logged into the main site?
These are not arbitrary sites being iframed. We are in control off all the source code.
Here is what we ended up doing:
The master site places a cookie with a token in it using this technique so it is visible to the module site:
document.cookie = "key=token;domain=mydomain.com"
Then the module.mydomain.com site does a web service call into master.mydomain.com website with the token to retrieve the logged in userid.
If there is no cookie or the token is expired the user is presented with a login screen in the iframe window.
Lately a new error has popped up, which didn't exist before.
I have a Firebase project mapped to a custom domain.
The structure I'm using is as follows:
firebase-project.example.com is DNS-pointing to Firebase, that's the custom domain, it is tied to the Firebase project (Firebase Hosting).
But the structure I'm offering to the clients is as follows:
www.example.com/firebase-project which is hosted on my own server.
When I have Firebase generate the verification email, I present them a verification link in the email which contains this structure
https://www.example.com/firebase-project/auth/email?mode=verifyEmail&oobCode=SOME_AUTOGENERATED_CODE&apiKey=FIREBASE_API_KEY
The page rendered by https://www.example.com/firebase-project/auth/email contains an iframe, which loads the following URL
https://firebase-project.example.com/__/auth/action?mode=verifyEmail&oobCode=SOME_AUTOGENERATED_CODE&apiKey=FIREBASE_API_KEY
That should (and effectively used to!) verify the email on Firebase Hosting, and present the "ok, verified" message provided by Google inside the iframe, all neatly surrounded by the branded https://www.example.com/firebase-project/auth/email webpage.
But as of lately the iframe shows the following message:
Error encountered
The page is displayed in a cross origin iframe.
and I can't verify the email.
These cross-origin issues usually get fixed by adding the apropiate access-control-allow-origin headers. Where do I need to set the header, and to which value?
I have tried sending Access-Control-Allow-Origin: firebase-project.example.com and also Access-Control-Allow-Origin: * with the www.example.com/firebase-project/auth/email response, but that does not work.
Could a crossdomain.xml hosted somewhere help me with the issue?
If I inspect the page, and manually copy the iframe-url and paste it in the address bar, then the email will get verified.
No console messages (errors) are displayed at any time.
www.example.com as well as firebase-project.example.com are in the list of authorized domains for that project.
firebase-project.example.com ist using Firebase Hosting and
therefore has access to the /__/auth/action functionality. It is able to
verify the email address.
www.example.com is not hosted on Firebase / Google Cloud, and
therefore has no /__/auth/action functionality. It can't verify the email address without the help of firebase-project.example.com.
Sadly, the Firebase Admin SDK does not offer any support for letting the backend at www.example.com verify the email address for the given oobCode, which is why I was forced to use an iframe.
This is what the result should look like, instead of just a white page confirming the verification:
And the iframe is implemented as follows:
<iframe src="https://firebase-project.example.com/__/auth/action?mode={## mode ##}&oobCode={## oobCode ##}&apiKey={## apiKey ##}"></iframe>
The Firebase Console Email verification template looks like this
Else I see myself forced to create a redirect to firebase-project.example.com which results in this page (which actually seems to be predestined to be embedded in an iframe)
There is exactly zero security gain in preventing the embedding inside a page of an authorized domain.
Also, notice the message "You can now sign-in...". My approach shows the Sign-In link conveniently above the iframe. Without it, the user must now type "www.example.com/firebase-project" into the address bar. It makes so much more sense with an iframe; a more efficient and user-friendly approach.
After Registering my application with Facebook for using Facebook OAuth Login with ASP.NET application i got error. when i am click on Facebook button in Development Environment.
Can't load URL: The domain of this URL isn't included in the app's domains.
To be able to load this URL, add all domains and sub-domains of your app to the App Domains field in your app settings.
Login Screen
Error Displayed
If you are getting same Error means you have Enter Wrong URIs in "Valid OAuth redirect URIs" while Registering my application with Facebook.
Choose App where you are getting error while Registering
After Choose App go to "PRODUCTS" section in that section choose Facebook Login , inside that section choose "Setting", after choosing "Client OAuth Settings" panel will appear in that there is "Valid OAuth redirect URIs" textbox in that just enter your localhost
URL [http://localhost: Port Number/signin-facebook].
e.g if you localhost URL is "http://localhost:8000/Account/Login"
then while entering in "Valid OAuth redirect URIs" textbox enter "http://localhost:8000/signin-facebook" and click on Save Changes
Registering Facebook Application
Just write carefully in your OAuth Redirect URI: http://{ your host }:{ port number } (e.g. http://example.com:8000).
There are two parts you need fill in.
Both on the right side of your app setting panel.
Settings -> Advanced -> Domain Manager( Add Your URL)
PRODUCTS -> Facebook Logion -> Settings -> Valid OAuth redirect URIs
Here to add your URL.
I am using Firebase Auth signInWithPopup() which is absolutely great. But
when initially configured, the popup reads:
Choose an account to continue to myApp-123.firebaseapp.com
I would really like it to read:
Choose an account to continue to myApp.com
How can I make the popup show my own domain?
In my solution that follows I should say that the steps I followed worked. It is possible that I did something that it not absolutely required, but to my knowledge and at this time, I have not broken anything.
This workflow (and the documentation) is a bit broken up because you must adjust both your Google Cloud Platform (GCP) credentials and the Firebase authentication. Documentation was provided by each side of this workflow but I was not able to find a document that covered the entire workflow to make this substitution.
GCP Console Setup
I first adjusted my GCP credentials for the OAuth Client:
Go to the GCP console > APIs & Services > Credentials page (https://console.cloud.google.com/apis/credentials?project=_ and select your project)
At the bottom of the page, find "OAuth 2.0 client IDs". There should be an entry titled "Web client (auto created by Google Service)"
To the right side of page click on the edit icon (pen), which opens the configuration page.
Under "Authorized JavaScript origins", you should see your yourFirebaseApp.firebaseapp.com domain. Click "+ Add URI" and add your custom URI. This should be an "https" domain, so use https://myApp.com
Under "Authorized redirect URIs", you should see https://yourFirebaseApp.firebaseapp.com/__/auth/handler. (The __/auth/handler bit on the tail is the auth callback that Firebase provides). Click "+ Add URI" and add your domain, with __/auth/handler at the end. (For example: https://myApp.com/__/auth/handler)
Click Save
Go to the OAuth Consent Screen (https://console.cloud.google.com/apis/credentials/consent/edit?project=_). Add your custom domain to "Application Homepage link", and fill in the "Application Name" and "Logo", and "Application Privacy Policy link" with custom values for your app.
Firebase Console Setup
Then, you'll need to add your custom domain to the Firebase auth authorized domain list:
Go to the Firebase Console > Authentication > Sign-in Methods page (https://console.firebase.google.com/project/_/authentication/providers and select your project)
Under "Authorized Domains" you should see localhost and the default yourFirebaseApp.firebaseapp.com domain. Click the "Add Domain" and enter your custom domain name, then click add.
Web App Setup
You will likely remember the block of code that you copied from your firebase project and pasted into the code from which you compile and deploy your Web App. (Some people use the hosting default init.js script - if you do, go back and setup your app using the config snippet instead)
Find the "authDomain" field in the code snippet, and change it to your custom domain, then re-deploy.
This procedure worked for me and my project, I have posted this in the hopes that these instructions may be refined via feedback from others performing this or similar operations.
I asked firebase support and got the following reply. Items in italics are my additions. This is more or less the same as Done's answer but with a custom domain. You do not need to host your app on Firebase.
--
Hi Jayen,
Thank you for reaching out. I'll be happy to assist you.
In order to update firebase-project-id.firebaseapp.com in the OAuth consent screen, you need a custom domain with Firebase Hosting (Firebase Console > Hosting > Connect Domain). This is because https://firebase-project-id.firebaseapp.com/__/auth/handler is hosted by Firebase Hosting. You need to point your custom domain to firebase-project-id.firebaseapp.com.
When connecting the custom domain, if you are not hosting your app on firebase, use a new subdomain (e.g. app.yourdomain.com) and do not redirect it. Firebase will prompt you to add a DNS entry and take of the SSL certificate automatically.
After connecting your custom domain to your Firebase project, you should also follow the steps below:
Go to the Firebase Console > Select Project > Authentication > Sign-in method > Facebook > Copy the URL under 'To complete setup, add this OAuth redirect URI to your Facebook app configuration.'
It will look something like https://firebase-project-id.firebaseapp.com/__/auth/handler
Replace the project ID with your custom domain. It will look something like: https://yourdomain.com/__/auth/handler
Go to the GCP Console > Select project > API Manager > Credentials > Add the link in #2 to the 'Authorized redirect URIs'
Then ensure to use yourdomain.com as the authDomain in your app's configuration instead of firebase-project-id.firebaseapp.com
firebase.initializeApp({
apiKey: ....,
authDomain: 'yourdomain.com',
...
});
Let me know if you have any other questions regarding this.
Regards,
Aye
--
In my case, yourdomain.com is where I host my site, so I used app.yourdomain.com where I needed it.
Firebase Hosting URL
handler url: https://app.yourdomain.com/__/auth/handler
GCP Credentials
Choose the right one under OAuth 2.0 client IDs . The client ID will match the one you have configured Firebase with in your code.
authDomain: "app.yourdomain.com"