Skip to content

feat: include json-ld #653

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 3 commits into from
Jul 30, 2024
Merged

feat: include json-ld #653

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
f5a57b2
feat: include json-ld
tripodsan Jul 29, 2024
47993f4
chore: better validation
tripodsan Jul 29, 2024
273953b
chore: more tests
tripodsan Jul 30, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
27 changes: 27 additions & 0 deletions src/steps/render.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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) {
Expand All @@ -34,6 +35,13 @@ function createElement(name, ...attrs) {
return h(name, properties);
}

function sanitizeJsonLd(jsonLd) {
if (jsonLd.toLowerCase().indexOf('</script>') >= 0) {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

JSON.parse() would throw anyway if string contained tags

Copy link
Contributor Author

@tripodsan tripodsan Jul 30, 2024 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

no, it could also be quoted:

<html>
<head>
	<script type="application/ld+json">
	{ "$foo": "</script><script type='application/javascript'>alert('hello')</script>" }
	</script>	
</head>
<body>
	test
</body>
</html>

throw new Error('script tag not allowed');
}
return JSON.stringify(JSON.parse(jsonLd.trim()));
}

/**
* @type PipelineStep
* @param {PipelineState} state
Expand All @@ -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) {
Expand All @@ -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.config?.head?.html;
if (headHtml) {
Expand Down
16 changes: 16 additions & 0 deletions test/fixtures/content/page-metadata-jsonld-error.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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>
11 changes: 11 additions & 0 deletions test/fixtures/content/page-metadata-jsonld-error.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@
# JSON LD Test

This is great.

+----------------------------------------------------+
| Metadata |
+================+===================================+
| title | Home \| Helix Project Boilerplate |
+----------------+-----------------------------------|
| Json-Ld | "@context":"http://schema.org" |
+----------------+-----------------------------------+
16 changes: 16 additions & 0 deletions test/fixtures/content/page-metadata-jsonld-xss.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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>
11 changes: 11 additions & 0 deletions test/fixtures/content/page-metadata-jsonld-xss.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@
# JSON LD Test

This is great.

+-------------------------------------------------------------------------+
| Metadata |
+================+========================================================+
| title | Home \| Helix Project Boilerplate |
+----------------+--------------------------------------------------------|
| Json-Ld | { "foo:": "\</script><script>alert('hello, world.')" } |
+----------------+--------------------------------------------------------+
16 changes: 16 additions & 0 deletions test/fixtures/content/page-metadata-jsonld.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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>
11 changes: 11 additions & 0 deletions test/fixtures/content/page-metadata-jsonld.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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"} |
+----------------+--------------------------------------------------------------------------+
16 changes: 16 additions & 0 deletions test/rendering.test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -193,6 +193,7 @@
}
const response = await render(url, '', expStatus);
const actHtml = response.body;
console.log(actHtml);

Check warning on line 196 in test/rendering.test.js

View workflow job for this annotation

GitHub Actions / Test 

Unexpected console statement
if (expStatus === 200) {
const $actMain = new JSDOM(actHtml).window.document.querySelector(domSelector);
const $expMain = new JSDOM(expHtml).window.document.querySelector(domSelector);
Expand Down Expand Up @@ -407,6 +408,21 @@
config = DEFAULT_CONFIG_EMPTY;
await testRender('page-metadata-twitter-fallback', 'head');
});

it('injects json ld', async () => {
config = DEFAULT_CONFIG_EMPTY;
await testRender('page-metadata-jsonld', 'head');
});

it('detects errors in json ld', async () => {
config = DEFAULT_CONFIG_EMPTY;
await testRender('page-metadata-jsonld-error', 'head');
});

it('prevents xss in json ld', async () => {
config = DEFAULT_CONFIG_EMPTY;
await testRender('page-metadata-jsonld-xss', 'head');
});
});

describe('Miscellaneous', () => {
Expand Down