서식을 허용하는 JavaScript 편집기에서 새 니타 이징을 처리하는 방법

Question

매체와 같은 많은 편집기가 이제 서식을 제공합니다. DOM에서 볼 수 있듯이 단순히 HTML 만 추가합니다. 그러나 사용자가 적용한 형식을 잃지 않고 이런 종류의 입력을 어떻게 소독합니까?

예.

<strong class="markup--strong markup--p-strong">text</strong>

을하지만 당신은 사용자가 스스로 것을 입력하면 렌더링 싶지 않을 것이다 : 굵은 클릭하면 추가합니다. 그럼 어떻게 다른가요? 또한 markdown으로 스타일을 지정하고 사용자가 자신의 markdown을 입력하지 않고 브라우저를 통해서만 액세스 할 수있게하는 경우에는이 점이 다릅니다.

내가 생각할 수있는 한 가지 방법은 모든 HTML 특수 문자를 이스케이프 처리하는 것이지만 이상하게 보입니다. 내가 아는 한 출력하는 경우에만 내용을 살균합니다.

Answer 1

클라이언트 쪽 유효성 검사가 변조 될 수 있으므로 Vipin에서 설명한대로 서버 측 살균제를 사용하십시오. OWASP (Open Web Application Security Project)에는 java-html-sanitizer와 같이 사용할 수있는 가이드 및 소독 장치가 있습니다.

개념에 대한 일반 개요는 https://www.owasp.org/index.php/Data_Validation 섹션의 '살균'섹션을 참조하십시오. 당신은 예를 들어 다른 문자와 함께 흰색에 등재 된 요소를 대체 할 수

Answer 2

:

<strong.*> becomes |strong| 

그런 다음 다른 모든 HTML을 제거합니다. onmouseover = "alert (1)"을 알고 있으므로 정말 간단하게하십시오.

또한 사용자 입력을 렌더링 할 때주의하십시오. 이것을 코드로 추가하지 마십시오. 대신 구문 분석하고 JavaScript를 사용하여 요소를 만듭니다. innerHTML은 사용하지 말고 .innerText 및 document.createElement()를 사용하십시오.