개발자 도구 · HTML WYSIWYG 편집기
DOM에서 마크업까지: innerHTML 직렬화가 HTML을 형성하는 방법
· 작동 방식
HTML HTML 엔터티 개발자 워크플로
이스케이프 및 엔터티에서 무효 요소 및 속성 인용에 이르기까지 DOM 트리를 HTML 문자열로 다시 변환할 때 브라우저가 따르는 규칙과 편집기 출력이 그렇게 보이는 이유를 설명합니다.
<br>이(가) 이 소독제에서 <br />(으)로 다시 표시되는 이유
`<br>`을 포함하는 소스 조각은 이 새니타이저를 `<br />`로 유지합니다. 이 결과는 모든 브라우저가 슬래시를 사용하여 HTML을 직렬화한다는 증거는 아닙니다. 이는 void 요소 분기가 허용된 br 및 hr 요소에 대해 공백과 슬래시를 내보내는 ToolAcre의 문자열 재작성기에서 의도적으로 선택한 것입니다.
구별은 일반적인 잘못된 설명을 방지합니다. 시각적 표면은 innerHTML을 통해 읽혀지지만 복사된 소스는 애플리케이션 코드에 의해 토큰화되고 다시 작성됩니다. 사용자가 받는 것은 브라우저에서 생성된 DOM 문자열과 별칭, 필터링된 속성 및 균형 잡힌 태그를 포함하여 ToolAcre의 더 좁은 출력 규칙을 모두 반영합니다.
토큰화, 허용 목록 재작성 — 이는 브라우저 innerHTML 직렬화가 아닙니다.
토크나이저는 DOM 노드를 구성하거나 DOMParser를 호출하지 않고 문자를 스캔합니다. 텍스트, 주석, 선언, 시작 태그, 종료 태그 및 원시 텍스트 요소 본문을 인식합니다. 삭제는 허용된 구조를 유지하고, 알 수 없는 일반 래퍼를 풀고, 내용물이 포함된 위험한 컨테이너를 억제하는 등 플랫 시퀀스를 반복합니다.
결과적으로 원래 철자가 유지되지 않습니다. 대소문자가 혼합된 이름은 소문자로 변경됩니다. b는 강해지고, i는 em이 되고, Strike와 del은 s가 되고, ins는 u가 됩니다. 출력은 원래 하위 문자열로 반환되지 않고 허용된 토큰에서 다시 생성되므로 소스 형식 및 지원되지 않는 세부 정보는 의도적으로 사라집니다.
알려진 엔터티를 정규화하는 동안 텍스트 및 속성 이스케이프
텍스트는 먼저 엔터티로 디코딩된 후 다시 이스케이프됩니다. 앰퍼샌드는 `&`이 되고, 보다 작음 및 보다 큼 기호는 `<` 및 `>`가 되며, 금지된 제어 문자는 사라집니다. 이 순서는 기존 `&`을 `&amp;`로 전환하는 대신 반복되는 패스에서 안정적으로 유지합니다.
속성 값은 큰따옴표, 작은따옴표, 꺾쇠괄호 및 앰퍼샌드도 인용하는 더 엄격한 이스케이프 경로를 따릅니다. 알려진 엔터티는 허용된 속성이 방출되기 전에 디코딩됩니다. 테스트는 텍스트 및 링크 쿼리에 대한 멱등성을 고정하지만 코드는 명명된 참조와 숫자 참조와 같은 각 저자 엔터티 철자를 보존할 것을 약속하지 않습니다.
사용자 정의 리라이터의 빈 요소 및 균형 잡힌 닫는 태그
br 및 hr만 허용되며 출력 세트에서 void로 분류됩니다. 닫는 태그를 받지 않습니다. 무효가 허용되지 않는 요소의 경우 오픈 스택은 중첩을 기록합니다. em 주변의 강한 교차 마감은 내부 요소가 먼저 닫히게 하여 잘못된 순서를 유지하는 대신 균형 잡힌 마크업을 생성합니다.
닫히지 않은 요소는 끝에서 닫히고, 닫히는 태그는 무시됩니다. 이는 브라우저 HTML5 오류 복구의 완전한 구현이 아닌 재작성자의 균형 조정 정책입니다. 소스 자체는 파서 차이에 대해 경고하므로 출력이 보편적인 적대적 입력 삭제제로 마케팅되어서는 안 됩니다.
속성은 허용 목록에 포함되고 인용됩니다. 소스 주문만으로는 계약이 아닙니다
일반 속성 모음은 유지되지 않습니다. 단락과 제목은 아무것도 허용하지 않습니다. 링크는 href와 제목을 허용합니다. 약어는 제목을 허용합니다. 인용은 인용을 허용합니다. 순서가 지정된 목록을 사용하면 시작 및 입력이 가능합니다. 내보낸 모든 값은 큰따옴표로 묶이고 허용된 링크도 `rel="noopener noreferrer nofollow"`을(를) 얻습니다.
속성 순서는 허용된 토큰과 추가된 rel 필드를 따르지만 순서에 의존하는 것은 취약합니다. 의미는 허용된 이름과 값에 있습니다. 잘못된 형식의 정수 시작은 삭제되고, 안전하지 않은 href 또는 인용 구성표는 거부되며, 알 수 없는 속성은 자동으로 게시된 마크업의 일부가 되는 대신 제거 이유를 생성합니다.
작업된 예: ToolAcre의 새니타이저를 통해 스니펫 왕복
`<B class="loud">A & B<br></B><a href="javascript:alert(1)">open</a>`을(를) 시도해보세요. 클래스가 제거되고, B는 Strong으로 매핑되고, 기존 앰퍼샌드는 하나의 이스케이프된 앰퍼샌드로 유지되고, br은 자체적으로 닫히며, 안전하지 않은 링크는 표시되는 링크 텍스트를 유지하면서 href를 잃습니다.
Pretty 소스 모드는 지원되는 블록 요소를 줄 및 들여쓰기 목록 하위 항목에 배치합니다. 인라인 콘텐츠를 함께 남겨두고 pre 내부의 텍스트를 보존합니다. 형식화는 이미 다시 작성된 출력에 대한 가독성을 전달하는 것입니다. 이는 두 번째 보안 구문 분석기가 아니며 이전 정규화에서 제거한 공백을 복원하지 않습니다.
여기서 다루지 않는 내용 — 브라우저, XML 또는 XHTML 직렬화
이 문서에서는 기본 브라우저 직렬화 보장, XMLSerializer, XHTML 구문 또는 선택적 HTML 닫기 태그 규칙에 대한 일반적인 설명을 다루지 않습니다. 이 저장소에서 관찰 가능한 규칙을 문서화합니다. ` `에 대한 클레임은 일반 브라우저 직렬 변환기가 아닌 로컬 엔터티 테이블이 인식된 명명된 참조를 결정하기 때문에 특히 생략됩니다.
미리보기 빌더는 한 번 더 정리하고 조각을 완전한 밝은 테마 문서로 래핑합니다. 복사 HTML은 조각을 반환합니다. 다운로드 HTML은 해당 문서를 반환합니다. 그것들은 의도적으로 다른 인공물입니다. 다운로드한 파일이 복사된 소스와 바이트가 동일하다고 가정하기 전에 작업 레이블을 읽으십시오.
요약: 직렬 변환기는 일관적이지만 입력은 일관성이 없습니다. - 편집기 출력을 예측하는 방법과 ToolAcre의 HTML WYSIWYG 편집기가 브라우저가 실제로 생성하는 내용을 보여주는 방법을 요약합니다.
문자열 토큰화, 지원되는 엔터티 디코딩, 요소 별칭 및 허용 목록 적용, URL 검사, 허용된 태그 균형 조정, 출력 이스케이프 및 선택적으로 예쁜 인쇄 등의 단계에 따라 ToolAcre를 예측합니다. 이 시퀀스는 innerHTML이 작성자의 소스를 단순히 보존하거나 직렬화한다고 말하는 것보다 실제 결과를 더 정확하게 설명합니다.
긴 초안을 처리하기 전에 작은 고정 장치로 재작성을 관찰하려면 소스 모드를 사용하십시오. 새니타이저는 500,000 문자를 초과하는 문서를 거부하므로 탭이 고정되지 않고 너무 큰 입력이 실패합니다. 대상의 자체 HTML 정책을 이 편집기의 의도적인 압축 하위 집합과 별도로 유지하세요.