adobe · tripodsan · Jul 31, 2024 · Jul 30, 2024 · Jul 30, 2024
diff --git a/src/steps/render.js b/src/steps/render.js
@@ -14,6 +14,7 @@
 import { h } from 'hastscript';
 import { unified } from 'unified';
 import rehypeParse from 'rehype-parse';
+import { cleanupHeaderValue } from '@adobe/helix-shared-utils';
 
 function appendElement($parent, $el) {
   if ($el) {
@@ -34,6 +35,13 @@ function createElement(name, ...attrs) {
   return h(name, properties);
 }
 
+function sanitizeJsonLd(jsonLd) {
+  if (jsonLd.toLowerCase().indexOf('</script>') >= 0) {
+    throw new Error('script tag not allowed');
+  }
+  return JSON.stringify(JSON.parse(jsonLd.trim()));
+}
+
 /**
  * @type PipelineStep
  * @param {PipelineState} state
@@ -59,7 +67,13 @@ export default async function render(state, req, res) {
     appendElement($head, createElement('link', 'rel', 'canonical', 'href', meta.canonical));
   }
 
+  let jsonLd;
   for (const [name, value] of Object.entries(meta.page)) {
+    if (name.toLowerCase() === 'json-ld') {
+      jsonLd = value;
+      // eslint-disable-next-line no-continue
+      continue;
+    }
     const attr = name.includes(':') && !name.startsWith('twitter:') ? 'property' : 'name';
     if (Array.isArray(value)) {
       for (const v of value) {
@@ -71,6 +85,19 @@ export default async function render(state, req, res) {
   }
   appendElement($head, createElement('link', 'rel', 'alternate', 'type', 'application/xml+atom', 'href', meta.feed, 'title', `${meta.title} feed`));
 
+  // inject json ld if valid
+  if (jsonLd) {
+    const props = { type: 'application/ld+json' };
+    try {
+      jsonLd = sanitizeJsonLd(jsonLd);
+    } catch (e) {
+      jsonLd = '';
+      props['data-error'] = `error in json-ld: ${cleanupHeaderValue(e.message)}`;
+    }
+    const script = h('script', props, jsonLd);
+    $head.children.push(script);
+  }
+
   // inject head.html
   const headHtml = state.helixConfig?.head?.data.html;
   if (headHtml) {

diff --git a/test/fixtures/content/config-all-ld.json b/test/fixtures/content/config-all-ld.json
@@ -0,0 +1,14 @@
+{
+  "version": 1,
+  "metadata": {
+    "data": {
+      "/**": [
+        {
+          "key": "json-ld",
+          "value": "{\"@context\":\"http://schema.org\",\"@type\":\"Product\",\"sku\":\"AA-BB-GLOBAL\"}"
+        }
+      ]
+    },
+    "lastModified": "Thu, 01 Jan 1970 00:00:01 GMT"
+  }
+}
diff --git a/test/fixtures/content/page-metadata-jsonld-error.html b/test/fixtures/content/page-metadata-jsonld-error.html
@@ -0,0 +1,16 @@
+<head>
+    <title>Home | Helix Project Boilerplate</title>
+    <link rel="canonical" href="https://helix-pages.com/page-metadata-jsonld-error">
+    <meta property="og:title" content="Home | Helix Project Boilerplate">
+    <meta property="og:url" content="https://helix-pages.com/page-metadata-jsonld-error">
+    <meta property="og:image" content="https://helix-pages.com/default-meta-image.png?width=1200&#x26;format=pjpg&#x26;optimize=medium">
+    <meta property="og:image:secure_url" content="https://helix-pages.com/default-meta-image.png?width=1200&#x26;format=pjpg&#x26;optimize=medium">
+    <meta name="twitter:card" content="summary_large_image">
+    <meta name="twitter:title" content="Home | Helix Project Boilerplate">
+    <meta name="twitter:image" content="https://helix-pages.com/default-meta-image.png?width=1200&#x26;format=pjpg&#x26;optimize=medium">
+    <script type="application/ld+json" data-error="error in json-ld: Unexpected non-whitespace character after JSON at position 10"></script>
+    <link id="favicon" rel="icon" type="image/svg+xml" href="/icons/spark.svg">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <script src="/scripts.js" type="module"></script>
+    <link rel="stylesheet" href="/styles.css">
+</head>
diff --git a/test/fixtures/content/page-metadata-jsonld-error.md b/test/fixtures/content/page-metadata-jsonld-error.md
@@ -0,0 +1,11 @@
+# JSON LD Test
+
+This is great.  
+
++----------------------------------------------------+
+| Metadata                                           |
++================+===================================+
+| title          | Home \| Helix Project Boilerplate |
++----------------+-----------------------------------|
+| Json-Ld        | "@context":"http://schema.org"    |
++----------------+-----------------------------------+
diff --git a/test/fixtures/content/page-metadata-jsonld-global.html b/test/fixtures/content/page-metadata-jsonld-global.html
@@ -0,0 +1,16 @@
+<head>
+    <title>Global JSON LD Test</title>
+    <link rel="canonical" href="https://helix-pages.com/page-metadata-jsonld-global">
+    <meta property="og:title" content="Global JSON LD Test">
+    <meta property="og:url" content="https://helix-pages.com/page-metadata-jsonld-global">
+    <meta property="og:image" content="https://helix-pages.com/default-meta-image.png?width=1200&#x26;format=pjpg&#x26;optimize=medium">
+    <meta property="og:image:secure_url" content="https://helix-pages.com/default-meta-image.png?width=1200&#x26;format=pjpg&#x26;optimize=medium">
+    <meta name="twitter:card" content="summary_large_image">
+    <meta name="twitter:title" content="Global JSON LD Test">
+    <meta name="twitter:image" content="https://helix-pages.com/default-meta-image.png?width=1200&#x26;format=pjpg&#x26;optimize=medium">
+    <script type="application/ld+json">{"@context":"http://schema.org","@type":"Product","sku":"AA-BB-GLOBAL"}</script>
+    <link id="favicon" rel="icon" type="image/svg+xml" href="/icons/spark.svg">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <script src="/scripts.js" type="module"></script>
+    <link rel="stylesheet" href="/styles.css">
+</head>
diff --git a/test/fixtures/content/page-metadata-jsonld-global.md b/test/fixtures/content/page-metadata-jsonld-global.md
@@ -0,0 +1,3 @@
+# Global JSON LD Test
+
+This is great.  
diff --git a/test/fixtures/content/page-metadata-jsonld-multi.html b/test/fixtures/content/page-metadata-jsonld-multi.html
@@ -0,0 +1,16 @@
+<head>
+    <title>Home | Helix Project Boilerplate</title>
+    <link rel="canonical" href="https://helix-pages.com/page-metadata-jsonld-multi">
+    <meta property="og:title" content="Home | Helix Project Boilerplate">
+    <meta property="og:url" content="https://helix-pages.com/page-metadata-jsonld-multi">
+    <meta property="og:image" content="https://helix-pages.com/default-meta-image.png?width=1200&#x26;format=pjpg&#x26;optimize=medium">
+    <meta property="og:image:secure_url" content="https://helix-pages.com/default-meta-image.png?width=1200&#x26;format=pjpg&#x26;optimize=medium">
+    <meta name="twitter:card" content="summary_large_image">
+    <meta name="twitter:title" content="Home | Helix Project Boilerplate">
+    <meta name="twitter:image" content="https://helix-pages.com/default-meta-image.png?width=1200&#x26;format=pjpg&#x26;optimize=medium">
+    <script type="application/ld+json">{"@context":"http://schema.org","@type":"Product","sku":"FOO-BAR-12345"}</script>
+    <link id="favicon" rel="icon" type="image/svg+xml" href="/icons/spark.svg">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <script src="/scripts.js" type="module"></script>
+    <link rel="stylesheet" href="/styles.css">
+</head>
diff --git a/test/fixtures/content/page-metadata-jsonld-multi.md b/test/fixtures/content/page-metadata-jsonld-multi.md
@@ -0,0 +1,13 @@
+# JSON LD Test
+
+This is great.  
+
++-------------------------------------------------------------------------------------------+
+| Metadata                                                                                  |
++================+==========================================================================+
+| title          | Home \| Helix Project Boilerplate                                        |
++----------------+--------------------------------------------------------------------------|
+| json-ld        | {"@context":"http://schema.org","@type":"Product","sku":"BPB-CMON-TABS"} |
++----------------+--------------------------------------------------------------------------|
+| json-ld        | {"@context":"http://schema.org","@type":"Product","sku":"FOO-BAR-12345"} |
++----------------+--------------------------------------------------------------------------+
diff --git a/test/fixtures/content/page-metadata-jsonld-xss.html b/test/fixtures/content/page-metadata-jsonld-xss.html
@@ -0,0 +1,16 @@
+<head>
+    <title>Home | Helix Project Boilerplate</title>
+    <link rel="canonical" href="https://helix-pages.com/page-metadata-jsonld-xss">
+    <meta property="og:title" content="Home | Helix Project Boilerplate">
+    <meta property="og:url" content="https://helix-pages.com/page-metadata-jsonld-xss">
+    <meta property="og:image" content="https://helix-pages.com/default-meta-image.png?width=1200&#x26;format=pjpg&#x26;optimize=medium">
+    <meta property="og:image:secure_url" content="https://helix-pages.com/default-meta-image.png?width=1200&#x26;format=pjpg&#x26;optimize=medium">
+    <meta name="twitter:card" content="summary_large_image">
+    <meta name="twitter:title" content="Home | Helix Project Boilerplate">
+    <meta name="twitter:image" content="https://helix-pages.com/default-meta-image.png?width=1200&#x26;format=pjpg&#x26;optimize=medium">
+    <script type="application/ld+json" data-error="error in json-ld: script tag not allowed"></script>
+    <link id="favicon" rel="icon" type="image/svg+xml" href="/icons/spark.svg">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <script src="/scripts.js" type="module"></script>
+    <link rel="stylesheet" href="/styles.css">
+</head>
diff --git a/test/fixtures/content/page-metadata-jsonld-xss.md b/test/fixtures/content/page-metadata-jsonld-xss.md
@@ -0,0 +1,11 @@
+# JSON LD Test
+
+This is great.  
+
++-------------------------------------------------------------------------+
+| Metadata                                                                |
++================+========================================================+
+| title          | Home \| Helix Project Boilerplate                      |
++----------------+--------------------------------------------------------|
+| Json-Ld        | { "foo:": "\</script><script>alert('hello, world.')" } |
++----------------+--------------------------------------------------------+
diff --git a/test/fixtures/content/page-metadata-jsonld.html b/test/fixtures/content/page-metadata-jsonld.html
@@ -0,0 +1,16 @@
+<head>
+    <title>Home | Helix Project Boilerplate</title>
+    <link rel="canonical" href="https://helix-pages.com/page-metadata-jsonld">
+    <meta property="og:title" content="Home | Helix Project Boilerplate">
+    <meta property="og:url" content="https://helix-pages.com/page-metadata-jsonld">
+    <meta property="og:image" content="https://helix-pages.com/default-meta-image.png?width=1200&#x26;format=pjpg&#x26;optimize=medium">
+    <meta property="og:image:secure_url" content="https://helix-pages.com/default-meta-image.png?width=1200&#x26;format=pjpg&#x26;optimize=medium">
+    <meta name="twitter:card" content="summary_large_image">
+    <meta name="twitter:title" content="Home | Helix Project Boilerplate">
+    <meta name="twitter:image" content="https://helix-pages.com/default-meta-image.png?width=1200&#x26;format=pjpg&#x26;optimize=medium">
+    <script type="application/ld+json">{"@context":"http://schema.org","@type":"Product","sku":"BPB-CMON-TABS"}</script>
+    <link id="favicon" rel="icon" type="image/svg+xml" href="/icons/spark.svg">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <script src="/scripts.js" type="module"></script>
+    <link rel="stylesheet" href="/styles.css">
+</head>
diff --git a/test/fixtures/content/page-metadata-jsonld.md b/test/fixtures/content/page-metadata-jsonld.md
@@ -0,0 +1,11 @@
+# JSON LD Test
+
+This is great.  
+
++-------------------------------------------------------------------------------------------+
+| Metadata                                                                                  |
++================+==========================================================================+
+| title          | Home \| Helix Project Boilerplate                                        |
++----------------+--------------------------------------------------------------------------|
+| json-ld        | {"@context":"http://schema.org","@type":"Product","sku":"BPB-CMON-TABS"} |
++----------------+--------------------------------------------------------------------------+
diff --git a/test/rendering.test.js b/test/rendering.test.js
@@ -70,6 +70,7 @@
     }
     const response = await render(url, '', expStatus);
     const actHtml = response.body;
+    console.log(actHtml);
     if (expStatus === 200) {
       const $actMain = new JSDOM(actHtml).window.document.querySelector(domSelector);
       const $expMain = new JSDOM(expHtml).window.document.querySelector(domSelector);
@@ -284,6 +285,31 @@
       loader.status('config-all.json', 404);
       await testRender('page-metadata-twitter-fallback', 'head');
     });
+
+    it('injects json ld', async () => {
+      loader.status('config-all.json', 404);
+      await testRender('page-metadata-jsonld', 'head');
+    });
+
+    it('chooses last json-ld if multiple', async () => {
+      loader.rewrite('config-all.json', 'config-all-ld.json');
+      await testRender('page-metadata-jsonld-multi', 'head');
+    });
+
+    it('injects global json ld', async () => {
+      loader.rewrite('config-all.json', 'config-all-ld.json');
+      await testRender('page-metadata-jsonld-global', 'head');
+    });
+
+    it('detects errors in json ld', async () => {
+      loader.status('config-all.json', 404);
+      await testRender('page-metadata-jsonld-error', 'head');
+    });
+
+    it('prevents xss in json ld', async () => {
+      loader.status('config-all.json', 404);
+      await testRender('page-metadata-jsonld-xss', 'head');
+    });
   });
 
   describe('Miscellaneous', () => {