React의 dangerouslySetInnerHTML을 사용해 보았습니다.
무엇을 사용할 수 있습니까?
마크다운 편집기를 만들고 싶은 경우 등 브라우저에서 작성한 HTML 미리보기를 만들고 싶을 때 사용할 수 있습니다.
사내 시스템에서 HTML 미리보기 화면을 만들 수 없습니까? 라고 하는 상담을 받았으므로 조사해 사용해 보았습니다.
dangerouslySetInnerHTML dangerouslyuSetInnerHTML 속성에 __html 속성을 가진 Object를 전달하면 작동합니다. text 에는 입력된 텍스트 영역의 문자열이 들어 있습니다. const 미리보기 = props => { const {text} = props return ( <div dangerouslySetInnerHTML={{ __html: text }} /> ) } dangerously의 기원 innerHTML도 그렇습니다. 이것을 사용하면 XSS 취약점을 만들 수 있습니다. innerHTML 의 사양으로 <script> 태그는 사용할 수 없습니다만, onclick 등의 이벤트는 실행할 수 있으므로, 아래와 같이 쓰는 것으로 임의의 Javascript 코드를 실행할 수가 있습니다. <button onclick"alert('Hi!!!')">Click here!!!</button> 그래서 직접받은 문자열을 설정하는 것은 좋지 않습니다. (↑는 나쁜 예) 본가의 문서에도 기재하고 있습니다만, ↓와 같이 반드시 입력값의 검증 처리등을 사이에 두어 임의의 코드를 실행하지 않게 합시다. const 미리보기 = props => { const {text} = props return ( <div dangerouslySetInnerHTML={{ __html: sanitizing(text) }} /> ) } 요약 React의 dangerouslySetInnerHTML을 만져 보았습니다. dangerously의 이름대로 XSS가 될 위험이 있으므로 용법 용량을 지켜 올바르게 사용하십시오. ※ 사용하지 않아도 된다면 사용하지 않는 편이 좋습니다.
참고
Reference
이 문제에 관하여(React의 dangerouslySetInnerHTML을 사용해 보았습니다.), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/hiromoon/items/f3ed77abd338139ba97b텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
