Сохраненная поддержка XSS с богатыми текстовыми комментариями с использованием DocumentFragment и innerHTML

Question

Интересно, сможет ли кто-нибудь подтвердить, безопасно это или нет, поскольку я не могу найти ссылку в Интернете, а также еще один вопрос о SO, который специально занимается этим «решением» для XSS.

Мне нужно вставлять комментарии богатого текста на мою страницу. Очевидно, что риски XSS высоки, поэтому мой план состоял в том, чтобы innerHTML был временным DIV в DocumentFragment, а затем реорганизовал дерево, используя предопределенный белый список имен тегов и имена атрибутов, которые я считал «безопасными», удалив любые небезопасные. Затем я могу перенести этот безопасный HTML-код в мой настоящий документ.

Это безопасный способ сделать это? Можно ли каким-либо образом запустить XSS-атаку, выполнив это с помощью DocumentFragment? Я надеюсь, что он будет изолирован от реального документа и, следовательно, защищен от запуска пользовательских событий, который может начать любые атаки.

Answer 1

Я бы не рекомендовал писать собственную библиотеку анти-XSS, так как злонамеренные пользователи должны знать, какой эксплойт вы не учли. Я бы рекомендовал использовать стороннюю библиотеку, например Google Caja HTML Sanitiser.

Посмотрев на свое пере, ее код по-прежнему уязвим, если < и > тегов экранируются:

var unsafe = '\u003Cimg src=1 onerror=alert(\u0027XSS_attack_in_progress\u0027)\u003E', 
 
    //var unsafe = '<h3>Hello</h3><h4>World</h4>', 
 
    whitelistTags = ['h1', 'h2', 'h3', 'b', 'i', 'em', 'strong', 'u'], 
 
    testNode = document.getElementById('testNode'); 
 

 
makeSafeAndAddToDoc(unsafe, testNode); 
 

 
function makeSafeAndAddToDoc(unsafe, targetParent) { 
 
    var safeDocFrag = document.createDocumentFragment(), 
 
    containerDiv = safeDocFrag.appendChild(document.createElement("DIV")), 
 
    nextChild; 
 
    containerDiv.innerHTML = unsafe; 
 
    while ((nextChild = containerDiv.firstChild)) { 
 
    if (isSafe(nextChild)) { 
 
     safeDocFrag.appendChild(containerDiv.firstChild); 
 
     console.debug(safeDocFrag.children); 
 
    } else { 
 
     containerDiv.removeChild(nextChild); 
 
    } 
 
    } 
 
    safeDocFrag.removeChild(containerDiv); 
 
    targetParent.appendChild(safeDocFrag); 
 
} 
 

 
function isSafe(testNode) { 
 
    var tag = testNode.tagName && testNode.tagName.toLowerCase(), 
 
    isTextNode = testNode.nodeType === 3; 
 
    if (!isTextNode && whitelistTags.indexOf(tag) === -1) { 
 
    console.warn('Removing unsafe element: ', testNode.tagName); 
 
    return false; 
 
    } 
 
    for (var i = 0; i < testNode.childNodes.length; i++) { 
 
    if (!isSafe(testNode.childNodes[i])) { 
 
     testNode.removeChild(testNode.childNodes[i]); 
 
     i--; 
 
    } 
 
    } 
 
    return true; 
 
}

#testNode { 
 
    min-width: 10px; 
 
    min-height: 10px; 
 
    border: 1px solid red; 
 
}

<div id="testNode"></div>