flawopen.com/JavaScript XSS/Svelte

Svelte는 기본적으로 XSS를 막을까?

<p>{@html comment}</p>
// 값이 실제 HTML 마크업으로 해석됨

<p>{comment}</p>
// 자동으로 이스케이프됨

규칙

Svelte는 일반적인 {expression} 출력을 이스케이프된 텍스트로 컴파일하므로 값이 HTML 마크업으로 해석되지 않습니다. 반면 {@html}은 HTML 문자열을 의도적으로 렌더링합니다. Svelte 문서는 XSS 방지를 위해 값을 이스케이프하거나 통제된 값만 사용하라고 경고합니다. 이 지시문을 보안상 중요한 HTML 삽입 지점으로 취급하고 사용자 작성 리치 텍스트에는 유지 관리되는 새니타이저를 사용하세요.

코드베이스 확인 방법

`.svelte` 파일에서 `{@html}`을 검색하세요. 각 항목마다 값의 출처와 모든 변환 과정을 추적합니다. 사용자 입력, 외부 데이터, 저장된 사용자 콘텐츠는 신뢰할 수 없는 것으로 취급하세요. 텍스트로 표시할 내용에는 `{expression}`을 사용하세요. 리치 HTML이 필요하면 유지 관리되는 HTML 새니타이저로 정제하고 허용되지 않은 마크업이 제거되는지 테스트하세요.

리치 HTML: 새니타이징 경계를 유지하세요

내용을 텍스트로 표시하려면 `{expression}`을 사용하세요. 사용자가 HTML을 작성해야 한다면 `{@html}`에 전달하기 전에 최종 콘텐츠를 DOMPurify 같은 유지 관리되는 HTML 새니타이저로 정제하세요. 정제 후 결과를 이어 붙이거나 변경하지 마세요. 보호가 무효화될 수 있습니다. 새니타이저를 최신 상태로 유지하고 제품에 필요한 마크업 요소와 속성만 허용하세요. HTML 새니타이징만으로 같은 값이 JavaScript, CSS 또는 URL 컨텍스트에서도 안전해지는 것은 아닙니다.

참고 자료

• Svelte 문서 — {@html ...}
• flawopen.com — JavaScript XSS
• DOMPurify — project documentation
• OWASP — Cross Site Scripting Prevention