클라이언트 측에서 HTML 삭제 / 재 작성

도메인 간 요청을 통해로드 된 외부 리소스를 표시하고 " 안전한 "콘텐츠 만 표시해야 합니다.

Prototype의 String # stripScripts 를 사용하여 스크립트 블록을 제거 할 수 있습니다 . 그러나 onclick또는 같은 핸들러 onerror는 여전히 존재합니다.

적어도 할 수있는 도서관이 있습니까?

• 스트립 스크립트 블록,
• DOM 핸들러를 죽이고,
• 검은 색으로 나열된 태그를 제거합니다 (예 : embed또는 object).

그렇다면 JavaScript 관련 링크와 예제가 있습니까?

2016 년 업데이트 : 이제 Caja 새니 타이 저를 기반으로 하는 Google Closure 패키지가 있습니다.

더 깨끗한 API를 가지고 있으며 최신 브라우저에서 사용 가능한 API를 고려하여 재 작성되었으며 Closure Compiler와 더 잘 상호 작용합니다.

뻔뻔한 플러그 : 철저하게 검토 된 클라이언트 측 html 새니 타이 저에 대해서는 caja / plugin / html-sanitizer.js 를 참조하십시오 .

블랙리스트가 아닌 화이트리스트에 있지만 화이트리스트는 CajaWhitelists에 따라 구성 할 수 있습니다.

모든 태그를 제거하려면 다음을 수행하십시오.

var tagBody = '(?:[^"\'>]|"[^"]*"|\'[^\']*\')*';

var tagOrComment = new RegExp(
    '<(?:'
    // Comment body.
    + '!--(?:(?:-*[^->])*--+|-?)'
    // Special "raw text" elements whose content should be elided.
    + '|script\\b' + tagBody + '>[\\s\\S]*?</script\\s*'
    + '|style\\b' + tagBody + '>[\\s\\S]*?</style\\s*'
    // Regular name
    + '|/?[a-z]'
    + tagBody
    + ')>',
    'gi');
function removeTags(html) {
  var oldHtml;
  do {
    oldHtml = html;
    html = html.replace(tagOrComment, '');
  } while (html !== oldHtml);
  return html.replace(/</g, '&lt;');
}

사람들은 당신이 요소를 생성하고 할당 할 수 있음을 알려드립니다 innerHTML다음을 얻을 innerText또는 textContent점에서 엔티티를하고 탈출. 그거 하지마. 노드가 DOM에 연결되지 않은 경우에도 핸들러 <img src=bogus onerror=alert(1337)>를 실행 하므로 XSS 주입에 취약합니다 onerror.

Google Caja HTML 새니 타이 저는 웹 작업자 에 삽입하여 '웹 지원'으로 만들 수 있습니다 . 새니 타이 저에 의해 도입 된 모든 전역 변수는 작업자 내에 포함되며 자체 스레드에서 처리가 수행됩니다.

웹 워커를 지원하지 않는 브라우저의 경우 새니 타이 저가 작동 할 별도의 환경으로 iframe을 사용할 수 있습니다. Timothy Chien에는 웹 워커를 시뮬레이션하기 위해 iframe을 사용하여이 부분을 수행 하는 폴리 필 이 있습니다.

Caja 프로젝트에는 Caja를 독립형 클라이언트 측 새니 타이 저로 사용하는 방법 에 대한 위키 페이지 가 있습니다 .

• 소스를 확인한 다음 실행하여 빌드하십시오. ant
• 페이지에 html-sanitizer-minified.js또는 포함html-css-sanitizer-minified.js
• 요구 html_sanitize(...)

작업자 스크립트는 다음 지침 만 따르면됩니다.

importScripts('html-css-sanitizer-minified.js'); // or 'html-sanitizer-minified.js'

var urlTransformer, nameIdClassTransformer;

// customize if you need to filter URLs and/or ids/names/classes
urlTransformer = nameIdClassTransformer = function(s) { return s; };

// when we receive some HTML
self.onmessage = function(event) {
    // sanitize, then send the result back
    postMessage(html_sanitize(event.data, urlTransformer, nameIdClassTransformer));
};

(심 워커 라이브러리를 작동 시키려면 더 많은 코드가 필요하지만이 토론에서는 중요하지 않습니다.)

데모 : https://dl.dropbox.com/u/291406/html-sanitize/demo.html

클라이언트를 신뢰하지 마십시오. 서버 애플리케이션을 작성하는 경우 클라이언트가 항상 비위생적 인 악성 데이터를 제출한다고 가정합니다. 그것은 당신을 문제로부터 지켜줄 경험의 법칙입니다. 가능한 경우 서버 코드에서 모든 유효성 검사 및 위생 처리를 수행하는 것이 좋습니다. 서버 측 웹 애플리케이션을 클라이언트 측 코드의 프록시로 사용할 수 있습니다. 클라이언트 측 코드는 제 3 자에서 가져 와서 클라이언트 자체로 보내기 전에 위생 처리를합니다.

죄송합니다. 질문을 오해했습니다. 그러나 나는 나의 충고를지지한다. 사용자에게 보내기 전에 서버에서 살균하면 사용자가 더 안전 할 것입니다.

이제 모든 주요 브라우저 샌드 박스 iframe을 지원하는, 내가하는 훨씬 간단한 방법이 생각 안전 할 수는. 이런 종류의 보안 문제에 더 익숙한 사람들이이 답변을 검토 할 수 있다면 좋겠습니다.

참고 :이 방법은 IE 9 및 이전 버전에서는 작동하지 않습니다. 샌드 박싱을 지원하는 브라우저 버전 은 이 표 를 참조하십시오 . (참고 : 표에는 Opera Mini에서 작동하지 않는다고 표시되어 있지만 방금 시도했지만 작동했습니다.)

아이디어는 JavaScript가 비활성화 된 숨겨진 iframe을 만들고 신뢰할 수없는 HTML을 붙여넣고 파싱하도록하는 것입니다. 그런 다음 DOM 트리를 살펴보고 안전한 것으로 간주되는 태그와 속성을 복사 할 수 있습니다.

여기에 표시된 화이트리스트는 예시 일뿐입니다. 화이트리스트에 가장 좋은 것은 애플리케이션에 따라 다릅니다. 태그 및 속성의 화이트리스트보다 더 정교한 정책이 필요한 경우,이 예제 코드는 아니지만이 방법으로 수용 할 수 있습니다.

var tagWhitelist_ = {
  'A': true,
  'B': true,
  'BODY': true,
  'BR': true,
  'DIV': true,
  'EM': true,
  'HR': true,
  'I': true,
  'IMG': true,
  'P': true,
  'SPAN': true,
  'STRONG': true
};

var attributeWhitelist_ = {
  'href': true,
  'src': true
};

function sanitizeHtml(input) {
  var iframe = document.createElement('iframe');
  if (iframe['sandbox'] === undefined) {
    alert('Your browser does not support sandboxed iframes. Please upgrade to a modern browser.');
    return '';
  }
  iframe['sandbox'] = 'allow-same-origin';
  iframe.style.display = 'none';
  document.body.appendChild(iframe); // necessary so the iframe contains a document
  iframe.contentDocument.body.innerHTML = input;

  function makeSanitizedCopy(node) {
    if (node.nodeType == Node.TEXT_NODE) {
      var newNode = node.cloneNode(true);
    } else if (node.nodeType == Node.ELEMENT_NODE && tagWhitelist_[node.tagName]) {
      newNode = iframe.contentDocument.createElement(node.tagName);
      for (var i = 0; i < node.attributes.length; i++) {
        var attr = node.attributes[i];
        if (attributeWhitelist_[attr.name]) {
          newNode.setAttribute(attr.name, attr.value);
        }
      }
      for (i = 0; i < node.childNodes.length; i++) {
        var subCopy = makeSanitizedCopy(node.childNodes[i]);
        newNode.appendChild(subCopy, false);
      }
    } else {
      newNode = document.createDocumentFragment();
    }
    return newNode;
  };

  var resultElement = makeSanitizedCopy(iframe.contentDocument.body);
  document.body.removeChild(iframe);
  return resultElement.innerHTML;
};

여기서 시도해 볼 수 있습니다 .

이 예제에서는 스타일 속성과 태그를 허용하지 않습니다. 허용했다면 CSS를 구문 분석하고 목적에 맞는지 확인하고 싶을 것입니다.

여러 최신 브라우저 (Chrome 40, Firefox 36 베타, IE 11, Android 용 Chrome)와 이전 브라우저 (IE 8)에서이를 테스트하여 스크립트를 실행하기 전에 구제되었는지 확인했습니다. 나는 그것에 문제가있는 브라우저가 있는지, 아니면 내가 간과하고있는 어떤 엣지 케이스가 있는지 알고 싶다.

어떤 브라우저가 블랙리스트를 벗어나기 위해 어딘가에 넘어갈 수있는 모든 이상한 유형의 잘못된 마크 업을 예상 할 수는 없으므로 블랙리스트에 올리지 마십시오. 스크립트 / 임베딩 / 객체 및 처리기보다 제거해야 할 구조 가 더 많습니다 .

대신 HTML을 계층 구조의 요소 및 속성으로 구문 분석 한 다음 가능한 최소 허용 목록에 대해 모든 요소 및 속성 이름을 실행하십시오. 또한 허용 된 URL 속성을 허용 목록과 비교하여 확인하십시오 (JavaScript :보다 더 위험한 프로토콜이 있음을 기억하십시오).

입력이 잘 구성된 XHTML 인 경우 위의 첫 번째 부분이 훨씬 쉽습니다.

