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

发布于 2024-08-29 06:25:39 字数 1622 浏览 13 评论 0原文

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

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

原文

Is there a way in JavaScript or MooTools to retrieve the actual text in the value from an input element without the browser interpreting any html special entites? Please see the example included below. My desired outcome is:

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

Note that it works if I type/copy <script>alert('scrubbed');</script> directly into the text input box, but fails if I insert right after loading the page.

<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="<script>alert('scrubbed');</script>" 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>

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

心碎无痕… 2024-09-05 06:25:39

{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, '&').replace(/</g, '<').replace(/"/g, '"');
}

...

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);

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

That's your problem: you're taking a plain text string and adding it into HTML markup. Naturally any < characters in the text string will become markup, and you give yourself a potential client-side cross-site-scripting vulnerability.

You can HTML-escape, but there's no built-in function to do it in JS, so you have to define it yourself, eg.:

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

...

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

However, it is generally simpler to use DOM methods to add plain text without the bother of string hacking. I believe Moo would do it like this:

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

回复收藏 0 原文

岁月无声 2024-09-05 06:25:39

像这样转义 &：&

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

escape & like this: &

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

回复收藏 0 原文

╰沐子 2024-09-05 06:25:39

您可以使用加法将 & 字符更改为 &

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

：我会选择 bobince，因为它可以使用 DOM 节点属性，而不是注入任意 HTML。

You can change the & characters into & by using

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

Addition: I would go with bobince on the benefit of using the DOM node properties, instead of injecting arbitrary HTML.

回复收藏 0 原文

七月上 2024-09-05 06:25:39

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;
}

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;
}

回复收藏 0 原文

~没有更多了~