Create an app, configured the sample code with client secrets etc. I can install the app and it shows up in my Zoom Apps tab on client. I see the name and description correctly
I got the ngrok setup and can see the Hello Browser page when I go directly to the browser with the ngrok.io url
What doesn’t work:
When I open the app in my zoom client, it opens and empty page
When I open the app in meeting, it opens and empty page
I was expecting to see “Welcome to your Zoom App” within Zoom client/meeting.
Thank you for posting in the Developer Forum. Great question! To debug further, it is recommended to enable developer tools for the Zoom Client. You can check out the help documentation for instructions on that: Zoom Developer Docs
I double checked that in “App Credentials” field, I have latest xyz.ngrok.io/auth URLs in OAuth allow list (though I assume no code/config change is needed on the code side).
An additional observation, when I check http://127.0.0.1:4040/inspect/http it shows “302 Found” for the GET /auth request. Not sure if this is relevant, but I am posting just in case.
@amunje I believe that Zoom only checks that the Content-Security-Policy header is present, but it does not actually validate the values of any OWASP recommended headers. Have you tried to move policies into actual web-server headers?
I was trying to stay within the documented setup. Are you suggesting I use my own web servers (run locally) instead of the provided sample code? I did try running my own simple http server, with and without sending hardcoded 3 response headers. Still same issue.
Recommend checking that your ngrok service is forwarding all your headers. Also, after you turn on the dev tools you will be able to examine the headers that are actually delivered to the embedded client. Take a look there (and also look at the same headers in the system browser you’re looking at).
For what it’s worth, we on the Zoom Apps team haven’t seen this (ngrok lowercasing your headers and impacting embedded browser security controls). Are you able to see the request to the server backend itself from within the Network tab of the embedded browser dev tools console? That might tell us something.
Another thought is this: have you correctly pasted your ‘Home URL’ (which includes your ngrok origin) into the build flow? I’m asking because a misspelling here would cause the server to handle a request for a url it does not support (or it might go somewhere else altogether, if the origin is incorrect). If the request goes to an endpoint on your server it doesn’t support, it would thereby not apply the correct headers (and also possibly return a 500, which might be ignored by the embedded browser anyway, owing to missing headers).
When clicking within Zoom App, there seems no activity on the server. The inspect element Network tab, does not show any activity other than a about:blank entry, which is empty. The console shows the error of Missing OWASP Secure Headers, and it shows the right xxxx.ngrok.io url in the log.
I have made sure the “Home URL” is updated in “App credentials” to match the https url I get from ngrok. Have tried restarting ngrok to get new and updating it in Home URL, Redirect URL, OATH Allow list, Domain allow list. Also made sure ZM_REDIRECT_URL in .env matches the URL. No luck yet.
how does the sample code respond to url/auth queries? Is there any config I need to do in the server side? If I were to write my own server instead of sample, what calls do I need to respond to and what headers to include/check? Is there a document that I could refer to for that?
ok. Thanks for the tips. So I skipped ngrok and am running the sample app directly on a server, and I am able to get “Hello Zoom” so looks like one hurdle crossed.
Now I added a link to an existing page that we host (and added that to allowed domains), and clicking that link now gives the “Missing OWASP Secure Headers” error. I think I have to modify our existing page to return more headers for Zoom, right?
