Hubspot CRM login page won't load in iframe

[coffeeocean]

Our web app integration loads https://app.hubspot.com/login/ inside an iframe instead of a pop-up window, so it doesn't trigger browser pop-up blocker that is anoying for users.  It has been working fine until recently.  I noticed https://app.hubspot.com/login/ page has "X-Frame-Options: sameorigin", which prevent the login page to load.  Is this an intentional change recently?  Is pop-up window the only option to integrate hubspot sign-in UX into a web application?  Thanks!

[IsaacTakushi]

Hi, @coffeeocean.

I'll try to find out whether this was changed recently and intentionally!

[IsaacTakushi]

Hi, @coffeeocean.

The product team confirmed they have not added the X-Frame-Options: sameorigin header to any of our login services.

Indeed, we don't see X-Frame-Options: sameorigin returned from  https://app.hubspot.com/login/, just from https://www.google.com/recaptcha/api.js. Are you seeing the same?

[james-criscuolo]

This appears to occur whenever you have no cookies related to hubspot's DOS protection through cloudflare. If you have not been to a hubspot domain within the given browser, you can not load the DOS protection check within an iframe.

To recreate, in any browser clear the cookie "cf_clearance" for the "hubspot.com" domain. There is a second cookie, but it does not effect this (seemingly). Once you've done that, attempt to load the login via iframe, and it will fail. Going to the login in a separate tab will work (showing the DOS protection first), then from there that browser will be good.

Unfortunately for me, opening the login in another tab will not really work, as I have a desktop app with electron. Is there any way around this?

[IsaacTakushi]

Welcome, @james-criscuolo.

I'm not aware of any way around the behavior you've described.

Forgive me, as I'm not familiar with desktop app development, but would you be able to use a pop-up, as the original poster suggested? (I recognize that may not align with the UX you're going for, however.)

[james-criscuolo]

Hi @IsaacTakushi,

  Forgetting the desktop case, I still feel using the embed link with this complexity is very non-obvious. Can the documentation be updated to reference the issue with the embed link? This page: https://developers.hubspot.com/docs/methods/contacts/contact-timeline-embed

Particularly, that it will not work until a hubspot-hosted page is visited and cf_clearance cookie is set. Another way would be to remove the iframe from the example and recommend not using the iframe. Either way, I'm just curious what the intended use of that is, or if the hoops to jump to make it work are entirely anticipated and expected.

What I imagine we will end up doing is attempting to load the iframe, and if it fails then display some information from your API, with a link to view in hubspot (opens a new tab, or window in desktop). I've read some other forum posts regarding the timeline, and how that information is not easily browseable via the API (altogether at least), otherwise I would drop the iframe altogether and attempt to recreate that embed page myself.

Thanks,

James

[IsaacTakushi]

Hey, @james-criscuolo.

I'm trying to replicate the behavior you described, but want to make sure I understand you correctly.

I've embedded a contact's timeline via IFrame on a non-HubSpot page. I clear all cookies in the browser (Opera in VPN mode), navigate to the page, and click the Log in to HubSpot CTA. The login page (app.hubspot.com/login) opens successfully in a pop-up and I can log in.

Are you forcing app.hubspot.com/login to open in an IFrame? If so, how?

Thanks for bearing with me.

[james-criscuolo]

I'm a little confused by what you wrote. If you embed the link in an iframe, and are not logged into hubspot, you will see the login page (app.hubspot.com/login) right in the iframe (assuming you have the cookie). The flow, when it works, has no popups. There is no "Log in to Hubspot" CTA. A popup immediately suggests there is something else in on your page besides the iframe.

In the failure case, Chrome displays a little icon with a page with a frown, and Firefox just displays a white box. If you see anything further than that, it would appear it is sending the cookie. I have note tested in Opera, but I see not reason to think it would work there, as I doubt the sameorigin rule could be ignored.

[IsaacTakushi]

Hi, @james-criscuolo.

Strange... my colleague and I aren't able to replicate that behavior.

My local page only contains:

<iframe src="https://app.hubspot.com/contact-timeline-embed/2676635/login?id=100001" height="300px" width="1200px" ></iframe>

My tests in Chrome (Incognito) yield the same results as those in Opera:

