CORS error when using ZAF client to request attachment in Support App | Community
Skip to main content

CORS error when using ZAF client to request attachment in Support App

  • August 16, 2022
  • 4 replies
  • 0 views
Nate14

I'm developing an iCalendar / calendar invite Zendesk Apps Framework app, and running into issues grabbing calendar invite attachments in Zendesk support tickets.

I'm trying to request attachments using the ZAF client. As per the docs here, it says CORS can be added to the ZAFClient.request() method by specifying cors: true or cors:false in the headers, as per:

https://developer.zendesk.com/documentation/apps/app-developer-guide/using-the-apps-framework/?_ga=2.153055162.28409147.1660621106-522680107.1510797422#making-cors-requests

However, that doesn't make much sense as it's the response that should have the CORS information for the browser, not the request.

It doesn't look like the attachments endpoint actually has the content for the attachment. The actual attachment is a Redirect from <subdomain>.zendesk.com/attachments/token/<tokenID> to a asset store at https://p20.zdusercontent.com/attachment/. This is thus technically a cross-site request.

 

There appears to be only a single other thread about this, here: https://support.zendesk.com/hc/en-us/community/posts/4408861005722-CORS-error-when-fetch-internal-attachment-using-attachment-contentUrl and it just has a generic link back to the CORS information page.

As per the helpdesk article here: https://support.zendesk.com/hc/en-us/articles/4408881672730 it says the ZAF Client .request() method should actually be used in order to avoid CORS issues, since it acts as a proxy (thus avoiding the browser's CORS checking). It says it does not support binary files, though I am trying to pull text attachments, though that may not matter to it.

 

    4 replies

    Guided
    • Guided
    • August 16, 2022

    Hey Nate,

    It's most likely the last thing you mention; client.request doesn't support binary files, although I wasn't able to upload any files through it. I have tried a lot of different workarounds.

    https://developer.zendesk.com/documentation/apps/app-developer-guide/using-the-apps-framework/#working-with-requests 

    The suggested workaround listed in the link above (using native AJAX calls) was not viable to me, because of authorization/security issues, but maybe it is for you.

    I hope this restriction will be lifted from client.request one day. Would open a lot of new possibilities for third party apps.

    Nate14
    • Nate14
    • Author
    • August 16, 2022

    Hi Sebastian,

    According to the ZAF2 client.request() documention, it seems that setting cors: true in the settings should make the request come from the browser, not the proxy service (which doesn't support binary files) and include the authorization header. I am actually requesting a text file attachment in these cases (application/ics or text/calendar .ics files). However, that seems to just be broken, though, when cors: true is set it is not including the Authorization Header for requests to those URLs, because they are actually redirected URLs. I would suspect this is due to some whitelisting, as the documentation for client.request() states "Requests to Zendesk APIs are always made from the browser, regardless of this option." But the URL I am requesting is a request to a Zendesk.com domain, but that is being redirected to the actual URL, which is causing the CORS issue. Thus, a missing Authorization Header here seems like more of a bug/oversight of the request() method.

    The issue is definitely that the Authorization Header is not being sent, and is required when fetching attachments, as per: https://support.zendesk.com/hc/en-us/community/posts/4411831431450-Download-the-Zendesk-ticket-attachment-via-API

     

    So the ZAF2 framework handles the Authorization Header token for me, so I should be able to retrieve it somehow, in order to inject into the headers of a native AJAX call?

    If this isn't possible, where do I request this feature? Seems like this should be an easy method to add to the ZAFClient. client.getAuthorizationHeader().

    I did find a post with this exact issue, and it is simply that the Authorization Header needs to be supplied, but I don't see how to pull that within a ZAF2 app.

    I could setup my own OAUTH2, but that seems silly when the ZAF2 client already has all that. Doing it with a custom OAUTH2 setup would require me to have a separate server to authenticate the OAUTH2 client to, which kind of defeats the purpose of using a ZAF2 app.

    As per https://developer.zendesk.com/documentation/ticketing/using-the-zendesk-api/making-cross-origin-browser-side-api-requests/ the ZAF client should be used when you need to transparently handle the OAUTH2 authorization token, but it doesn't support fetching binary files. So I need a method to retrieve the Authorization Header token from the ZAF client somehow, and I don't see how I can do that. 

    Here's the post speaking about doing this, but the "use OAUTH" solution would only work when the request comes from outside Zendesk ZAF2: https://support.zendesk.com/hc/en-us/community/posts/4411831431450-Download-the-Zendesk-ticket-attachment-via-API

    Guided
    • Guided
    • August 18, 2022

    Seems like you are asking the same questions I did, and that you are looking for the same workarounds. I also explored the OAuth path, but didn't get it to work with just the (client side) ZAF app. Currently I'm just waiting for things to change (I guess ZIS might open up new possibilities).

    I hope I'm wrong, but to my knowledge it's not possible to upload files to Zendesk with a ZAF app (without any external service or security issues), same applies to downloading secure attachments.

    T
    • Tuomas
    • November 17, 2022

    Well, this is a damn shame. No wonder I didn't get this to work. Utterly disappointing.

    Terms & ConditionsCookie settingsAccessibility statement