fix: dangerously set inner HTML

Author: vitoUwu

linx/loaders/product/listingPage.ts

@@ -1,4 +1,5 @@
 import type { ProductListingPage } from "../../../commerce/types.ts";
+import { safeJsonSerialize } from "../../../website/utils/html.ts";
 import { AppContext } from "../../mod.ts";
 import { isGridProductsModel } from "../../utils/paths.ts";
 import {
@@ -107,11 +108,11 @@ const loader = async (
       value: sort.Alias,
       label: sort.Label,
     })),
-    seo: {
+    seo: safeJsonSerialize({
       title: pageInfo.PageTitle,
       description: pageInfo.MetaDescription || "",
       canonical: pageInfo.CanonicalLink,
-    },
+    }),
   };
 };
 

shopify/loaders/ProductListingPage.ts

@@ -1,5 +1,6 @@
 import type { ProductListingPage } from "../../commerce/types.ts";
 import { AppContext } from "../../shopify/mod.ts";
+import { safeJsonSerialize } from "../../website/utils/html.ts";
 import {
   ProductsByCollection,
   SearchProducts,
@@ -219,13 +220,13 @@ const loader = async (
       recordPerPage: count,
     },
     sortOptions: isSearch ? searchSortOptions : sortOptions,
-    seo: {
+    seo: safeJsonSerialize({
       title: collectionTitle || "",
       description: collectionDescription || "",
       canonical: `${url.origin}${url.pathname}${
         page >= 1 ? `?page=${page}` : ""
       }`,
-    },
+    }),
   };
 };
 

vnda/loaders/productListingPage.ts

