Validate URLs to prevent XSS

[gtsp233]

I've identified Cross-Site Scripting (XSS) vulnerabilities in '@financial-times/dotcom-ui-header' and '@financial-times-dotcom-ui-footer'

Vulnerability Details:

• Severity: High/Critical
• Description: There's a risk of malicious script execution when the href of the a tag is controlled by an adversary.

import { Header, Drawer } from '@financial-times/dotcom-ui-header'

<Header data={{ navbar: { items: [{ url: "javascript:alert(1)" }] } }} />

Then the malicious code alert(1) will be executed. Any React.js application using this package may be vulnerable to XSS.

Suggested Fix or Mitigation:

dotcom-page-kit/packages/dotcom-ui-header/src/components/navigation/partials.tsx

Lines 58 to 77 in b33c591

	const NavListLeft = (props: THeaderProps) => (
	<ul className="o-header__nav-list o-header__nav-list--left" data-trackable="primary-nav">
	{props.data.navbar.items.map((item, index) => (
	<li className="o-header__nav-item" key={`link-${index}`}>
	<a
	className="o-header__nav-link o-header__nav-link--primary"
	href={item.url ?? undefined}
	id={`o-header-link-${index}`}
	{...ariaSelected(item)}
	data-trackable={item.label}
	>
	{item.label}
	</a>
	{props.showMegaNav && Array.isArray(item.meganav) ? (
	<MegaNav meganav={item.meganav} label={item.label} index={index} />
	) : null}
	</li>
	))}
	</ul>
	)

dotcom-page-kit/packages/dotcom-ui-header/src/components/navigation/partials.tsx

Line 157 in b33c591

href={item.url ?? undefined}

It is best practice for a React.js components package to sanitize the href attribute before passing it to an tag. React.js and many popular libraries such as react-router-dom and Next.js also ensure the safety of href attributes. For instance, React.js issues warnings about URLs starting with javascript: and is planning to block these in future versions, as indicated in this pull request.

The same pattern can be found across these two packages. Please consider validating the href to resolve this vulnerability, Thanks!