CRM Extension API unable to open Iframe in Firefox

crm_extensions

#1

I implemented CRM extension API with some iframes and aciton hooks, Everything works fine on chrome, safari and edge but when i try to open iframe on firefox its just a blank screen with no data no console error.


#2

Hi @sunny, that's strange. What's the HubID of your account that you're seeing this problem in, and your app id?


#4

Hub Id: 2094263
My app id: 58327
CRM extension api id: 97377


#5

Hi @sunny, this certainly looks like an unexpected error on our end, but I'll need to check with my team.

As an aside, it is a holiday in the US tomorrow and Friday so response times may be a bit slower than normal. I'll likely be able to get back to you by Monday. Thanks!


#6

Ok I can wait till monday


#8

hi @sunny, we're still looking into this. Looks like the iframe loads in Firefox when you click Actions > Send, but no content appears in that iFrame. In Firefox we're also getting a 200 response on the GET request to your external resource at https://app.proposify.co/proposal/send/1227107?_iframe=https://*.hubspot.com&dealname=safsdfsadf&amount=0&closedate=1542772800000&num_associated_contacts=1#

It might be something to do with the webpage being sent from the app.proposify domain that HubSpot is blocking. I'll update you when I have more info on this, though. Thank you!


#9

Ok, Let know if you need anything from me to solve this issue.


#10

Hi @sunny, I pushed a simple application to Heroku here: https://obscure-cliffs-47038.herokuapp.com/ and was able to see the same issue when opening up the iframe as the iframe loads in Chrome but not in Firefox. I'm speaking with our developers and will get back to you when we have a better grasp for why this might happen.


#11

Hi @sunny, after a lot of testing with the help from our developers, I figured out what the culprit was. It looks like your X-Frame-Options header was set to allow-from https://*.hubspot.com. X frame options headers are only really enforced in Firefox, and they disallow clickjacking attacks, which makes sense why this wasn't working out only in Firefox. Your wildcard header is not valid. If you change this to something like allow-from https://app.hubspot.com or use some sort of Regex filter that can get all subdomains like this: https://stackoverflow.com/questions/17656799/javascript-regex-that-gets-all-subdomains, then that should work, but the way you're currently setting it is not valid.

I created a simple node app and set the headers here like this:

I was able to load the iframe when setting the header to app.hubspot.com but not with *.hubspot.com. Let me know if you have questions!


#12

Hi @Connor_Barley I tried to set x-frame-options: ALLOW-FROM https://app.hubspot.com or x-frame-options: ALLOW-FROM https://api.hubspot.com
but its still not working


#13

Hi @sunny, when I go to Firefox and open up your CRM Extension by going to Actions > Send, I cannot see any X-Frame-Options header at all. Make sure you include one:


#14

Hi @Connor_Barley Now I am sending proper value both in csp and x-frame-options but its still not displaying anything.


#15

Hi @sunny, unfortunately, I still cannot see your X-frame-options header on the object I'm taking a look at here: https://app.hubspot.com/contacts/4976091/deal/413595043?interaction=note

Here's what I see for yours:

For my own portal, here's what I can see:


#16

Hi @Connor_Barley can u check again... now I am asking x-frame-options and csp on that page too


#17

Hey @sunny, thanks for changing that. Looking like the console has an error: "Content Security Policy: Ignoring ‘x-frame-options’ because of ‘frame-ancestors’ directive."

This stackoverflow article goes over a bit: https://stackoverflow.com/questions/40373771/how-does-content-security-policy-work-with-x-frame-options. Looks like the content-security-policy header also should be changed: https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy#frame-ancestors


#18

I have added hubspot domain in both csp and x-frame-options but no luck and that console message is a warning not error.
as mentioned in https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/frame-ancestors

