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

追加: 任意の HTML を挿入する代わりに、DOM ノードのプロパティを使用するメリットがあるので、bobince を使用します。

于 2010-04-20T21:17:14.647 に答える