Add a new homepage to the dev server #14338

JamieB-gu · 2025-08-04T15:21:36Z

It contains a form to input a dotcom URL. Submitting the form will query frontend for information about that page, and then present a summary of this to the user. Included in that summary are links for opening the dotcom and apps versions of that page locally, in CODE, and on PROD.

This supports only a single article URL for now, and the summary provides information on the article format, its main media, and the body elements it contains. Support for more kinds of pages (fronts for example), and viewing information about multiple pages at once, will come in a future update.

As the new page does not yet have feature parity with the old homepage, it does not replace it for now, and is instead available on /home.

Part of #13737.

Screenshots

It contains a form to input a dotcom URL. Submitting the form will query frontend for information about that page, and then present a summary of this to the user. Included in that summary are links for opening the dotcom and apps versions of that page locally, in CODE, and on PROD. This supports only a single article URL for now, and the summary provides information on the article format, its main media, and the body elements it contains. Support for more kinds of pages (fronts for example), and viewing information about multiple pages at once, will come in a future update. As the new page does not yet have feature parity with the old homepage, it does not replace it for now, and is instead available on `/home`.

github-actions · 2025-08-04T15:21:48Z

Hello 👋! When you're ready to run Chromatic, please apply the run_chromatic label to this PR.

You will need to reapply the label each time you want to run Chromatic.

Click here to see the Chromatic project.

Copilot

Pull Request Overview

This PR adds a new homepage to the dev server that allows developers to analyze Guardian articles by inputting a dotcom URL. The form queries the frontend for article information and displays a comprehensive summary including article format, main media, body elements, and convenient links to view the page across different environments (DEV, CODE, PROD) and platforms (Apps, Web).

Adds a new /home route with a URL input form for article analysis
Creates article information display component with format, media, and body element summaries
Implements environment-specific links for easy navigation between DEV, CODE, and PROD stages

Reviewed Changes

Copilot reviewed 3 out of 3 changed files in this pull request and generated 2 comments.

File	Description
dotcom-rendering/src/server/server.dev.ts	Adds the new home router to the dev server routing configuration
dotcom-rendering/src/devServer/routers/home.tsx	Implements the backend logic for URL parsing, article fetching, and request handling
dotcom-rendering/src/devServer/docs/home.tsx	Creates the React components for the homepage UI including form, article display, and environment links

Copilot · 2025-08-04T15:22:31Z

dotcom-rendering/src/devServer/routers/home.tsx

+	url.pathname = `${url.pathname}.json`;
+	url.searchParams.append('dcr', 'true');
+
+	const json = await fetch(url).then((res) => res.json());


The fetch request lacks error handling. If the request fails or returns a non-200 status, the subsequent .json() call will fail without providing a helpful error message to the user.

Suggested change

const json = await fetch(url).then((res) => res.json());

let json;

try {

const res = await fetch(url);

if (!res.ok) {

throw new Error(`Failed to fetch article: ${res.status} ${res.statusText}`);

}

json = await res.json();

} catch (err) {

console.error('Error fetching article:', err);

throw err;

}

Copilot · 2025-08-04T15:22:32Z

dotcom-rendering/src/devServer/docs/home.tsx

+
+const elementToString = (element: FEElement): string => {
+	const role = 'role' in element ? ` (${element.role})` : '';
+	const elem = element._type.split('.').at(-1)?.replace('BlockElement', '');


Using optional chaining with .at(-1) but not handling the undefined case. If split() returns an empty array, .at(-1) returns undefined, and calling .replace() on undefined will throw an error.

Suggested change

const elem = element._type.split('.').at(-1)?.replace('BlockElement', '');

const elem = (element._type.split('.').at(-1) ?? '').replace('BlockElement', '');

I think this is incorrect for a couple of reasons:

split will never return an empty array in this case, as separator is not an empty string and the limit argument has not been passed¹.

Even if it did, an error would not be thrown because optional chaining is used; therefore the expression will short-circuit to undefined (not helpful perhaps, but not an error).

Footnotes

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/split ↩

dotcom-rendering/src/devServer/routers/home.tsx

+	url.pathname = `${url.pathname}.json`;
+	url.searchParams.append('dcr', 'true');
+
+	const json = await fetch(url).then((res) => res.json());


To fix the SSRF vulnerability, we should further restrict the user input so that only a safe, known set of paths can be requested from www.theguardian.com. The best way is to maintain an allow-list of permitted paths (e.g., specific article paths or path patterns), or at minimum, validate that the path matches an expected format (such as /[section]/[article-slug]). This validation should be performed in the parseUrl function, before the URL is returned and used in the fetch. If the path does not match the expected pattern, the request should be rejected.

Steps:

In parseUrl, after checking the host and protocol, add a check that the path matches a safe pattern (e.g., /[a-z0-9-]+(/[a-z0-9-]+)*).

Reject any path that contains suspicious elements (such as .., double slashes, or does not match the expected article path format).

Optionally, restrict or sanitize the query string as well, or disallow it entirely if not needed.

Required changes:

Edit parseUrl in dotcom-rendering/src/devServer/routers/home.tsx to add path validation.

No new imports are needed; use a regular expression for path validation.

github-actions · 2025-08-04T15:24:25Z

Deploy build 20115 of `dotcom:rendering-all` to CODE

All deployment options

From guardian/actions-riff-raff.

JamieB-gu requested a review from a team as a code owner August 4, 2025 15:21

github-actions bot added the dotcom-rendering label Aug 4, 2025

JamieB-gu requested a review from Copilot August 4, 2025 15:21

Copilot AI reviewed Aug 4, 2025

View reviewed changes

github-advanced-security bot found potential problems Aug 4, 2025

View reviewed changes

JamieB-gu marked this pull request as draft August 4, 2025 17:01

@@ -50,2 +50,13 @@
+            		// Restrict path to expected article format: e.g., /section/article-slug
+            		// Disallow suspicious paths (e.g., path traversal, double slashes, etc.)
+            		const pathPattern = /^\/[a-z0-9-]+(\/[a-z0-9-]+)*$/i;
+            		if (!pathPattern.test(url.pathname)) {
+            			return error({
+            				kind: 'parseError',
+            				message:
+            					"'dotcomURL' path must match expected article format (e.g., /section/article-slug) and not contain suspicious characters.",
+            			});
+            		}
             		return ok(url);

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Add a new homepage to the dev server #14338

Add a new homepage to the dev server #14338

JamieB-gu commented Aug 4, 2025

Uh oh!

github-actions bot commented Aug 4, 2025

Uh oh!

Copilot AI left a comment

Uh oh!

Copilot AI Aug 4, 2025

Uh oh!

Copilot AI Aug 4, 2025

Uh oh!

JamieB-gu Aug 4, 2025

Uh oh!

Check failure

Copilot Autofix

github-actions bot commented Aug 4, 2025

Uh oh!

Uh oh!

-	const json = await fetch(url).then((res) => res.json());
+	let json;
+	try {
+		const res = await fetch(url);
+		if (!res.ok) {
+			throw new Error(`Failed to fetch article: ${res.status} ${res.statusText}`);
+		}
+		json = await res.json();
+	} catch (err) {
+		console.error('Error fetching article:', err);
+		throw err;
+	}

	const elem = element._type.split('.').at(-1)?.replace('BlockElement', '');
	const elem = (element._type.split('.').at(-1) ?? '').replace('BlockElement', '');

Add a new homepage to the dev server #14338

Are you sure you want to change the base?

Add a new homepage to the dev server #14338

Conversation

JamieB-gu commented Aug 4, 2025

Screenshots

Uh oh!

github-actions bot commented Aug 4, 2025

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull Request Overview

Reviewed Changes

Uh oh!

Copilot AI Aug 4, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Aug 4, 2025

Choose a reason for hiding this comment

Uh oh!

JamieB-gu Aug 4, 2025

Choose a reason for hiding this comment

Footnotes

Uh oh!

Check failure

Uh oh!

Uh oh!

Copilot Autofix

github-actions bot commented Aug 4, 2025

Deploy build 20115 of dotcom:rendering-all to CODE

Uh oh!

Uh oh!

Deploy build 20115 of `dotcom:rendering-all` to CODE