Как получить значение ввода без браузера, интерпретирующего специальные HTML-объекты? - PullRequest
Новая
       5

Как получить значение ввода без браузера, интерпретирующего специальные HTML-объекты?

0 голосов
/ 21 апреля 2010

Есть ли способ в 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 ]

2 голосов
/ 21 апреля 2010 
{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 для добавления простого текста без необходимости взлома строк. Я верю, что Му сделает это так: 

var bold= new Element('b', {text: stext});
var result= new Element('p', {text: 'Your text is: '});
bold.inject(result);
0 голосов
/ 06 сентября 2013 
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 голосов
/ 21 апреля 2010

Вы можете изменить символы & на &amp, используя 

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

Дополнение: я хотел бы пойти с bobince на пользу использования свойств узла DOM вместо введения произвольного HTML.

0 голосов
/ 21 апреля 2010

побег & как это: &amp;

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