时间戳

首页 > 解决方案 > 是否有任何可以验证 html 的 Javascript 库？

javascript - 是否有任何可以验证 html 的 Javascript 库？

问题描述

我想要得到的非常简单：我的网站中有一个文本框，我可以在其中使用 html，当我按下“发送”按钮时，该文本框中的值被发送到网站。但有时用户来到站点，编写 html 并忘记关闭标签，例如，完全搞砸了我的站点。为了解决这个问题，我想要的只是一个验证器，当单击按钮时，它会检查所写的内容并检查是否有错误并提出解决 html 问题的解决方案。我已经看到像https://validator.w3.org/docs/api.html这样的平台完全符合我的要求，但我可以在自己的网站中使用它吗？

我尝试用 Javascript 自己做一些事情，但它非常复杂并且有很多问题。

可以请人帮助我吗？

标签： javascripthtmlvalidation

解决方案

第一件事。如果我没有指出从您的用户那里接受原始 HTML，一般来说，这不是一个好主意™ ，那么我将被重蹈覆辙。

不正确地执行此操作（正确地执行此操作是一项极其困难的任务）会使您的站点和您的用户面临许多漏洞。您可以在https://html5sec.org/上查看它们的部分列表（我说部分是因为它们只列出了“已知”的攻击媒介）。对于一个看似无关，但绝对是半相关的问题，有很多很好的答案，我强烈建议你通读一遍。

“但是@Pete！”，我听到你在哭，“我的用户是值得信赖的。他们不会试图点击劫持我的其他用户，或者做任何其他恶意或不愉快的事情！”

您可能会误以为使用您网站的每个人都不会是恶意的，或者甚至会使用浏览器将 HTML 提交到您的网站（所以不要忘记服务器端验证和清理）。

再说一次，您可能不会被欺骗，并且您的用户群只为您的网站提交安全的 HTML 具有既得利益。也许您已经考虑并实施了防弹的客户端和服务器端验证和清理例程。我不知道你的确切情况，我不会假装知道（尽管我知道这里涉及的概率对你不利）。

考虑到以上所有因素，如果您仍然坚持允许用户编写原始 HTML 并将其提交到您的网站，请考虑：

您也可以将用户的 HTML 转换为 DOM 元素（允许浏览器将 HTML 解析为实际的 DOM 元素），然后获取 [parsed] HTML 字符串： 

window.addEventListener('load', function () {
    var textarea = document.getElementById('unsafe-html');
    var button = document.getElementById('get-unsafe-html');
    var getUnsafeHtml = function getUnsafeHtml() {
        var div = document.createElement('div');
        div.innerHTML = textarea.value; // parses HTML to DOM elements
        return div.innerHTML; // gets it back in a string form.
    }
    
    
    button.addEventListener('click', function (e) {
        var unsafeHtml = getUnsafeHtml();
        console.log(unsafeHtml);
        
        e.preventDefault();
        return false;
    }, false);
}, false);
<textarea id="unsafe-html" rows="5">
    <p>If you <strong>insist</strong>, <i>then</i> this technique can be used as well.</p>
</textarea>
<button id="get-unsafe-html">Get the HTML</button>

这不会确保标记是用户想要的方式，但会确保您没有不匹配的标签（因为它们将被自动关闭或删除，具体取决于浏览器）。

推荐阅读