Проверить ввод HTML с помощью JavaScript

Question

Мне нужно проверить ввод HTML в веб-приложении с помощью JavaScript.

Что я сделал до сих пор, основываясь на этом вопросе : я использую стороннюю библиотеку, sanitize-html , чтобы очистить ввод и затем сравнить его с исходным.Если они различаются, Html недействителен.

const isValidHtml = (html: string): boolean => {
    let sanitized = sanitizeHtml(html, sanitizationConfig);
    sanitized = sanitized.replace(/\s/g, '').replace(/<br>|<br\/>/g, ''); // different browser's behavior for <br>
    html = html.replace(/\s/g, '').replace(/<br>|<br\/>/g, '');
    return sanitized === html;
}

Вышеупомянутый метод отлично работает с неэкранированным Html, но не с экранированным.

isValidHtml('<'); // false
isValidHtml('&lt;'); // true
isValidHtml('<script>'); // false
isValidHtml('&lt;script&gt;'); // true, this should be false also!!!

1. Я что-то упустил с этимметод?
2. Есть ли лучший способ выполнить эту задачу?

РЕДАКТИРОВАТЬ: Как подсказывает @brad в комментариях, я сначала попытался декодировать HTML:

decodeHtml(html: string): string {
    const txt = document.createElement('textarea');
    txt.innerHTML = html;
    const decodedHtml = txt.value;
    txt.textContent = null;
    return decodedHtml;
} 

и затем позвоните isValid(decodedHtml), я получил такой результат:

isValidHtml('<'); // false
isValidHtml('&lt;'); // false, this should be true!!!
isValidHtml('<script>'); // false
isValidHtml('&lt;script&gt;'); // false

Answer 1

Если вы на самом деле не пытаетесь проверить HTML и просто пытаетесь убедиться, что он в конечном итоге окажется действительным, я бы порекомендовал запустить его через анализатор DOM и вернуть HTML обратно, эффективно позволяя браузеру выполнять свою работу.для вас.

Не проверено, но что-то вроде этого:

const parser = new DOMParser();
const doc = parser.parseFromString(html, 'text/html');
console.log(doc.documentElement.innerHTML);

По сути, вы используете встроенный в браузер синтаксический анализ для обработки любых ошибок стандартным способом, который он в любом случае делает.Это создаст дерево узлов.Из этого дерева узлов вы генерируете HTML, который гарантированно будет действительным.

См. Также: https://developer.mozilla.org/en-US/docs/Web/API/DOMParser#Parsing_an_SVG_or_HTML_document