如何使实时HTML预览文本区域免受HTML /脚本注入的影响

Question

我把这里作为最后的手段。我已经搜索了谷歌，但我在找到解决方案时遇到了麻烦。我有一个带有文本区域元素的表单，它允许您在该区域中键入 html，如果您激活了预览模式，它将在您键入时实时呈现 HTML 标记。与StackOverflow在新帖子下方显示预览的方式没有太大区别。

但是，我最近发现我的功能存在漏洞。我所要做的就是输入类似的东西：

</textarea>
<script>alert("Hello World!");</script>
<textarea style="display: none;"> 

这不仅是从文本区域中实时运行的，如果您保存表单并在不同的页面上重新加载所述数据，则此代码仍然在所述不同页面上的文本区域中执行，但用户不知道;对他们来说，所有看到的都是文本区域(如果显然没有警报)。

我找到了这篇文章;使用 javascript html 实时预览文本区域输入，并尝试将我的 JS 重构为那里接受的答案，因为我注意到我无法在 JSFiddle 示例中编写脚本标记，尽管这可能是一些 JSFiddle 阻止了这种行为，但我无法让它在我的 JS 文件中工作。

这几行是我用来实时渲染 HTML 标记的：

$(".main").on("keyup", "#actualTextArea", function () {
$('#previewTextArea').html($('#actualTextArea').val());
});
$(".main").on("keydown", "#actualTextArea", function () {
$('#previewTextArea').html($('#actualTextArea').val());
});

有没有办法重构它以确保安全？我目前唯一的想法是擦除实时预览并使用切换开关进行编码，但我真的认为这是一个很酷的功能，并希望保持实时而不是切换。有没有办法"实时编码"它或转义某些标签或其他东西？

Answer 1

为了清理文本区域预览，只需将所有<和>替换为其 html 字符代码等效项：

function showPreview()
{
var value = $('#writer').val().trim();
value = value.replace("<", "&lt;");
value = value.replace(">", "&gt;");
$('#preview').html(value);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<textarea id="writer" onInput="showPreview();">
</textarea>
<br/>
<hr/>
<div id="preview">
</div>

Answer 2

编辑：实际上，我认为这个解决方案更干净一些，并且不需要下面的代码。在速度页面中，所需要的只是利用Spring框架。所以我用这样替换文本区域：

#springBindEscaped("myJavaObj.textAreaText" true)
<textarea id="actualTextArea" name="${status.expression}" class="myClass" rows="10" cols="120">$!status.value</textarea>

这与一些后端 Java 验证相结合，最终成为一个更干净的解决方案。

但是，如果您想要一个非弹簧/速度解决方案，那么下面的解决方案就可以了

---

我拼凑了一个快速修复，因为我的主要目的是消除其他人轻松执行脚本的能力。这并不理想，我并不是说这是最好的答案，所以如果有人找到更好的解决方案，请分享。我创建了一个"清理"功能，如下所示：

function sanitize(text){
var sanitized = text.replace("<script>", "");
sanitized = sanitized.replace("</script>", "");
return sanitized;
}

然后，前两个事件处理程序现在如下所示：

$(".main").on("keyup", "#actualTextArea", function () {
var textAreaMarkup = $('#actualTextArea').val();
var sanitizedMarkup = sanitize(textAreaMarkup );
$('#actualTextArea').val(sanitizedMarkup);
$('#previewTextArea').html(sanitizedMarkup);
});
// This one can remain unchanged and infact needs to be
// If it's the same as above it will wipe the text area
//  on a highlight-backspace
$(".main").on("keydown", "#actualTextArea", function () {
$('#previewTextArea').html($('#actualTextArea').val());
});

除了Java端的卫生措施外，还可以防止数据库中存储任何有害的东西，这符合我的目的，但是如果存在更好的解决方案，我非常愿意接受。