@@ -5,6 +5,7 @@ import type {
 import { SortOption } from "../../commerce/types.ts";
 import { STALE } from "../../utils/fetch.ts";
 import type { RequestURLParam } from "../../website/functions/requestToParam.ts";
+import { safeJsonSerialize } from "../../website/utils/html.ts";
 import type { AppContext } from "../mod.ts";
 import { ProductSearchResult, Sort } from "../utils/client/types.ts";
 import { Tag } from "../utils/openapi/vnda.openapi.gen.ts";
@@ -241,7 +242,9 @@ const searchLoader = async (
 
   return {
     "@type": "ProductListingPage",
-    seo: getSEOFromTag(categories, url, seo.at(-1), hasTypeTags, isSearchPage),
+    seo: safeJsonSerialize(
+      getSEOFromTag(categories, url, seo.at(-1), hasTypeTags, isSearchPage),
+    ),
     breadcrumb: isSearchPage
       ? {
         "@type": "BreadcrumbList",

vtex/loaders/intelligentSearch/productListingPage.ts

@@ -2,6 +2,7 @@ import { redirect } from "@deco/deco";
 import type { ProductListingPage } from "../../../commerce/types.ts";
 import { parseRange } from "../../../commerce/utils/filters.ts";
 import { STALE } from "../../../utils/fetch.ts";
+import { safeJsonSerialize } from "../../../website/utils/html.ts";
 import sendEvent from "../../actions/analytics/sendEvent.ts";
 import { AppContext } from "../../mod.ts";
 import {
@@ -445,11 +446,11 @@ const loader = async (
       pageTypes: allPageTypes.map(parsePageType),
     },
     sortOptions,
-    seo: pageTypesToSeo(
+    seo: safeJsonSerialize(pageTypesToSeo(
       currentPageTypes,
       baseUrl,
       hasPreviousPage ? currentPage : undefined,
-    ),
+    )),
   };
 };
 export const cache = "stale-while-revalidate";

vtex/loaders/legacy/productListingPage.ts

@@ -15,6 +15,7 @@ import { getSegmentFromBag, withSegmentCookie } from "../../utils/segment.ts";
 import { withIsSimilarTo } from "../../utils/similars.ts";
 import { parsePageType } from "../../utils/transform.ts";
 import { legacyFacetToFilter, toProduct } from "../../utils/transform.ts";
+import { safeJsonSerialize } from "../../../website/utils/html.ts";
 import type {
   AdvancedLoaderConfig,
   Item,
@@ -431,11 +432,11 @@ const loader = async (
       pageTypes: allPageTypes.map(parsePageType),
     },
     sortOptions,
-    seo: pageTypesToSeo(
+    seo: safeJsonSerialize(pageTypesToSeo(
       currentPageTypes,
       baseUrl,
       hasPreviousPage ? currentPage : undefined,
-    ),
+    )),
   };
 };
 

wake/loaders/productListingPage.ts

@@ -1,7 +1,9 @@
+import { logger } from "@deco/deco/o11y";
 import type { ProductListingPage } from "../../commerce/types.ts";
 import { SortOption } from "../../commerce/types.ts";
 import { capitalize } from "../../utils/capitalize.ts";
 import { RequestURLParam } from "../../website/functions/requestToParam.ts";
+import { safeJsonSerialize } from "../../website/utils/html.ts";
 import type { AppContext } from "../mod.ts";
 import {
   getVariations,
@@ -35,7 +37,6 @@ import {
   toProduct,
 } from "../utils/transform.ts";
 import { Filters } from "./productList.ts";
-import { logger } from "@deco/deco/o11y";
 
 export type Sort =
   | "NAME:ASC"
@@ -320,11 +321,11 @@ const searchLoader = async (
     },
     sortOptions: SORT_OPTIONS,
     breadcrumb,
-    seo: {
+    seo: safeJsonSerialize({
       description: description || "",
       title: title || "",
       canonical,
-    },
+    }),
     products: products
       ?.filter((p): p is ProductFragment => Boolean(p))
       .map((variant) => {

wap/loaders/productListingPage.ts

@@ -1,4 +1,6 @@
 import { ProductListingPage } from "../../commerce/types.ts";
+import { TypedResponse } from "../../utils/http.ts";
+import { safeJsonSerialize } from "../../website/utils/html.ts";
 import { AppContext } from "../mod.ts";
 import {
   getUrl,
@@ -7,7 +9,6 @@ import {
   toProduct,
 } from "../utils/transform.ts";
 import { WapProductsListPage } from "../utils/type.ts";
-import { TypedResponse } from "../../utils/http.ts";
 
 type ORDER_OPTS = "Favoritos" | "Maior Preço" | "Menor Preço" | "Popularidade";
 
@@ -171,13 +172,13 @@ const loader = async (
       records: data.info.total,
       recordPerPage: limit,
     },
-    seo: {
+    seo: safeJsonSerialize({
       title: data.estrutura.seo.title,
       description: data.estrutura.seo.description,
       // TODO canonical
       canonical:
         getUrl(new URL(data.estrutura.seo.canonical).pathname, url.origin).href,
-    },
+    }),
   };
 };
 

website/components/Seo.tsx

@@ -1,7 +1,7 @@
 import { Head } from "$fresh/runtime.ts";
-import type { ImageWidget } from "../../admin/widgets.ts";
-import { stripHTML } from "../utils/html.ts";
 import { JSX } from "preact";
+import type { ImageWidget } from "../../admin/widgets.ts";
+import { safeJsonSerialize, stripHTML } from "../utils/html.ts";
 
 export const renderTemplateString = (template: string, value: string) =>
   template.replace("%s", value);
@@ -97,11 +97,11 @@ function Component({
         <script
           type="application/ld+json"
           dangerouslySetInnerHTML={{
-            __html: JSON.stringify({
+            __html: safeJsonSerialize({
               "@context": "https://schema.org",
               // @ts-expect-error Trust me, I'm an engineer
               ...json,
-            }),
+            }, { returnAsString: true }),
           }}
         />
       ))}

website/utils/html.ts

@@ -3,3 +3,25 @@ export const stripHTML = (str: string) =>
     /(<([^>]+)>)/gi,
     "",
   );
+
+export function safeJsonSerialize(
+  // deno-lint-ignore no-explicit-any
+  obj: any,
+  options?: { returnAsString?: boolean },
+) {
+  if (!obj) {
+    return options?.returnAsString ? "{}" : {};
+  }
+
+  if (typeof obj !== "object") {
+    return options?.returnAsString ? String(obj) : obj;
+  }
+
+  const json = stripHTML(JSON.stringify(obj));
+
+  if (options?.returnAsString) {
+    return json;
+  }
+
+  return JSON.parse(json);
+}