개발자 도구 · HTML 엔터티 이스케이퍼
innerHTML 없이 HTML 엔터티 디코딩: 조회 테이블 디코더 작동 방식
· 작동 원리
HTML 보안 인코딩
innerHTML에 할당하여 엔터티를 디코딩하는 인기 있는 트릭은 HTML 구문 분석기를 통해 입력을 실행하는데, 이는 정확히 사용자가 원하지 않는 것입니다. 이 게시물에서는 보다 안전한 테이블 기반 접근 방식과 명명된 십진수 및 16진수 참조를 처리하는 방법을 설명합니다.
<img onerror>을 실행한 디코더 - '그냥 디코딩'이 스크립트 실행이 된 구체적인 사례
일반적인 단일 라이너 element.innerHTML = 입력은 & 디코딩 이상의 작업을 수행합니다. 입력에 <img src=x onerror=...>도 포함되어 있으면 브라우저는 이미지 요소와 이벤트 핸들러 속성을 생성합니다. 해당 노드가 연결되고 로드되는 방식에 따라 서식 지정 바로가기가 스크립트 실행으로 바뀔 수 있습니다. 붙여넣은 HTML 유사 문자열은 DOM 트리로 구문 분석되는 것이 아니라 문자 참조를 해결하는 것이 유일한 작업인 경우 데이터로 남아 있어야 합니다.
innerHTML이 실제로 문자열로 수행하는 작업 — 엔터티 교체뿐만 아니라 구문 분석, 요소 생성 및 이벤트 핸들러 속성
innerHTML은 HTML 파서를 호출합니다. 태그는 노드가 되고 속성은 브라우저 의미를 획득하며 나중에 textContent 읽기는 결과에서 마크업을 제거합니다. 리터럴 입력으로 유지하려는 <strong> 태그는 텍스트 서식으로 사라질 수 있습니다. 분리된 요소는 일반적인 안전을 보장하지 않습니다. 코드는 종종 해당 하위 트리를 다시 삽입하거나 결과 HTML을 다른 곳에서 사용합니다. 신뢰할 수 없는 입력을 표시해야 하는 경우 textContent를 할당하고 의도적으로 HTML 렌더링을 선택한 경우에만 삭제하세요.
조회 테이블 접근 방식 — &name;, &#NNN;에 대한 정규식 및 &#xHHH; 및 이름에서 문자까지의 매핑
ToolAcre의 디코더는 제한된 정규식을 사용하여 &name;, { 또는 { 형식의 참조를 찾습니다. 명명된 참조는 amp, lt, gt, 인용문 및 일반적인 활자체를 포함하여 실용적인 명시적 테이블에서 조회됩니다. 알 수 없는 이름은 추측이 아닌 쓰여진 대로 남겨집니다. 이 접근 방식은 요소를 생성하지 않으며 HTML 파서를 호출하지 않습니다. 이는 단순히 문자열에서 인식된 하위 문자열을 대체합니다. 테이블은 모든 HTML 명명된 문자 참조가 아닌 의도적으로 하위 집합입니다.
숫자 참조 처리 - 10진수 및 16진수 코드 포인트를 구문 분석하고 이를 아스트랄 문자를 포함한 문자열로 변환합니다.
숫자 참조의 경우 &# 뒤의 10진수 또는 &#x 뒤의 16진수를 구문 분석한 다음 숫자 코드 포인트를 String.fromCodePoint을 사용하여 문자로 변환합니다. 0x1F600과 같은 아스트랄 값은 인쇄 가능한 두 개의 독립적인 문자가 아닌 이모티콘을 생성합니다. 또한 구현은 브라우저와 마찬가지로 역사적인 Windows-1252 제어 범위 값을 매핑합니다. 0이면 서로게이트 코드 포인트와 U+10FFFF 이상의 값이 대체 문자가 됩니다. 이러한 명시적인 오류 처리는 잘못된 숫자가 디코더와 충돌하는 것을 방지합니다.
실제 예: &, © 및 😀을 혼합하는 문자열 디코딩 — 각 일치 항목은 테이블 또는 숫자에서 확인됩니다.
리터럴 입력 &, © 및 😀을 디코딩합니다. 첫 번째 참조는 명명된 테이블을 통해 &로 매핑되고, 10진수 169는 ©가 되고, 16진수 1F600은 😀이 됩니다. 그 옆에 원시 <img onerror="alert(1)">을 포함하세요. 디코더는 해당 태그 모양 시퀀스를 일반 문자열 문자로 반환합니다. 이미지를 생성하거나 이벤트를 실행하지 않습니다. 나중에 결과를 실제 페이지에 넣을 때 디코딩된 문자열을 가져와 다시 innerHTML에 할당하는 대신 안전한 텍스트 싱크를 사용하세요.
테이블 접근 방식이 수행하지 않는 작업 — 의도적으로 구현하지 않는 한 세미콜론 없는 레거시 참조 및 파서 오류 복구 문제
조회 접근 방식은 HTML 파서의 레거시 세미콜론 없는 복구 규칙을 의도적으로 재현하지 않습니다. 세미콜론 없이 복사하면 그대로 유지될 수 있습니다. 고정된 명명된 테이블은 또한 2,000개가 넘는 HTML5 명명된 참조 중 많은 부분을 생략합니다. 이러한 제한은 예측 가능한 작은 디코더에 대한 정직한 절충안입니다. 명시적으로 종료된 참조만 허용하면 앰퍼샌드가 포함된 임의의 산문을 마크업으로 처리하는 것을 피할 수 있습니다. 전체 브라우저 호환성이 필수적인 경우 도구의 문서화된 지원 이름을 확인하세요.
여기서 다루지 않는 것 - 렌더링하려는 HTML을 삭제하는 것은 다른 문제입니다.
참조 디코딩은 표시를 위해 HTML을 삭제하지 않습니다. 디코딩된 텍스트에 <script> 시퀀스가 포함된 경우 나중에 애플리케이션의 다른 부분에서 이를 마크업으로 삽입하면 여전히 위험합니다. HTML 속성, JavaScript 문자열 및 URL과 같은 컨텍스트에는 각각 고유한 출력 인코딩 및 정책이 필요합니다. ToolAcre는 텍스트를 반환합니다. 미래의 안전하지 않은 싱크대를 안전하게 만들 수는 없습니다.
요약: 입력을 데이터로 처리 - HTML 엔터티 이스케이퍼가 HTML 파서가 아닌 조회 테이블을 사용하여 디코딩하여 입력이 텍스트로 유지되는 방법
입력을 데이터로 처리합니다. HTML 엔터티 이스케이퍼는 innerHTML 트릭이 아닌 테이블 및 코드 포인트 산술을 사용하여 디코딩하므로 마크업 모양의 페이로드는 도구 내에서 비활성 문자로 유지됩니다. 세 가지 참조를 시도한 다음 디코딩된 텍스트와 다음 사용 방법을 모두 검사합니다. HTML로 다시 분석하면 안전 경계가 손실됩니다.