HTTP/2.0 200 OK
date: Thu, 29 Nov 2018 16:33:36 GMT
content-type: text/html; charset=UTF-8
content-length: 20
server: Apache
set-cookie: csrf_cookie=aae4e0c2e85e99085342965328d4d526; expires=Thu, 29-Nov-2018 18:33:36 GMT; Max-Age=7200; path=/; domain=.proposify.co; secure; HttpOnly
expires: Thu, 19 Nov 1981 08:52:00 GMT
cache-control: no-store, no-cache, must-revalidate
pragma: no-cache
content-security-policy: default-src 'self' *.proposify.co s3.amazonaws.com; img-src * data:; script-src 'self' 'unsafe-inline' 'unsafe-eval' *.stripe.com *.heapanalytics.com *.segment.io *.segment.com *.intercom.io *.intercomcdn.com *.googletagmanager.com tagmanager.google.com *.visualwebsiteoptimizer.com *.cloudfront.net *.google-analytics.com *.facebook.net *.ads-twitter.com *.facebook.com *.t.co *.twitter.com *.intercomassets.com *.clearbit.com *.zapier.com *.marketo.net *.mktoresp.com *.bizographics.com *.linkedin.com *.appcues.com https://zapier.com *.driftt.com *.olark.com *.growsumo.com js.recurly.com *.proposify.co s3.amazonaws.com; style-src 'self' 'unsafe-inline' *.intercomcdn.com *.gravatar.com *.wp.com *.amazonaws.com *.cloudfront.net *.olark.com *.proposify.co s3.amazonaws.com; connect-src 'self' wss: *.intercom.io *.segment.io *.intercomcdn.com *.intercomusercontent.com *.clearbit.com *.profitwell.com *.mktoresp.com *.delighted.com *.olark.com grsm.io emitter2.proposify.co *.proposify.co s3.amazonaws.com; media-src 'self' *.youtube.com *.istaging.com *.vimeo.com *.wistia.com *.wistia.net *.intercomcdn.com *.olark.com *.proposify.co s3.amazonaws.com; font-src 'self' *.intercomcdn.com *.proposify.co s3.amazonaws.com; frame-src 'self' data: *.zapier.com *.youtube.com *.youtube-nocookie.com *.vimeo.com *.wistia.com *.istaging.com *.wistia.net *.facebook.com *.stripe.com *.appcues.com https://intercom-sheets.com *.driftt.com *.olark.com *.hubspot.com app.hubspot.com *.proposify.co s3.amazonaws.com; worker-src 'self' data: *.hubspot.com app.hubspot.com .proposify.co s3.amazonaws.com; frame-ancestors https://.hubspot.com
x-frame-options: ALLOW-FROM https://app.hubspot.com
refresh: 0;url=https://app.proposify.co/login?_iframe=https://app.hubspot.com
content-encoding: gzip
vary: Accept-Encoding
X-Firefox-Spdy: h2


#19

Hi @sunny, I was able to get that warning for my own app to go away when trying your headers. Here's what I used instead, excluding the frame-ancestors header and moving app.hubspot.com to the beginning of your frame-src section:

default-src 'self' *.proposify.co s3.amazonaws.com; img-src * data:; script-src 'self' 'unsafe-inline' 'unsafe-eval' *.stripe.com *.heapanalytics.com *.segment.io *.segment.com *.intercom.io *.intercomcdn.com *.googletagmanager.com tagmanager.google.com *.visualwebsiteoptimizer.com *.cloudfront.net *.google-analytics.com *.facebook.net *.ads-twitter.com *.facebook.com *.t.co *.twitter.com *.intercomassets.com *.clearbit.com *.zapier.com *.marketo.net *.mktoresp.com *.bizographics.com *.linkedin.com *.appcues.com https://zapier.com *.driftt.com *.olark.com *.growsumo.com js.recurly.com *.proposify.co s3.amazonaws.com; style-src 'self' 'unsafe-inline' *.intercomcdn.com *.gravatar.com *.wp.com *.amazonaws.com *.cloudfront.net *.olark.com *.proposify.co s3.amazonaws.com; connect-src 'self' wss: *.intercom.io *.segment.io *.intercomcdn.com *.intercomusercontent.com *.clearbit.com *.profitwell.com *.mktoresp.com *.delighted.com *.olark.com grsm.io emitter2.proposify.co *.proposify.co s3.amazonaws.com; media-src 'self' *.youtube.com *.istaging.com *.vimeo.com *.wistia.com *.wistia.net *.intercomcdn.com *.olark.com *.proposify.co s3.amazonaws.com; font-src 'self' *.intercomcdn.com *.proposify.co s3.amazonaws.com; frame-src 'self' app.hubspot.com *.zapier.com *.youtube.com *.youtube-nocookie.com *.vimeo.com *.wistia.com *.istaging.com *.wistia.net *.facebook.com *.stripe.com *.appcues.com https://intercom-sheets.com *.driftt.com *.olark.com *.hubspot.com app.hubspot.com *.proposify.co s3.amazonaws.com; worker-src 'self' data: *.hubspot.com app.hubspot.com *.proposify.co s3.amazonaws.com"

The issue is definitely with the headers, not with the CRM Extension. A few things I noticed, however:

You'll need to do some testing to see what the real root of the issue is. I'd recommend deleting or altering certain sections to see if the iframe loads under those conditions, then slowly add items back in and see if that fixes it.


#20

Hi @Connor_Barley found the root cause its not due to csp or X-Frame-Options, But to some reason firefox its not refreshing the page in iframe header('Refresh:0;) I changed it to header('Location: and it started working.
I am redirecting the page app.proposify.co/proposal/send to app.proposify.co/login.

Thanks for the help.


#21

Ah, that's great to hear @sunny! Definitely a strange one. Glad you were able to resolve it.