게시일: 2025년 6월 12일
2025년 5월 20일에 속성에서 < 및 >를 이스케이프 처리하여 변형 XSS (mXSS) 취약점을 방지하도록 HTML 사양이 업데이트되었습니다. 이 변경사항은 2025년 5월 28일에 베타로 승격된 Chrome 138에 적용되었으며 2025년 6월 24일에 안정화 버전이 됩니다.
이 게시물에서는 HTML 속성 이스케이프 변경사항이 웹 개발자에게 미치는 영향과 잠재적인 중단에 대해 자세히 설명합니다. 이 변경사항의 보안 근거는 보안 엔지니어링 블로그의 관련 게시물에서 설명합니다.
변경사항
data-content 속성 값이 "<u>hello</u>"인 <div> 요소가 있다고 가정해 보겠습니다. div.outerHTML를 읽으면 어떻게 되나요?
이전에는 다음과 같은 HTML이 표시되었습니다.
<div data-content="<u>hello</u>"></div>
변경 후에는 다음과 같은 HTML이 표시됩니다.
<div data-content="<u>hello</u>"></div>
이전에는 속성에서 < 또는 >가 이스케이프 처리되지 않았습니다. 이제 이 두 문자는 항상 이스케이프 처리됩니다.
변경되지 않은 사항
이 변경사항은 직렬화 중에 HTML 프래그먼트가 문자열 표현으로 다시 변환되는 방식만 수정합니다. 영향은 innerHTML 또는 outerHTML 속성에 액세스하거나 요소에서 getHTML() 메서드가 호출되는 시나리오로 제한됩니다. 이러한 작업은 기존 DOM 구조를 사용하여 텍스트 HTML 표현을 생성합니다.
이 변경사항은 HTML 파싱에는 영향을 미치지 않습니다. 다음 HTML을 살펴보세요.
<div id="div1" data-content="<u>hello</u>"></div>
<div id="div2" data-content="<u>hello</u>"></div>
두 div는 정확히 동일한 방식으로 파싱되며 두 경우 모두 div.dataset.content는 "<u>hello</u>"를 반환합니다.
중단되지 않는 항목은 무엇인가요?
getAttribute, getAttributeNS, dataset, attributes와 같은 DOM API를 사용하여 속성 값을 검색하면 이전과 동일한 디코딩된 값이 반환됩니다. 특히 < 및 >가 디코딩된 값이 반환됩니다.
모든 console.log 행이 "<u>"를 로깅하는 다음 예시를 고려해 보세요.
<div data-content="<u>"></div>
const div = document.querySelector("div");
// All of the following will log "<u>"
console.log(div.getAttribute("data-content"));
console.log(div.dataset.content);
console.log(div.attributes['data-content'].value);
어떤 문제가 발생할 수 있나요?
innerHTML 및 outerHTML을 사용하여 속성 가져오기
innerHTML 또는 outerHTML를 사용하여 속성 값을 추출하면 코드가 중단될 수 있습니다. 약간 복잡하지만 다음 예시를 살펴보세요.
<div data-content="<u>"></div>
const div = document.querySelector("div");
const content = div.outerHTML.match(/"([^"]+)"/)[1];
console.log(content);
이 변경사항으로 인해 이 코드의 동작이 달라집니다. 이전에는 content이 "<u>"와 같았지만 이제는 "<u>"입니다.
정규 표현식으로 HTML을 파싱하는 것은 권장되지 않습니다. 속성의 값을 가져와야 하는 경우 이전 섹션에 설명된 DOM API를 사용하세요.
엔드 투 엔드 테스트
Chromium을 사용하여 HTML을 생성하는 CI/CD 파이프라인이 있고 HTML을 정적 예상 값과 비교하는 테스트를 작성한 경우 속성에 < 또는 >가 포함되면 이러한 테스트가 중단될 수 있습니다.
이는 예상되는 중단입니다. 모든 < 및 > 문자가 각각 < 및 >,로 이스케이프되도록 예상 값을 업데이트해야 합니다.
요약
이 블로그 게시물에서는 브라우저가 일부 변형 XSS 인스턴스를 방지하여 보안을 개선하기 위해 속성에서 < 및 >를 이스케이프 처리하기 시작하게 하는 HTML 사양의 변경사항을 설명했습니다.
이 변경사항은 2025년 6월 24일부터 Chromium (버전 138) 및 Firefox (버전 140)에서 모든 사용자에게 제공됩니다. 2025년 9월경에 출시될 Safari 26 베타에도 포함되어 있습니다.
이 변경사항으로 인해 웹사이트가 손상되었다고 생각되고 이를 쉽게 해결할 방법이 없다면 https://issues.chromium.org/에서 버그를 신고하세요.