Adobe fonts (typekit) not loading in zoom app, getting a 403 error. Works in any browser

Zoom Apps
1

Zoom Apps Configuration

React frontend with node.js backend. Adobe web fonts for font styling

Description

Adobe typekit fonts won’t load in the zoom client app. I get a 403 response on the resource, but don’t get this response when loading the font in any other browser. When I make the exact same request (copy request as in the dev tools) with cURL it’s successful, but when the request is made by the zoom client it fails.

Error?

GET https://use.typekit.net/uuq3xbu.css net::ERR_ABORTED 403 (Blocked)

Troubleshooting Routes
I’ve tried checking if there are any missing headers from the request, but the exact same request made from any other browser (edge, chrome, cURL, fetch) works fine.
I’ve also tried changing the link tag attributes to different combinations

// default provided by adobe
    <link
      rel="stylesheet"
      href="https://use.typekit.net/uuq3xbu.css"
    />


// referrer and role tags
    <link
      rel="stylesheet"
      as="font"
      referrerpolicy="no-referrer"
      href="https://use.typekit.net/uuq3xbu.css"
    />


// crossorigin 
    <link
      rel="stylesheet"
      as="font"
      referrerpolicy="no-referrer"
      crossorigin="anonymous"
      href="https://use.typekit.net/uuq3xbu.css"
    />

adding the crossorigin tag makes the request fail with a new error of

       Access to CSS stylesheet at 'https://use.typekit.net/uuq3xbu.css' from origin 'https://emergence.ngrok.io' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

but this error also does not occur in any other web client

How To Reproduce
add this link tag to a zoom app:

    <link
      rel="stylesheet"
      href="https://use.typekit.net/uuq3xbu.css"
    />

Appreciate if anyone has some guidance to offer on how the stylesheet will be loaded differently in the zoom client!

1 Like
2

Did you add the Adobe Typekit domain to the OSWAP headers? If it doesn’t have an entry there then the Zoom App will block that request. In particular you want to pay attention to the Content-Security-Policy.

3

Thanks for the reply @shariq.torres . I did add *.typekit.net to the Content-Security-Policy header, but not sure if one of my other headers may be interfering

 reply.headers({
          "Strict-Transport-Security": "max-age=31536000 ; includeSubDomains",
          "X-Content-Type-Options": "nosniff",
          "Content-Security-Policy":
            "default-src 'self' *.typekit.net;  style-src 'self' 'unsafe-inline' *.typekit.net",
          "Referrer-Policy": "origin-when-cross-origin",
   });
4

If you want to include the Typekit CSS you would need to alter the style-src from self to use.typekit.net. The default-src is for Javascript files.

5

style-src includes *.typekit.net (the last item in the list). The wildcard subdomain should still work right?

6

I also just now tried with both the default-src and the style-src set to allow use.typekit.net with no luck


        reply.headers({
          "Strict-Transport-Security": "max-age=31536000 ; includeSubDomains",
          "X-Content-Type-Options": "nosniff",
          "Content-Security-Policy":
              "default-src 'self' use.typekit.net;  style-src 'self' 'unsafe-inline' use.typekit.net",
          "Referrer-Policy": "origin-when-cross-origin",
        });
7

What about using https://use.typekit.net? The docs on the headers say that a host-source has the protocol as well (CSP source values - HTTP | MDN)

8

hmm yeah no luck there either:

3
3894×304 41.3 KB

2
2903×273 27.2 KB

9

Also want to point out that this same request with the same content security headers works in chrome and edge browsers, but fails in the zoom client. If I remove *.typekit.net from the content security policy, then chrome and edge will block the request. With that present chrome and edge will allow the request. Seems to be specific to how zoom’s client handles the request.

10

@nselvidge Are you seeing any errors in the JavaScript console or network tab within the Zoom Client when testing this out? Please share those here if so.

In the meantime, you can try adding the domain to the domain allow list within the Zoom Marketplace Page.

Let me know if that helps.

11

Thanks for reaching out Max.

Wanted to follow up in here because I was able to get this working.

I had tried having use.typekit.net in my zoom marketplace domain whitelist, and I tried typekit.net in my domain whitelist, but I had not tried allowing both. When I added both use.typekit.net and typekit.net (then later added p.typekit.net since it was referenced in the imported css) it began working.

Seems like I needed to list both the TLD and the subdomain separately in the zoom marketplace settings.

2 Likes
12

Thanks for sharing your solution @nselvidge! Out of curiosity, does using a wildcard work too?

Such as: *.typekit.net