1. A "Not logged into HubSpot" message appears in the IFrame with an orange Log in to HubSpot CTA.
2. Clicking the CTA opens a pop-up with app.hubspot.com/login.
3. Both of the above occur even after clearing all cookies. (Note: the __cfduid cookie reappears, but it's not the cf_clearance cookie you mentioned.)

I'll direct message you a video of the behavior I'm seeing.

[coffeeocean]

I believe this might not be reproduced deterministically by design, which is the very painful part.  This undeterministic behavior is similar to a related issue I reported at https://community.hubspot.com/t5/APIs-Integrations/Login-page-fails-when-loaded-inside-Microsoft-Off....

Some of our users were affected by either of the two issues, which prevents them from logging in Hubspot account.  When we tried to repro it locally, we can only repro intermittently, which really threw us off.  Our users are not technically savy to help us gather debugging info.

The other issue https://community.hubspot.com/t5/APIs-Integrations/Login-page-fails-when-loaded-inside-Microsoft-Off... is due to CloudFlare DDOS page.  When logging the hubspot sign in page, it will first go through CloudFlare DDOS page, which runs some heuristics to determine of it is a potential DDOS attack.  If yes, it will not load the sign in page.

I'm guessing there is similar heuristics on hubspot sign in page server side that decide whether SAMEORIGIN header will be added.

I get it hubspot needs to protect agains attacks.  But the implementation is far from ideal.  It is hurting ligitimate users that uses desktop based integrations.  This is very frustrating, because the nondeterministic behavior and the possible heuristics behind it is a black box!!

[james-criscuolo]

Hi,

  Isaac had sent me a private message, which I responded to, but received no response, so I wanted to follow up here. Recreating this is 100% reliable, and I've put steps below (pasted from my private message). I have not seen the other issue that you mention, at least not yet.

I now understand at least part of the misunderstanding, but I still do see the issue. It turns out the page the documentation mentions (https://app.hubspot.com/contact-timeline-embed/${contact.portalId}/login?id=${contact.vid}) redirects to https://app.hubspot.com/contact-timeline-embed/${contact.portalId}/embed/contact/${contact.vid}, so we were just using the second one. After switching it, I now see the CTA. This does NOT fix the problem however.

The cookies you are deleting are not to "hubspot.com", they are to "app.hubspot.com". For deleting the cookies:

- go here: chrome://settings/cookies/detail?site=hubspot.com&search=cookie

- delete "cf_clearance" and anything mentioning "csrf" (there seems to be two different ways this can populate)

- retry test.

If you don't get a page that looks like the attached picture, its a sure thing that you still have the cookies allowing you to get past this issue.

[IsaacTakushi]

Sincere apologies for the delayed response.

@james-criscuolo, thank you so much for clarifying. I believe I am deleting the cf_clearance and csrf cookies from hubspot.com, however I am still seeing the "Log in to HubSpot" CTA load in an iframe.

I've sent you a screencast of my actions via DM. Would you mind pointing out what I'm missing?

[torstah]

@IsaacTakushi 

I have the exact same problem but with the Chrome Extension. 

Even if I try to open the extension while on my Hubspot dashboard I get:

Refused to display 'https://app.hubspot.com/login/?loginRedirectUrl=https%3A%2F%2Fapp.hubspot.com%2Factivity-feed-embedded%2F5202745%2Fall%3Fsource%3Dextension&loginPortalId=5202745' in a frame because it set 'X-Frame-Options' to 'sameorigin'

I have:

- Uisabled all other extensions

- Updated chrome

- Cleared all cookies etc. 

Any hints would be very appreciated! 

Thanks

[IsaacTakushi]

Hi, @torstah.

I'm sorry I missed your message.

To clarify, are you referring to the HubSpot: Email Tracking & Sales CRM for Gmail extension?

If so, this thread discusses behavior very similar to what you're describing and was also opened four weeks ago. @jennysowyrda's instructions here resolved the behavior for at least four users.

[torstah]

Yes, that is correct. 

I have solved it by setting the flag in Chrome to bypass the same origin issue. 

But when will this be fixed for real? 

The extension is key in our workflow.

Thanks!

[nfernandes]

Hello,

We also noticed that same problem (though is not to /login/ but to /oauth). Here you can see the server setting the x-frame-options to sameorigin:

Can you help?

Thanks,

Nuno Fernandes

[IsaacTakushi]

Welcome, @nfernandes.

To enhance security for our users, we began preventing OAuth pages from loading in iframes on June 17, 2019.

Our team proactively reached out to integrators that were using this method, so I apologize if you slipped through the cracks.

Please let me know if you have additional questions or concerns.