JavaScript에서 문자열 살균

1. sanitize() 메서드를 사용하여 JavaScript에서 문자열을 삭제합니다.
2. DomPurify의 sanitize() 메서드를 사용하여 JavaScript에서 문자열을 삭제합니다.

이 기사에서는 소독에 대해 자세히 설명합니다. HTML에서 데이터를 삭제하거나 XSS 공격을 방지하는 데 사용되는 패키지도 자세히 설명합니다.

sanitize() 메서드를 사용하여 JavaScript에서 문자열을 삭제합니다.

웹 응용 프로그램은 종종 HTML 입력이 필요합니다. 그러나 XSS(교차 사이트 스크립팅) 공격을 받기 때문에 웹 페이지에 안전하게 표시하는 것은 어렵습니다.

Sanitizer 인터페이스의 sanitize() 메서드는 DOM 노드의 트리를 삭제하여 원치 않는 요소나 속성을 제거합니다. 프레임에서 Document 인스턴스를 삭제하는 경우와 같이 데이터가 이미 DOM 노드로 사용 가능한 경우에 사용해야 합니다.

기본 sanitizer() 구성은 스크립트 태그, 사용자 정의 요소 및 주석을 포함하여 XSS 관련 입력을 자동으로 제거합니다. 이 구성은 sanitizer() 생성자 옵션을 사용하여 사용자 정의할 수 있습니다.

통사론:

sanitize(input)

매개변수:

• input: 정리할 DocumentFragment 또는 Document일 수 있습니다.

반환 값:

• 반환 값은 삭제된 DocumentFragment입니다.

이제 id가 username인 iframe에서 데이터를 삭제합니다.

예:

const sanitizer = new Sanitizer();  // Default sanitizer;

// Get the frame and its Document object
const frame_element = document.getElementById('username')
const unsanitized_frame_tree = frame_element.contentWindow.document;

// Sanitize the document tree and update the frame.
const sanitized_frame_tree = sanitizer.sanitize(unsanitized_frame_tree);
frame_element.replaceChildren(sanitized_frame_tree);

DomPurify의 sanitize() 메서드를 사용하여 JavaScript에서 문자열을 삭제합니다.

DOMPurify는 매우 빠르고 과도하게 허용되는 HTML, MathML 및 SVG용 DOM 전용 XSS 새니타이저입니다. 또한 사용 및 시작이 간편합니다.

DOMPurify는 JavaScript로 제작되었으며 모든 최신 브라우저(Blink 또는 WebKit를 사용하는 Safari(10+), Opera(15+), Internet Explorer(10+), Edge, Firefox, Chrome 등)와 호환됩니다. MSIE6 또는 기타 이전 브라우저의 영향을 받지 않으며 폴백을 사용하거나 전혀 수행하지 않습니다.

자동화된 테스트는 이제 19개의 서로 다른 브라우저를 다루며 더 많은 브라우저를 따라야 합니다. 또한 Node.js v14.15.1, v15.4.0, v16.13.0, v17.0.0 및 이전 버전도 JSDOM에서 DOMPurify를 실행할 때 적용됩니다.

보안 전문가들은 온라인 공격 및 XSS에 대한 광범위한 경험을 바탕으로 DOMPurify를 만들었습니다.

DOMPurify가 하는 일

DOMPurify는 HTML을 정리하고 XSS 공격으로부터 보호합니다. 더러운 HTML이 포함된 문자열을 DOMPurify에 공급할 수 있으며, 달리 설정되지 않는 한 깨끗한 HTML이 포함된 문자열을 반환합니다.

DOMPurify는 유해한 HTML을 포함하는 모든 것을 제거합니다. 또한 비교적 빠릅니다.

브라우저의 기술을 가져와 XSS 필터로 변환하므로 브라우저가 더 빠르면 DOMPurify가 더 빠릅니다. 사용을 시작하려면 웹사이트에 DOMPurify를 포함하기만 하면 됩니다.

축소되지 않은 개발 버전 사용

<script type="text/javascript" src="src/pure.js"></script>

축소되고 테스트된 프로덕션 버전 사용

<script type="text/javascript" src="dist/pure.min.js"></script>

그런 다음, 다음 코드를 실행하여 문자열을 삭제할 수 있습니다.

let clean = DOMPurify.sanitize(dirty);

생성된 HTML은 innerHTML을 사용하여 DOM 요소에 작성하거나 document.write().를 사용하여 DOM에 직접 작성할 수 있습니다. 그것은 당신에게 달려 있습니다.

기본적으로 HTML, SVG 및 MathML을 허용한다는 점은 주목할 가치가 있습니다. 자주 사용되는 HTML만 필요한 경우 다음과 같이 쉽게 올릴 수 있습니다.

let clean = DOMPurify.sanitize(dirty, {USE_PROFILES: {html: true}});

HTML을 먼저 삭제한 다음 편집하면 삭제 혜택이 손실될 수 있음을 명심하십시오. 삭제 후 삭제된 마크업을 다른 라이브러리로 보내는 경우 라이브러리가 자체적으로 HTML을 방해하지 않는지 확인하세요.

마크업을 삭제한 후 DOMPurify.removed 속성을 보고 어떤 요소와 속성이 삭제되었는지 확인할 수 있습니다.

Require.js와 같은 AMD 모듈 로더를 사용하는 경우 이 스크립트를 비동기적으로 로드할 수 있습니다.

import DOMPurify from 'dompurify';

var clean = DOMPurify.sanitize(dirty);

DOMPurify는 Node.js와 함께 서버 측에서 그리고 Browserify 또는 동등한 번역기와 함께 클라이언트 측에서 모두 사용될 수 있습니다. Node.js 4.x 이상이 필요합니다.

DOMPurify는 활성으로 표시된 모든 버전을 지원하기 위한 것입니다. 동시에 유지 관리로 표시된 모든 버전에 대한 지원을 단계적으로 중단합니다.

DOMPurify는 유지 관리 중인 모든 버전에서 즉시 중단되지 않을 수 있지만 특정 이전 버전에 대한 테스트 실행을 중단합니다.

npm install dompurify

JSDOM v10 이상의 경우:

const createDOMPurify = require('dompurify');
const {JSDOM} = require('jsdom');

const window = new JSDOM('').window;
const DOMPurify = createDOMPurify(window);

const clean = DOMPurify.sanitize(dirty);

v10 이전 JSDOM 버전의 경우:

const createDOMPurify = require('dompurify');
const jsdom = require('jsdom').jsdom;

const window = jsdom('').defaultView;
const DOMPurify = createDOMPurify(window);

const clean = DOMPurify.sanitize(dirty);

DOMPurify가 지원하는 것

기본적으로 DOMPurify는 CSS 및 HTML 사용자 정의 데이터 속성을 지원합니다. Shadow DOM을 추가로 지원하고 DOM 템플릿을 재귀적으로 삭제합니다.

또한 문제를 일으키지 않고 JQuery $() 및 elm.html() API와 함께 사용하기 위해 HTML을 삭제합니다.