Question

在JavaScript或MooTools中是否有一种方法可以从输入元素中检索值中的实际文本而不需要浏览器解释任何html特殊的entites？请参阅下面的示例。我期望的结果是：

<div id="output">
   <p>Your text is: <b>[&lt;script&gt;alert('scrubbed');&lt;/script&gt;]</b></p>
</div>

请注意，如果我直接在文本输入框中键入/复制<script>alert('scrubbed');</script>，但如果我在加载页面后立即插入，则会失败。

<html>
<head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8">
    <title>scrubtest</title>
</head>
<body id="scrubtest" onload="">
    <script type="text/javascript" language="JavaScript" src="/js/mootools-core.js"></script>

    <input type="text" name="scrubtext" value="&lt;script&gt;alert('scrubbed');&lt;/script&gt;" id="scrubtext"/><br />
    <input type="button" value="Insert" onclick="insertText();"/><br />

    <input type="button" value="Get via MooTools" onclick="alert($('scrubtext').get('value'));"/><br />
    <input type="button" value="Get via JavaScript" onclick="alert(document.getElementById('scrubtext').value);"/><br />

    <div id="output">
    </div>

    <script type="text/javascript" charset="utf-8">
        function insertText()
        {
            var stext = $('scrubtext').get('value');
            var result = new Element( 'p', {html: "Your text is: <b>["+stext+"]</b>"} );
            result.inject($('output'));
        }
    </script>

</body>
</html>

Answer 1

{html: "Your text is: <b>["+stext+"]</b>"}

这是你的问题：你正在使用纯文本字符串并将其添加到HTML标记中。当然，文本字符串中的任何<字符都将成为标记，并且您可能会给自己留下潜在的客户端跨站点脚本漏洞。

你可以使用HTML转义，但是在JS中没有内置函数来执行它，所以你必须自己定义它，例如：

// HTML-encode a string for use in text content or an attribute value delimited by
// double-quotes
//
function HTMLEncode(s) {
    return s.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/"/g, '&quot;');
}

...

var result = new Element('p', {html: "Your text is: <b>["+HTMLEncode(stext)+"]</b>"});

然而，使用DOM方法添加纯文本通常更简单，而不需要麻烦的字符串黑客攻击。我相信Moo会这样做：

var bold= new Element('b', {text: stext});
var result= new Element('p', {text: 'Your text is: '});
bold.inject(result);

Answer 2

逃避&，如下所示：&

<input type="text" name="scrubtext" value="&amp;lt;script&amp;gt;alert('scrubbed');&amp;lt;/script&amp;gt;" id="scrubtext"/>

Answer 3

您可以使用

将&字符更改为&amp

var result = new Element( 'p', {html: "Your text is: <b>["+stext.replace(/&/g,'&amp')+"]</b>"} );

另外：我会使用bobince来使用DOM节点属性，而不是注入任意HTML。

Answer 4

function htmlspecialchars_decode(text)
{
var stub_object = new Element('span',{ 'html':text });
var ret_val = stub_object.get('text');
delete stub_object;
return ret_val;
}

如何在没有浏览器解释html特殊实体的情况下检索输入值？

4 个答案: