Support loading CORS fonts through our proxy (#59)

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@highlight-run/rrweb",
-  "version": "1.1.5",
+  "version": "1.1.6",
   "description": "record and replay the web",
   "scripts": {
     "test": "npm run bundle:browser && cross-env TS_NODE_CACHE=false TS_NODE_FILES=true mocha -r ts-node/register -r ignore-styles -r jsdom-global/register test/**.test.ts",

src/snapshot/rebuild.ts

@@ -165,7 +165,50 @@ function buildNode(
             tagName === 'style' && name === '_cssText';
           if (isRemoteOrDynamicCss && hackCss) {
             value = addHoverClass(value, cache);
+
+            /** Start of Highlight */
+            /**
+             * Find all remote fonts in the style tag.
+             * We need to find and replace the URLs with a proxy URL so we can bypass CORS.
+             */
+            if (typeof value === 'string') {
+              const regex = /url\(\"https:\/\/\S*(.eot|.woff2|.ttf|.woff)\S*\"\)/gm;
+              let m;
+              const fontUrls: { originalUrl: string; proxyUrl: string }[] = [];
+
+              const PROXY_URL = 'https://replay-cors-proxy.highlightrun.workers.dev' as const;
+              while ((m = regex.exec(value)) !== null) {
+                // This is necessary to avoid infinite loops with zero-width matches
+                if (m.index === regex.lastIndex) {
+                  regex.lastIndex++;
+                }
+
+                // The result can be accessed through the `m`-variable.
+                m.forEach((match, groupIndex) => {
+                  if (groupIndex === 0) {
+                    // Trim the start and end
+                    // example: url("https://app.boardgent.com/fonts/MaterialIcons-Regular.53354891.woff2")
+                    // gets trimmed to https://app.boardgent.com/fonts/MaterialIcons-Regular.53354891.woff2
+                    const url = match.slice(5, match.length - 2);
+
+                    fontUrls.push({
+                      originalUrl: url,
+                      proxyUrl: url.replace(url, `${PROXY_URL}?url=${url}`),
+                    });
+                  }
+                });
+              }
+
+              // Replace all references to the old URL to our proxy URL in the stylesheet.
+              fontUrls.forEach((urlPair) => {
+                value = (value as string).replace(
+                  urlPair.originalUrl,
+                  urlPair.proxyUrl,
+                );
+              });
+            }
           }
+          /** End of Highlight */
           if (isTextarea || isRemoteOrDynamicCss) {
             const child = doc.createTextNode(value);
             // https://github.com/rrweb-io/rrweb/issues/112