Fix(MWPW-175129): url.canParse support for legacy browsers. (#4451)

* support for legacy browsers that do not support url.canParse

* added additional check to validate url protocol

* validated url

* reverted formatting changes

* code enhancement

* mock for unit tests

Author: sharath-kannan

libs/blocks/caas-config/caas-config.js

@@ -14,13 +14,13 @@ import {
   getConfig,
   parseEncodedConfig,
   loadStyle,
+  isValidHtmlUrl,
 } from '../../utils/utils.js';
 import Accordion from '../../ui/controls/Accordion.js';
 import {
   decodeCompressedString,
   defaultState,
   initCaas,
-  isValidHtmlUrl,
   isValidUuid,
   loadCaasFiles,
   loadCaasTags,

libs/blocks/caas/utils.js

@@ -189,10 +189,6 @@ export function getPageLocale(currentPath, locales = pageLocales) {
   return '';
 }
 
-export const isValidHtmlUrl = (url) => {
-  const regex = /^https:\/\/[^\s]+$/;
-  return regex.test(url);
-};
 export const isValidUuid = (id) => /^[0-9a-fA-F]{8}-[0-9a-fA-F]{4}-[0-9a-fA-F]{4}-[0-9a-fA-F]{4}-[0-9a-fA-F]{12}$/.test(id);
 
 export const loadStrings = async (

libs/utils/utils.js

@@ -785,13 +785,18 @@ export function decorateSVG(a) {
   }
 }
 
+export const isValidHtmlUrl = (url) => {
+  const regex = /^https:\/\/[^\s]+$/;
+  return regex.test(url);
+};
+
 export function decorateImageLinks(el) {
   const images = el.querySelectorAll('img[alt*="|"]');
   if (!images.length) return;
   [...images].forEach((img) => {
     const [source, alt, icon] = img.alt.split('|');
     try {
-      if (!URL.canParse(source.trim())) return;
+      if (!isValidHtmlUrl(source.trim())) return;
       const url = new URL(source.trim());
       const href = (url.hostname.includes('.aem.') || url.hostname.includes('.hlx.')) ? `${url.pathname}${url.search}${url.hash}` : url.href;
       img.alt = alt?.trim() || '';

test/blocks/caas/mocks/utils.js

@@ -20,6 +20,11 @@ export function getMetadata(name, doc = document) {
   return meta && meta.content;
 }
 
+export const isValidHtmlUrl = (url) => {
+  const regex = /^https:\/\/[^\s]+$/;
+  return regex.test(url);
+};
+
 export function createIntersectionObserver({ el, callback /* , once = true, options = {} */ }) {
   // fire immediately
   callback(el, { target: el });