본문 바로가기
css

HTML 검사기 API

by code-box 2021. 12. 29.
반응형

세시나이저 API 진행에 대한 만세 삼창! 사용자 입력을 신뢰할 수 없다는 것은 복음입니다. 실제로 제가 작업한 앱은 나쁜 배우들이 몰래 들어가서 악성 코드를 실행하려고 하는 것을 다루었습니다.

웹 개발자는 페이지(또는 저장 또는 서버측)에서 사용자 입력을 다시 사용하기 전에 사용자 입력을 정리합니다. 이 작업은 일반적으로 도움을 주기 위해 풀다운된 자체 코드 또는 라이브러리로 수행됩니다. 버그나 나쁜 행위자들이 우리의 코드가 하는 일을 우회하는 방법을 찾을 위험이 있는 HTML 같은 것을 제거하기 위해 RegEx를 작성할 수도 있다.

사용자-랜드 라이브러리나 우리가 직접 춤을 추는 대신 브라우저가 이를 수행하게 할 수 있다:

// some function that turns a string into real nodes
const untrusted_input = to_node("<em onclick='alert(1);'>Hello!</em>");

const sanitizer = new Sanitizer();
sanitizer.sanitize(untrusted_input);  // <em>Hello!</em>
// some function that turns a string into real nodes
const untrusted_input = to_node("<em onclick='alert(1);'>Hello!</em>");

const sanitizer = new Sanitizer();
sanitizer.sanitize(untrusted_input);  // <em>Hello!</em>
 

그런 다음 시간이 지남에 따라 계속 브라우저의 책임을 지게 합니다. 보고서 초안에 따르면:

브라우저는 언제 코드를 실행할지 꽤 잘 알고 있다. 브라우저에 임의의 문자열에서 HTML을 안전한 방식으로 렌더링하는 방법을 알려주면 사용자 공간 라이브러리를 개선할 수 있으며 브라우저 자체의 변화하는 파서 구현과 함께 유지 및 업데이트될 가능성이 훨씬 더 높다.

이런 종류의 것은 최고의 웹 표준입니다. 수많은 사람들이 해야 하는 성가신(그리고/또는 위험한) 일을 발견하고, 그것을 더 안전하고, 빠르고, 좋게 만들기 위해 개입하세요.

직접 링크

댓글