2.2 KiB
| id | title | layout | permalink | prev |
|---|---|---|---|---|
| dangerously-set-inner-html-ko-KR | Dangerously Set innerHTML | tips | dangerously-set-inner-html-ko-KR.html | children-undefined-ko-KR.html |
부적절히 innerHTML를 사용하면 사이트 간 스크립팅 (XSS) 공격에 노출됩니다. 화면의 사용자 입력을 정제하다(sanitize) 오류를 내기 쉬우며, 적절하게 사용자의 입력을 정제하지 못하면 인터넷 상 웹 취약점의 원인이 됩니다.
우리 설계철학은 안전을 "쉽게" 얻는 것입니다. 개발자는 그들의 의도를 명시적으로 알려야만 "안전하지 않는" 연산을 할 수 있습니다. dangerouslySetInnerHTML prop의 이름은 의도적으로 무섭게 만든 것인데, prop 값은 문자열이 아닌 객체이고 정제된 데이터를 지정하는데 쓸 수 있습니다.
보안 영향을 완전히 이해했다면, 데이터에서 나쁜 부분을 완전히 제거하고 __html 키와 정제된 값을 담은 새로운 객체를 만듭시다. 여기에 JSX 문법을 쓴 예제가 있습니다.
function createMarkup() { return {__html: 'First · Second'}; };
<div dangerouslySetInnerHTML={createMarkup()} />
부주의하게 <div dangerouslySetInnerHTML={getUsername()} />를 쓰면 getUsername()가 {__html: ''} 객체 대신 순수 문자열을 반환하기 때문에 렌더링이 안되는 것이 요점입니다. {__html:...} 문장 속의 의도는 "type/taint" 같이 숙고하는 것입니다. 함수는 이 래퍼 객체를 사용하여 정제된 객체를 반환할 수 있는 데 뒤 따라오는 dangerouslySetInnerHTML에 표시할 데이터를 전달합니다. 이런 이유로 <div dangerouslySetInnerHTML={{'{{'}}__html: getMarkup()}} />의 형태의 코드를 작성하는 것은 추천하지 않습니다.
이 기능성은 주로 DOM 문자열을 다루는 라이브러리와 협동하기 위한 목적으로 제공하며, 포함할 HTML은 잘 정제되어야 합니다. (예: XML 검증을 통과)
더 완벽한 사용 예제를 보려면 대문의 최신 예제를 참조하세요.