0

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

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

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

<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>
4

4 回答 4

2 
{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);
于 2010-04-20T21:16:48.340 回答
0

像这样逃跑&：&amp;

<input type="text" name="scrubtext" value="&amp;lt;script&amp;gt;alert('scrubbed');&amp;lt;/script&amp;gt;" id="scrubtext"/>
于 2010-04-20T21:02:26.697 回答
0

您可以使用以下方法将&字符更改为&amp

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

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

于 2010-04-20T21:17:14.647 回答
-1 
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;
}
于 2013-09-06T01:22:38.930 回答