항상 HTML 삭제를 피할 수있는 다른 방법을 찾을 수 있다면 대신 그렇게하십시오. 많은 잠재적 인 구멍이 있습니다. 몇 년이 지난 후에도 주요 웹 메일 서비스가 여전히 악용을 발견하고 있다면 무엇이 더 잘할 수 있다고 생각합니까?

그래서, 2016 년이고 저는 우리 중 많은 사람들이 npm지금 우리 코드에서 모듈을 사용하고 있다고 생각 합니다. sanitize-htmlnpm의 주요 옵션처럼 보이지만 다른 옵션이 있습니다 .

이 질문에 대한 다른 답변은 자신을 롤링하는 방법에 대한 훌륭한 정보를 제공하지만 잘 테스트 된 커뮤니티 솔루션이 아마도 가장 좋은 답변 일 수있을만큼 까다로운 문제입니다.

설치하려면 명령 줄에서 다음을 실행하십시오. npm install --save sanitize-html

ES5 : var sanitizeHtml = require('sanitize-html'); // ... var sanitized = sanitizeHtml(htmlInput);

ES6 : import sanitizeHtml from 'sanitize-html'; // ... let sanitized = sanitizeHtml(htmlInput);

[면책 조항 : 저자 중 한 명입니다]

우리는이 "웹 전용"이 오픈 소스 라이브러리 (즉, "브라우저가 필요합니다") 쓴 https://github.com/jitbit/HtmlSanitizer을 그 모두 제거 tags/attributes/styles은 "화이트리스트"을 제외한.

용법:

var input = HtmlSanitizer.SanitizeHtml("<script> Alert('xss!'); </scr"+"ipt>");

PS는 브라우저를 사용하여 DOM을 구문 분석하고 조작하기 때문에 "순수 JavaScript"솔루션보다 훨씬 빠르게 작동합니다. "순수 JS"솔루션에 관심이 있으시면 https://github.com/punkave/sanitize-html (제휴되지 않음)을 사용해보십시오.

위에서 제안한 Google Caja 라이브러리는 웹 응용 프로그램 (브라우저에서 실행)을 위해 구성하고 내 프로젝트에 포함하기에는 너무 복잡했습니다. 대신 CKEditor 구성 요소를 이미 사용하고 있기 때문에 구성이 훨씬 더 쉬운 내장 HTML 삭제 및 화이트리스트 기능을 사용했습니다. 따라서 숨겨진 iframe에 CKEditor 인스턴스를로드하고 다음과 같은 작업을 수행 할 수 있습니다.

CKEDITOR.instances['myCKEInstance'].dataProcessor.toHtml(myHTMLstring)

당연히, 프로젝트에서 CKEditor를 사용하지 않는 경우 구성 요소 자체가 약 0.5MB (최소화)이기 때문에 약간의 과잉 일 수 있지만 소스가있는 경우 코드를 분리 할 수 ​​있습니다. 화이트리스트 ( CKEDITOR.htmlParser?)를 추가하고 훨씬 더 짧게 만듭니다.

http://docs.ckeditor.com/#!/api

http://docs.ckeditor.com/#!/api/CKEDITOR.htmlDataProcessor

나는 당신의 삶에서 틀을 없애는 것을 추천합니다. 그것은 장기적으로 당신을 위해 지나치게 쉽게 만들 것입니다.

cloneNode : 노드를 복제하면 모든 속성과 해당 값 이 복사 되지만 이벤트 리스너 는 복사 되지 않습니다 .

https://developer.mozilla.org/en/DOM/Node.cloneNode

다음은 내가 트리 워커를 한동안 사용해 왔지만 테스트되지 않았으며 JavaScript에서 가장 저평가 된 부분 중 하나입니다. 크롤링 할 수있는 노드 유형 목록은 다음과 같습니다. 일반적으로 SHOW_ELEMENT 또는 SHOW_TEXT를 사용 합니다.

http://www.w3.org/TR/DOM-Level-2-Traversal-Range/traversal.html#Traversal-NodeFilter

function xhtml_cleaner(id)
{
 var e = document.getElementById(id);
 var f = document.createDocumentFragment();
 f.appendChild(e.cloneNode(true));

 var walker = document.createTreeWalker(f,NodeFilter.SHOW_ELEMENT,null,false);

 while (walker.nextNode())
 {
  var c = walker.currentNode;
  if (c.hasAttribute('contentEditable')) {c.removeAttribute('contentEditable');}
  if (c.hasAttribute('style')) {c.removeAttribute('style');}

  if (c.nodeName.toLowerCase()=='script') {element_del(c);}
 }

 alert(new XMLSerializer().serializeToString(f));
 return f;
}


function element_del(element_id)
{
 if (document.getElementById(element_id))
 {
  document.getElementById(element_id).parentNode.removeChild(document.getElementById(element_id));
 }
 else if (element_id)
 {
  element_id.parentNode.removeChild(element_id);
 }
 else
 {
  alert('Error: the object or element \'' + element_id + '\' was not found and therefore could not be deleted.');
 }
}