3. 웹 브라우저에서 데이터를 필터링 하는 방식을 사용할 수 있는데, 이는 웹 보안에서 중요한 것이라고 한다. 이때 외부 라이브러리를 사용할 수 있는 방법이 있다는데 장단점이 무엇일까? 이걸 사용함으로써 얻을 수 있는 보안이슈는 뭘까?
XSS 방어를 위한 외부 보안 라이브러리
MS의 AntiXSS, OWASP의 ESAPI 라이브러리, Naver의 Lucy XSS Filter 등이 있다.
장점 :
- XML 설정만으로 XSS 방어가 가능
- 비즈니스 레이어의 코드 수정이 발생하지 않는다.
- 개발자가 XSS 방어를 신경쓰지 않아도 된다
- XSS 방어가 누락되지 않는다
- 설정 파일 하나로 XSS 방어 절차가 파악됨
단점 :
- 파라미터명에 대해 관리가 필요
- 일괄 적용되어 전체가 영향 받으므로 정확한 필터링 룰 정의가 중요
- 100%는 없기에 단독 사용만으로는 부족할 수 있다.
생길 수 있는 보안 이슈 :
기본적인 기능들은 유용하나, 일일이 치환 로직을 추가해야했어서 조치가 누락되는 경우 혹은 공통 함수에 적용하여 필터링 하지 말아야할 파라미터에 적용되는 등의 단점이 생김. 추가 보안을 위한 라이브러리가 생산됨
✅ 참조
lucy-xss-servlet-filter로 XSS 예방하기
lucy-xss-servlet-filter
4. DOM 요소를 다루면서 innerHTML 사용을 지양해야한다는데 XSS 보안에 취약하기 때문이라고 한다. 이에 대해 조금 더 알아보자.
웹페이지 텍스트에 접근할 수 있는 3가지 속성과 그 차이
Javascript를 사용해 웹페이지 요소의 텍스트에 접근할 때 사용되는 3가지 속성이 있다. 이 셋의 차이점을 알아보자.
- Node.textContent
- Node.innerText
- Element.innerHTML
Node.textContent
Node 인터페이스의 textContent 속성은 노드와 그 자손의 텍스트 콘텐츠를 표현한다.
let text = someNode.textContent
someOtherNode.textContent = string⭐️ innerText와의 차이점
Node.textContent와 HTMLElement.innerText의 이름이 유사하긴 하지만, 중요한 차이가 있으므로 헷갈리면 안됨.
Element'의 속성으로, element내에서 사용자에게 보여지는 text값들을 가져오거나 설정할 수 있다.
textContent는script와style요소를 포함한 모든 요소의 콘텐츠를 가져오지만,innerText는 사람이 읽을 수 있는 요소만 처리함.textContent는 노드의 모든 요소를 반환함. 그에비해innerText는 스타일링을 고려하며, 숨겨진 요소의 텍스트는 반환하지 않음.innerText의 CSS 고려로 인해,innerText값을 읽으면 최신 계산값 반영을 위해 리플로우가 발생(자원 소모)
// innerHTML과 달리 text값만 다루기 때문에 html태그 사용 불가능
document.documentElement.innerText = "innerText"
// html태그를 넣으면 태그도 text값으로 인식하고
// <p>innerText</p> 문자열 그대로 적용함.
document.documentElement.innerText = "<p>innerText</p>"⭐️ innerHTML과의 차이점
Element.innerHTML는 Element의 속성으로, element내에 포함 된 HTML 또는 XML 마크업을 가져오거나 태그와 함께 입력하여 내용을 직접 설정. textContent는 이보다 HTML로 분석할 필요가 없다는 점, XSS공격의 위험이 없다는 점에서 성능이 더 좋다고 할 수 있음.
// html 코드와 함께 작성 가능
document.documentElement.innerHTML = "<p>innerHTML</p>"
// 스타일 적용
document.documentElement.innerHTML =
"<span style='color:blue'>innerHTML</span>"
// 이런 식으로 빈 문자열을 넣으면 body의 전체 내용을 지울 수 있다.
document.body.innerHTML = "";정리 🎶
Element.innerHTML은 요소 내에 있는 HTML과 XML 모두를 의미하고,
HTMLElement.innerText는 요소 내에서 사용자에게 보여지는 text를 의미하고,
Node.textContent는 script나 style 태그와 상관없이 해당 노드가 가지고 있는 text를 의미한다.
그리고 일반 텍스트를 삽입할 때는 Element.innerHTML 을 사용하지 않도록 권장한다(XSS 공격 위험). 그 대신 Node.textContent를 사용하자.
공격 예시
const name = "<img src='x' onerror='alert(1)'>";
el.innerHTML = name; // shows the alert✅ 참조
웹페이지를 다룰 때 주의해야 할 속성, innerHTML
Node.textContent - Mozilla
[JavaScript] innerHTML, innerText, textContent 차이
Element.innerHTML - Mozilla
