개발자 도구 · HTML WYSIWYG 편집기
편집자를 위한 DOM 설명: HTML이 텍스트 파일이 아닌 트리인 이유
· 배경
HTML 돔 내용 편집 가능
중첩 규칙, 상위 및 하위 요소, 브라우저가 잘못된 중첩을 복구하는 방법을 다루는 비프로그래머를 위한 문서 객체 모델을 소개하여 임의적으로 보이는 편집기 동작을 설명합니다.
<p>가 자동으로 닫힌 이유 — 붙여넣기 후 변경된 마크업으로 열립니다.
작성자의 원래 문자 순서가 아닌 결과 트리가 궁극적으로 중요하기 때문에 조각이 편집기를 통과한 후 단락이 닫히거나 이동하는 것처럼 보일 수 있습니다. ToolAcre는 또 다른 변환을 추가합니다. 자체 허용 목록에 따라 브라우저 파생 소스를 토큰화하고 다시 작성합니다.
소스가 변경되면 어느 단계에서 변경되었는지 물어보세요. 브라우저가 contenteditable DOM을 변형했을 수도 있고, sanitizer가 별칭을 매핑하거나, 노드 래핑을 풀거나, 허용된 태그의 균형을 맞췄을 수도 있습니다. 모든 차이점을 "브라우저가 해결했습니다"라고 부르면 이 중요한 경계가 숨겨집니다.
상자 안의 상자 — 간단한 예를 통해 트리 모델을 소개합니다.
요소를 부모-자식 관계로 연결된 상자로 생각하십시오. `<p>Read <strong>carefully</strong>.</p>`에서 p는 텍스트의 상위이며 강력하고 더 많은 텍스트입니다. Strong은 신중하게라는 단어의 부모입니다. 소스 들여쓰기는 트리를 설명할 수 있지만 관계를 생성하지는 않습니다.
ToolAcre의 예쁜 포맷터는 블록 컨테이너를 줄에 배치하고 주변 텍스트와 함께 인라인 요소를 유지합니다. 목록은 들여쓰기된 li 줄을 받습니다. 이 형식은 정리된 출력을 읽기 위한 것입니다. 실제 모델은 소스가 압축되어 있는지 또는 줄에 분산되어 있는지 여부에 관계없이 중첩된 요소 및 텍스트 노드로 유지됩니다.
허용된 중첩은 ToolAcre의 리라이터에 의해 균형이 조정됩니다. 브라우저 콘텐츠 모델이 더 광범위함
HTML은 이 편집자의 정책보다 훨씬 더 광범위하고 상세한 콘텐츠 모델을 정의합니다. ToolAcre는 특정 세트를 허용하지만 모든 의미 중첩 규칙의 유효성을 검사하지는 않습니다. 해당 스택은 허용된 태그 사이에서 올바른 형식의 폐쇄를 보장합니다. 이는 모든 결과 관계가 대상에 이상적인 HTML이라는 증거는 아닙니다.
예를 들어 목록에는 적절한 목록 항목이 포함되어야 하지만 일반 스택은 스키마 유효성 검사기가 아니기 때문에 허용되는 비정상적인 조합을 보존할 수 있습니다. 작성자는 도구 모음이나 검토된 소스를 통해 합리적인 제목, 단락 및 목록을 구성한 다음 정확성이 중요한 경우 대상 요구 사항에 따라 유효성을 검사해야 합니다.
ToolAcre는 전체 HTML 구문 분석 알고리즘이 아닌 스택으로 허용된 태그를 복구합니다.
브라우저는 오류 복구 기능이 있는 전체 HTML 구문 분석 알고리즘을 적용합니다. ToolAcre는 이를 다시 구현하지 않습니다. 토크나이저는 허용 목록에 필요한 구조를 인식하고 작성자는 교차 종료 태그가 나타나면 허용된 내부 요소를 닫습니다. 길 잃은 닫힘을 삭제하고 마지막에 남은 열림을 닫습니다.
소스는 모듈을 일반적인 적대적 입력 XSS 필터로 취급하지 않는 이유로 파서 차등을 명시적으로 명명합니다. 브라우저는 의도적으로 잘못된 문자열을 다르게 해석할 수 있습니다. 미리보기 샌드박스는 ToolAcre 내부 실행에 대한 독립적인 제한을 제공하는 반면 서버에는 여전히 적절한 HTML5 인식 위생이 필요합니다.
텍스트 노드 및 공백 — 트리에 태그 사이에 공백과 줄 바꿈이 존재하는 이유를 설명합니다.
요소 사이의 텍스트는 공백 문자를 포함한 텍스트 토큰이 됩니다. 예쁜 포맷터는 사전 외부의 일반 공백을 축소하고 사전 내용은 정확하게 유지합니다. 일반 텍스트 변환은 블록 끝과 br에 줄 바꿈을 삽입한 다음 과도한 빈 줄 실행을 줄입니다.
따라서 공백은 각 단계에서 다르게 참여합니다. 시각적 간격은 텍스트, br, 블록 경계 또는 CSS에서 가져올 수 있습니다. 눈에 보이는 모든 간격을 여백으로 처리하는 대신 노드와 문자를 검사하세요. 새니타이저는 독자에게 표시되는 단어를 변경하지 않고 공백 형식을 정규화할 수 있습니다.
작업 예: 목록이 포함된 두 단락 메모 추적 — 생성된 마크업을 트리로 읽고 부모와 자식을 식별합니다.
빌드 `<h2>Checklist</h2><p>Read <strong>carefully</strong>.</p><ul><li>Source</li><li>Preview</li></ul>`. 조각에는 세 개의 루트 수준 요소 하위 항목이 있습니다. 단락에 텍스트와 강한 내용이 포함되어 있습니다. 목록에는 각각 텍스트가 있는 두 개의 li 하위 항목이 포함되어 있습니다.
소스에서 시각적으로 전환하거나 그 반대로 전환합니다. 허용된 트리는 균형을 유지해야 하며 프리티 모드는 목록 항목을 들여쓰기하는 동안 제목과 단락을 줄에 배치합니다. 이 운동은 통제됩니다. 모든 잘못된 입력 또는 브라우저 복구 경로를 보여주지는 않습니다.
여기서 다루지 않는 내용 — JavaScript DOM 프로그래밍 또는 CSS 상자 모델
이 문서에서는 JavaScript DOM 프로그래밍, 돌연변이 관찰자, 선택 API 또는 CSS 상자 모델을 가르치지 않습니다. 요소 트리와 레이아웃 상자 트리는 관련되어 있지만 동일하지는 않습니다. 또한 손으로 작성한 토큰 목록이 브라우저 DOM이라고 주장하지 않습니다.
깔끔한 트리에서는 일반화된 보안 결론이 나오지 않습니다. 공격자는 구문 분석 차이점과 URL을 표적으로 삼을 수 있으므로 출력 필터링, 샌드박스 미리 보기 및 서버 위생이 뚜렷하게 유지됩니다. 수신 시스템의 보안 검토를 포기하지 말고 구조를 추론하기 위해 트리 모델을 사용하십시오.
요점: 나무로 생각하기 — 정신 모델을 요약하고 ToolAcre HTML WYSIWYG 편집기의 마크업 출력이 작성 중인 트리를 표시하는 방법을 설명합니다.
시각적 동작이 임의적으로 보일 때 나무를 생각해 보세요. 의도한 상위, 하위 및 텍스트 노드를 식별한 다음 필터링된 소스와 비교합니다. ToolAcre는 콘텐츠 편집 가능한 제도와 읽기 가능하고 다시 작성된 조각을 결합하여 이 검사를 실용적으로 만듭니다.
강력한 정신 모델은 또한 한계를 드러냅니다. 래핑되지 않은 div는 상위를 잃고, 삭제된 스크립트는 하위 트리를 잃고, b는 강해집니다. 이러한 변환이 명확해지면 마크업이 알려지지 않은 반복적인 시각적 넛지가 아닌 수정 사항이 구조적 결정이 됩니다.