XSS via dangerouslySetInnerHTML

Reactsenior

New CommentView component. A colleague gave up on react-markdown ("too heavy") and wrote their own mini markdown renderer via replace. Uses dangerouslySetInnerHTML. Your job as the security reviewer is to find XSS vectors in the diff.

PR: lesson.tsx +40 −04 проблем

1-// CommentView.tsx — new component

1+import { useEffect, useState } from 'react'

2+

3+interface Comment {

4+ id: string

5+ author: string

6+ body: string // user input from API

7+}

8+

9+interface Props {

10+ commentId: string

11+}

12+

13+function renderMarkdown(md: string): string {

14+ return md

15+ .replace(/\*\*(.+?)\*\*/g, '<strong>$1</strong>')

16+ .replace(/@(\w+)/g, '<a href="/u/$1">@$1</a>')

17+ .replace(/\n/g, '<br/>')

18+}

19+

20+export function CommentView({ commentId }: Props) {

21+ const [comment, setComment] = useState<Comment | null>(null)

22+

23+ useEffect(() => {

24+ fetch(`/api/comments/${commentId}`)

25+ .then((r) => r.json())

26+ .then(setComment)

27+ }, [commentId])

28+

29+ if (!comment) return null

30+

31+ return (

32+ <div className="comment">

33+ <strong>{comment.author}</strong>

34+ <div

35+ className="body"

36+ dangerouslySetInnerHTML={{ __html: renderMarkdown(comment.body) }}

37+ />

38+ <small>#{commentId}</small>

39+ </div>

40+ )

41+}

Шаг 1 из 6

How React defends against XSS

React **automatically escapes** anything that lands in JSX as text or an attribute. `<div>{userInput}</div>` is safe: if `userInput = '<script>'`, it's printed as text, not executed. But there are three dangerous spots: 1. **`dangerouslySetInnerHTML`** — literally turns protection off. 2. **`href={userInput}`** — React didn't filter `javascript:` URLs before version 16. 3. **CSS-in-JS** — `style={{ background: userInput }}` can be abused via `url('javascript:...')`. Walk the code and find every such spot.

ArchCase

ArchCase

XSS via dangerouslySetInnerHTML

How React defends against XSS