fix(pages-components): don't use URL.canParse

packages/pages-components/src/components/image/fileUrl.ts

@@ -1,4 +1,4 @@
-import { Env, Partition } from "./url.js";
+import { Env, isValidHttpUrl, Partition } from "./url.js";
 
 // FileURL is a URL for a file stored in the Yext CDN.
 //
@@ -54,7 +54,7 @@ export type FileUrl = {
 };
 
 export const parseFileUrl = (rawUrl: string) => {
-  if (!URL.canParse(rawUrl)) {
+  if (!isValidHttpUrl(rawUrl)) {
     console.error(`Invalid image url: ${rawUrl}.`);
     return;
   }

packages/pages-components/src/components/image/image.tsx

@@ -1,7 +1,7 @@
 import * as React from "react";
 import { useEffect, useRef, useState } from "react";
 import { ImageProps, ImageLayout, ImageLayoutOption } from "./types.js";
-import { getImageUrl } from "./url.js";
+import { getImageUrl, isValidHttpUrl } from "./url.js";
 
 /**
  * Renders an image based from the Yext Knowledge Graph. Example of using the component to render
@@ -57,7 +57,7 @@ export const Image = ({
   }
 
   // The image is invalid, only try to load the placeholder
-  if (!URL.canParse(imageData.url)) {
+  if (!isValidHttpUrl(imageData.url)) {
     console.error(`Invalid image url: ${imageData.url}`);
     return <>{placeholder != null && placeholder}</>;
   }

packages/pages-components/src/components/image/photoUrl.ts

@@ -1,4 +1,4 @@
-import { Env } from "./url.js";
+import { Env, isValidHttpUrl } from "./url.js";
 
 // PhotoURL is a URL for an image stored in the legacy Yext CDN, generated by the old PhotoServer.
 //
@@ -62,7 +62,7 @@ export type PhotoUrl = {
 };
 
 export const parsePhotoUrl = (rawUrl: string) => {
-  if (!URL.canParse(rawUrl)) {
+  if (!isValidHttpUrl(rawUrl)) {
     console.error(`Invalid image url: ${rawUrl}.`);
     return;
   }

packages/pages-components/src/components/image/url.ts

@@ -9,7 +9,7 @@ export type Partition = "us" | "eu";
  * If the raw url cannot be parsed, it's simply returned as-is and used as a passthrough.
  */
 export const getImageUrl = (rawUrl: string, width: number, height: number) => {
-  if (!URL.canParse(rawUrl)) {
+  if (!isValidHttpUrl(rawUrl)) {
     console.error(`Invalid image url: ${rawUrl}.`);
     return;
   }
@@ -29,3 +29,15 @@ export const getImageUrl = (rawUrl: string, width: number, height: number) => {
 
   return rawUrl;
 };
+
+export const isValidHttpUrl = (rawUrl: string) => {
+  let url;
+
+  try {
+    url = new URL(rawUrl);
+  } catch (_) {
+    return false;
+  }
+
+  return url.protocol === "http:" || url.protocol === "https:";
+};