XSS vulnerabilities in @hashicorp packages

[gtsp233]

I've identified Cross-Site Scripting (XSS) vulnerabilities in '@hashicorp/hero'

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.

Steps to Reproduce:
In a React.js project:

import Hero from "@hashicorp/react-hero"

import React from "react";
import Hero from "@hashicorp/react-hero"
const App = () => {
    return <>
        <Hero description={`<img src='' onerror=alert(1)>`} headline={`<img src='' onerror=alert(1)>`} />
    </>
};

export default App

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:
Sanitize the HTML before passing it to dangerouslySetInnerHTML using popular sanitization libraries, e.g., dompurify

react-components/packages/section-header/index.js

Lines 10 to 43 in 18198c8

	function SectionHeader({ headline, description, useH1 }) {
	return (
	<div className={`g-section-header ${s.root}`}>
	{headline &&
	(useH1 ? (
	<h1
	className={s.headlineOne}
	data-testid="h1"
	dangerouslySetInnerHTML={{
	__html: eliminateOrphans(headline),
	}}
	/>
	) : (
	<h2
	className={s.headlineTwo}
	data-testid="h2"
	dangerouslySetInnerHTML={{
	__html: eliminateOrphans(headline),
	}}
	/>
	))}
	{description && (
	<div
	className={s.description}
	data-testid="description"
	dangerouslySetInnerHTML={{
	__html: eliminateOrphans(description.trim()),
	}}
	/>
	)}
	</div>
	)
	}