Content headers for sheets


#1

:wave:hey I am trying to load a custom sheet from AWS Lambda, but all it currently returns is
<p>Your browser doesn't support iframe :(</p>.

I read the CSP part of the documentation and thought https would be enough as I didn’t set any CSP headers, but unfortunately it didn’t seem to work. It’s now unclear what I should set in the headers I return. Current try :

'Access-Control-Allow-Origin': 'https://api-iam.intercom.io/messenger/web/ping',`
'Access-Control-Allow-Credentials': true,
'X-Frame-Options': "ALLOW-FROM https://s3.amazonaws.com/ https://js.intercomcdn.com/"
'Content-Security-Policy': "script-src 'self' https://s3.amazonaws.com/ https://js.intercomcdn.com/",

`

Could you provide me with an example of valid headers?

Also, from the moment I started tweaking headers, I haven’t been able to access to chat messenger apart from incognito mode. The error might be related :
Failed to load https://api-iam.intercom.io/messenger/web/ping: The value of the 'Access-Control-Allow-Origin' header in the response must not be the wildcard '*' when the request's credentials mode is 'include'. Origin 'https://www.mysite.xyz' is therefore not allowed access. The credentials mode of requests initiated by the XMLHttpRequest is controlled by the withCredentials attribute.

Thanks!


#2

Link to the corresponding Gist:


#3

Hey again @hugovillain :wave:

In order for this to work, you should not be sending X-Frame-Options. All the other criteria should be matched here, but for future reference, they go as follows:

  • Must be served via HTTPS and the sheet URL must use https:// protocol (i.e. no redirect)
  • Must not send X-Frame-Options header.
  • If sheet page sends CSP header, frame-ancestors directive must not be included. This allows the sheet to be loaded within Messenger host pages in any domain.
  • If sheet page sends CSP header, add https://js.intercomcdn.com/ to script-src CSP directive. This allows the sheet to load the Messenger Sheet Library script inside.

#4

Thank you for your answer @zach, unfortunately, removing X-Frame-Options does not work for me. I actually added it after multiple attempts without x frame options (or any options at all).

You can see the non-working example here: https://www.radis.xyz

and the actual code: https://github.com/THook/intercom-messenger
See the sheet1.js for the loaded sheet!

Thanks a lot for your time


#5

Interesting Hugo - as CSP headers have to be sent both by the Sheet page and the website that host the Messenger in which sheet will be opened to work, it could be to do with the latter.

If the website that hosts Intercom Messenger sends CSP headers, intercom-sheets.com needs to be added to the frame-src directive of the CSP header. This allows the Messenger in the host website to load the Sheet from any App provider :+1:

Can you do this and let me know if it works?


#6

Hey Zach,

I realise CSP headers are not my strong point reading your comments :pensive:

So, I tried adding
<meta http-equiv="Content-Security-Policy" content="frame-src intercom-sheets.com"> to my index file.

In my Sheet page lambda, I also replaced 'Content-Security-Policy': script-src 'self' https://s3.amazonaws.com/ https://js.intercomcdn.com/ with
'Content-Security-Policy': 'frame-src intercom-sheets.com' with no success.

To clear things out: I started adding CSP headers to Sheet page because I could not get anything working without CSP headers. But removing each CSP tag doesn’t make it work either!

I hope I’m not messing things up, but given the fact that I have no specific requirements and that other people get sheets working, I’m a bit puzzled right now. Do you have an example lambda method that implements Sheet pages? I must have forgotten something else!


#7

Hey @hugovillain - upon looking into this, it doesn’t seem to be a problem with the CSP (there’s no errors in the console that speak to this and the sheet URL you’ve provided returns a 200 response).

The frame source actually shows that the meta tag has not been closed properly and thus while the title of the sheet loads, the rest does not. You’d need to fix this so the tag is closed with a / at the end (ie. <meta http-equiv="Content-Security-Policy" content="frame-src intercom-sheets.com" / :+1:


#8

Got it! :tada:

Looking at the HTML the messenger was receiving, I noticed that this line
<script src="https://js.intercomcdn.com/messenger-sheet-library.latest.js" /> was actually enclosing the whole document, including body and meta tag :

So I just had to replace this line, and enclose the tag by myself…
<script src="https://js.intercomcdn.com/messenger-sheet-library.latest.js"></script>

I’m actually able to start coding now haha, thanks A LOT for your patience @zach, I would not have found the solution by myself it seems… Props to you!


#9

Perfect, no problem @hugovillain - glad we got there and it’s all sorted :smile: