Question

对于我正在制作的脚本我让用户将文本插入到textarea中，此文本应包含“脏”html。我想取用户输入并“清理”它包含的html。所以假设用户插入以下字符串： <div class="traffic-light"> <div id="redlight" class="light red on"></div> <div id="yellowlight" class="light yellow"></div> <div id="greenlight" class="light green"></div> <button onclick="start()">Motion- Start!</button> </div> 我希望它输出如下： <h2 class='example' style='position:absolute;width:50px;'>Example</h2>

我设法制作了一个脚本来检测<h2>Example</h2>标签的使用并可以删除它，但如上所述，我不想完全删除它，只是“清理”它。我到目前为止的代码：

编辑：made a JSFiddle for easier(?) use

<h2>

我怎样才能最好地实现我打算做的事情？我已经尝试了我在这里，谷歌和JQuery网站上遇到的所有内容，但我找不到任何东西似乎做我需要它做的事情。

Answer 1

使该问题重复的页面解决方案容易受到恶意意图的脚本注入攻击。看看这个:(等待5s左右） ...在现实世界中 - 您不会收到警报框消息！

＆＃13;

var str = '<img id="ides" class="classname" src="http:\/\/asdf.jpg" onerror="(function(){alert(\'just executed a nasty script!\')})()"\/>';

var walk_the_DOM = function walk(node, func) {
    func(node);
    node = node.firstChild;
    while (node) {
        walk(node, func);
        node = node.nextSibling;
    }
};

var wrapper = document.createElement('div');

wrapper.innerHTML = str; 
  
walk_the_DOM(wrapper, function(el) {
    if(el.removeAttribute) {
        el.removeAttribute('id');
        el.removeAttribute('style');
        el.removeAttribute('class');
    }
});
result = wrapper.innerHTML;

//alert(result);

＆＃13;

这是我几年前编写的published函数，它可以满足您的要求以及更多......

function sterilize(HTMLString){ /* b.b. Troy III p.a.e. */
        HTMLString=HTMLString.replace( /<img /gi, "<imga ");
        var att, x=0, y, coll,c=[],
            probe = document.createElement("div");
            probe.innerHTML = HTMLString;
            coll = probe.getElementsByTagName("*");
        while(coll[x])coll[x]?c.push(coll[x++]):0;

        for( x in c )
        if( /(script|object|embed|iframe)/i.
        /*you can blacklist more tags here!*/
            test( c[x].tagName ) ){
            c[x].outerHTML="";
        } else {
        if( c[x].href)/java/.test(coll[x].protocol )?c[x].href="#":0;
            att = c[x].attributes;
        for( y in att ) if(att[y])
        if( /(^on|style)/i.test(att[y].name) )
            c[x].removeAttribute( att[y].name );
        }
        c=probe.innerHTML.replace( /imga/gi, "img" );
        return  c.replace( /<\/img>/gi, "" );
    }

p.s。：您不必删除它们非常安全的class或id属性。但由于您只需要完全干净的标签和标签 - 您可以使用以下升级。从附加的片段中获取它。

＆＃13;

function sterilize(HTMLString){ /* b.b. Troy III p.a.e. */
        HTMLString=HTMLString.replace( /<img /gi, "<imga ");
        var att, x=0, y, coll,c=[],
            probe = document.createElement("div");
            probe.innerHTML = HTMLString;
            coll = probe.getElementsByTagName("*");
        while(coll[x])coll[x]?c.push(coll[x++]):0;

        for( x in c )
        if( /(script|object|embed|iframe)/i.
        /*you can blacklist more tags here!*/
            test( c[x].tagName ) ){
            c[x].outerHTML="";
        } else {
        if( c[x].href)/java/.test(coll[x].protocol )?c[x].href="#":0;
            att = c[x].attributes;
        while(att.length)att.removeNamedItem(att[0].name);
        }
        c=probe.innerHTML.replace( /imga/gi, "img" );
        return  c.replace( /<\/img>/gi, "" );
    };

console.log( sterilize( form.outerHTML ) );

＆＃13;

<form id="form" onsubmit="return false;">
  <div id="leftContent">
    <textarea id="textarea" class="left" name="insertText">Insert text</textarea>
  </div>
  <div id="rightContent">
    <textarea readonly id="textarea" class="right" name="resultText">Result</textarea>
  </div>
  <div id="bottomContent">
    <input id="submit" type="submit" name="submit" value="Process Text"/>
  </div>
</form>

＆＃13;

Answer 2

您问题的一些指导原则。 1.使用ID操作输入文本。 2.使用ID作为唯一，您对两个输入使用了相同的ID。 3.最后，您可以使用Val（）清空值，或者为空，但您必须先为请求设置值。

如果它不是解决方案。 PLS。详述问题......

Answer 3

你解析输入到php？

<?php $clean = preg_replace("/<([a-z][a-z0-9]*)[^>]*?(\/?)>",'<$1$2>', $dirty); ?>

Answer 4

正如在此建议的那样：https://stackoverflow.com/a/12360574/1561148用户询问如何通过使用正则表达式来实现这一点，我的想法是遍历DOM并对每个元素使用removeAttribute()。

我不知道你的用例是什么，但也许也可以搜索HTML sanitization。我发现了这个：https://github.com/punkave/sanitize-html

JQuery字符串清理html

4 个答案: