Javascript 如何允许输入HTML标记而不易受XSS攻击？

我知道

标记在XSS中是无害的，但经过测试后，我发现如果向其添加onclick脚本标记，则可以对其进行操作，例如

Hello

---

如何在这些低级元素上防止XSS？

获取输入并输入一个变量，比如：

$output

$output = preg_replace('/(<[^>]+) onclick=".*?"/i', '$1', $input);

---

最好对此使用正则表达式：

 <?php
$testStringA = '<b>I am a nice text without any evil characters</b>';
$testStringB = '<b onclick="alert(evil)">I am supposed to be evil. :) </b>';
$pattern = '/<b>[a-zA-z0-9 ]+<\/b>/';
if(preg_match($pattern, $testStringB)){
    // this will NOT execute
    echo "TeststringB matches our pattern";
}
if(preg_match($pattern, $testStringA)){
    echo "TeststringA matches our pattern";
}
?>

但是，上面的正则表达式只允许a-z、a-z、0-9和空格（请参见方括号），您需要修改它以满足您的需要

如果您使用的是Javascript:

正则表达式的优点是，在某种程度上，它们是可移植的。我已经用JavaScript重写了上述代码，以使您更容易理解：

var re = new RegExp("/<b>[a-zA-z0-9 ]+<\/b>/");
var testStringA = '<b>I am a nice text without any evil characters</b>';
var testStringB = '<b onclick="alert(evil)">I am supposed to be evil. :) </b>';
if(re.test(testStringA)){
    alert(testStringA);
}
if(re.test(testStringB)){
    alert(testStringB);
}

var re=new RegExp（“/[a-zA-z0-9]+/”；
var testStringA='我是一个没有任何邪恶字符的好文本'；
var testStringB='我应该是邪恶的。'；
if（重新测试（testStringA））{
警报（testStringA）；
}
if（重新测试（testStringB））{
警报（testStringB）；
}

---

或者查看以下内容：

此函数可能对某些人有所帮助，它是一个Javascript函数，用于从字符串中删除XSS属性

function strip_attr(e){
var r = e.replace(/(<[^>]+) onclick=".*?"/i,"$1");
r = r.replace(/(<[^>]+) onfocus=".*?"/i,"$1");
r = r.replace(/(<[^>]+) ondblclick=".*?"/i,"$1");
r = r.replace(/(<[^>]+) style=".*?"/i,"$1");
r = r.replace(/(<[^>]+) onmousedown=".*?"/i,"$1");
r = r.replace(/(<[^>]+) onmouseout=".*?"/i,"$1");
r = r.replace(/(<[^>]+) onmouseover=".*?"/i,"$1");
r = r.replace(/(<[^>]+) onmouseup=".*?"/i,"$1");    
r = r.replace(/(<[^>]+) onclick=.*?/i,"$1");
r = r.replace(/(<[^>]+) onfocus=.*?/i,"$1");
r = r.replace(/(<[^>]+) ondblclick=.*?/i,"$1");
r = r.replace(/(<[^>]+) style=.*?/i,"$1");
r = r.replace(/(<[^>]+) onmousedown=.*?/i,"$1");
r = r.replace(/(<[^>]+) onmouseout=.*?/i,"$1");
r = r.replace(/(<[^>]+) onmouseover=.*?/i,"$1");
r = r.replace(/(<[^>]+) onmouseup=.*?/i,"$1");
r = r.replace(/(<[^>]+) onclick='.*?'/i,"$1");
r = r.replace(/(<[^>]+) onfocus='.*?'/i,"$1");
r = r.replace(/(<[^>]+) ondblclick='.*?'/i,"$1");
r = r.replace(/(<[^>]+) style='.*?'/i,"$1");
r = r.replace(/(<[^>]+) onmousedown='.*?'/i,"$1");
r = r.replace(/(<[^>]+) onmouseout='.*?'/i,"$1");
r = r.replace(/(<[^>]+) onmouseover='.*?'/i,"$1");
r = r.replace(/(<[^>]+) onmouseup='.*?'/i,"$1");
return r.replace(/(<[^>]+) class=".*?"/i,"$1").replace(/(<[^>]+) class='.*?'/i,"$1").replace(/(<[^>]+) class=.*?/i,"$1");
}

功能条属性（e）{
var r=e.replace（/（]+）onclick=“.*”/i，“$1”）；
r=r.replace（/（]+）onfocus=“.*”？/i，“$1”）；
r=r.replace（/（]+）ondblclick=“.*”？/i，“$1”）；
r=r.replace（/（]+）style=“.*？”/i，$1”）；
r=r.replace（/（]+）onmousedown=“.*？”/i，“$1”）；
r=r.replace（/（]+）onmouseout=“.*”/i，“$1”）；
r=r.replace（/（]+）onmouseover=“.*”/i，“$1”）；
r=r.replace（/（]+）onmouseup=“.*？”/i，“$1”）；
r=r.replace（/（]+）onclick=.*？/i，“$1”）；
r=r.replace（/（]+）onfocus=.*？/i，“$1”）；
r=r.replace（/（]+）ondblclick=.*？/i，“$1”）；
r=r.replace（/（]+）style=.*？/i，“$1”）；
r=r.replace（/（]+）onmousedown=.*？/i，“$1”）；
r=r.replace（/（]+）onmouseout=.*？/i，“$1”）；
r=r.replace（/（]+）onmouseover=.*？/i，“$1”）；
r=r.replace（/（]+）onmouseup=.*？/i，“$1”）；
r=r.replace（/（]+）onclick='.'？'/i，“$1”）；
r=r.replace（/（]+）onfocus='.*？'/i，“$1”）；
r=r.replace（/（]+）ondblclick='.'？'/i，“$1”）；
r=r.replace（/（]+）style='.'？'/i，“$1”）；
r=r.replace（/（]+）onmousedown='.'？'/i，“$1”）；
r=r.replace（/（]+）onmouseout='.'？'/i，“$1”）；
r=r.replace（/（]+）onmouseover='.'？'/i，“$1”）；
r=r.replace（/（]+）onmouseup='.'？'/i，“$1”）；
返回r.replace（/（]+）class=“.*”？/i，“$1”）。replace（/（]+）class='.*？”/i，“$1”）。replace（/（]+）class=.*？/i，“$1”）；
}

编辑
添加了安全性的脚本的PHP变体

function strip_attr($e){
$r = preg_replace('/(<[^>]+) onclick=".*?"/i','$1',$e);
$r = preg_replace('/(<[^>]+) onfocus=".*?"/i','$1',$r);
$r = preg_replace('/(<[^>]+) ondblclick=".*?"/i','$1',$r);
$r = preg_replace('/(<[^>]+) style=".*?"/i','$1',$r);
$r = preg_replace('/(<[^>]+) onmousedown=".*?"/i','$1',$r);
$r = preg_replace('/(<[^>]+) onmouseout=".*?"/i','$1',$r);
$r = preg_replace('/(<[^>]+) onmouseover=".*?"/i','$1',$r);
$r = preg_replace('/(<[^>]+) onmouseup=".*?"/i','$1',$r);

$r = preg_replace('/(<[^>]+) onclick=.*?/i','$1',$r);
$r = preg_replace('/(<[^>]+) onfocus=.*?/i','$1',$r);
$r = preg_replace('/(<[^>]+) ondblclick=.*?/i','$1',$r);
$r = preg_replace('/(<[^>]+) style=.*?/i','$1',$r);
$r = preg_replace('/(<[^>]+) onmousedown=.*?/i','$1',$r);
$r = preg_replace('/(<[^>]+) onmouseout=.*?/i','$1',$r);
$r = preg_replace('/(<[^>]+) onmouseover=.*?/i','$1',$r);
$r = preg_replace('/(<[^>]+) onmouseup=.*?/i','$1',$r);

$r = preg_replace("/(<[^>]+) onclick='.*?'/i","$1",$r);
$r = preg_replace("/(<[^>]+) onfocus='.*?'/i","$1",$r);
$r = preg_replace("/(<[^>]+) ondblclick='.*?'/i","$1",$r);
$r = preg_replace("/(<[^>]+) style='.*?'/i","$1",$r);
$r = preg_replace("/(<[^>]+) onmousedown='.*?'/i","$1",$r);
$r = preg_replace("/(<[^>]+) onmouseout='.*?'/i","$1",$r);
$r = preg_replace("/(<[^>]+) onmouseover='.*?'/i","$1",$r);
$r = preg_replace("/(<[^>]+) onmouseup='.*?'/i","$1",$r);
return preg_replace("/(<[^>]+) class='.*?'/i","$1",$r);
}

功能条属性（$e）{
$r=preg_replace（'/（]+）onclick=“.*？”/i'、'$1'、$e）；
$r=preg_replace（'/（]+）onfocus=“.*？”/i'、'$1'、$r）；
$r=preg_replace（'/（]+）ondblclick=“.*”？/i'，“$1'，$r）；
$r=preg_replace（“/（]+）style=“.*”？/i“，“$1”和$r）；
$r=preg_replace（'/（]+）onmousedown=“.*？”/i'，'$1'，$r）；
$r=preg_replace（'/（]+）onmouseout=“.*？”/i'，'$1'，$r）；
$r=preg_replace（'/（]+）onmouseover=“.*”/i'，“$1'，$r）；
$r=preg_replace（'/（]+）onmouseup=“.*？”/i'，'$1'，$r）；
$r=preg_replace（'/（]+）onclick=.*？/i'，'$1'，$r）；
$r=preg_replace（'/（]+）onfocus=.*？/i'，'$1'，$r）；
$r=preg_replace（'/（]+）ondblclick=.*？/i'，'$1'，$r）；
$r=preg_replace（'/（]+）style=.*？/i'，'$1'，$r）；
$r=preg_replace（'/（]+）onmousedown=.*？/i'，'$1'，$r）；
$r=preg_replace（'/（]+）onmouseout=.*？/i'，'$1'，$r）；
$r=preg_replace（'/（]+）onmouseover=.*？/i'，'$1'，$r）；
$r=preg_replace（'/（]+）onmouseup=.*？/i'，'$1'，$r）；
$r=preg_replace（“/（]+）onclick='.'？'/i'，“$1”，$r）；
$r=preg_replace（“/（]+）onfocus='.'？'/i'，“$1”，$r）；
$r=preg_replace（“/（]+）ondblclick='.'？'/i'，“$1”，$r）；
$r=preg_replace（“/（]+）style='.*？'/i'，“$1”，$r）；
$r=preg_replace（“/（]+）onmousedown='.'？'/i'，“$1”，$r）；
$r=preg_replace（“/（]+）onmouseout='.'？'/i'，“$1”，$r）；
$r=preg_replace（“/（]+）onmouseover='.'？'/i'，“$1”，$r）；
$r=preg_replace（“/（]+）onmouseup='.'？'/i'，“$1”，$r）；
返回preg_replace（“/（]+）类=”.*？“/i”、“$1”、$r）；
}

您正在使用PHP吗？哇，刚刚看到标签。@Justin

strip_tags（）

并不能防止XSS攻击。（编辑：啊，你编辑过）带有Whitlingtags和attrib。但即使这样，也不能为您提供针对当前和未来攻击向量的全面保护？因为我想在php验证itthanks@JustinE之前给用户一个评论预览，所以我真的不认为simpleBe一定会将它标记为答案，如果它对您有效的话。我建议删除onfocus，您也应该删除onhover属性。请确保同时使用strip_tags（），这样用户只能使用您定义的标记来删除…的onclick属性。我目前使用strip_标记来删除大多数标记，但忘记了这一个。我现在要睡觉了，但如果我能让它工作的话，我会在早上把它标记为答案。javascript解决方案可以修改为从字符串而不是标记中剥离属性吗？谢谢，她更喜欢使用javascript解决方案。回答得很好+谢谢你的提示，贾斯汀。我添加了一个JS示例。我相信只有一个

文档。getElementsByTagName（“b”）[0]。removeAttribute（“onclick”）就足够了。如果你想让用户使用标记，这是最好的解决方案，不，你的就不够了。他想在用户实际提交表单之前给用户一个outlut，这样他就不能使用strip标签，他的b标签之间的任何内容都不会被过滤。b-tag和boom中的脚本，XSS。
function strip_attr(e){
var r = e.replace(/(<[^>]+) onclick=".*?"/i,"$1");
r = r.replace(/(<[^>]+) onfocus=".*?"/i,"$1");
r = r.replace(/(<[^>]+) ondblclick=".*?"/i,"$1");
r = r.replace(/(<[^>]+) style=".*?"/i,"$1");
r = r.replace(/(<[^>]+) onmousedown=".*?"/i,"$1");
r = r.replace(/(<[^>]+) onmouseout=".*?"/i,"$1");
r = r.replace(/(<[^>]+) onmouseover=".*?"/i,"$1");
r = r.replace(/(<[^>]+) onmouseup=".*?"/i,"$1");    
r = r.replace(/(<[^>]+) onclick=.*?/i,"$1");
r = r.replace(/(<[^>]+) onfocus=.*?/i,"$1");
r = r.replace(/(<[^>]+) ondblclick=.*?/i,"$1");
r = r.replace(/(<[^>]+) style=.*?/i,"$1");
r = r.replace(/(<[^>]+) onmousedown=.*?/i,"$1");
r = r.replace(/(<[^>]+) onmouseout=.*?/i,"$1");
r = r.replace(/(<[^>]+) onmouseover=.*?/i,"$1");
r = r.replace(/(<[^>]+) onmouseup=.*?/i,"$1");
r = r.replace(/(<[^>]+) onclick='.*?'/i,"$1");
r = r.replace(/(<[^>]+) onfocus='.*?'/i,"$1");
r = r.replace(/(<[^>]+) ondblclick='.*?'/i,"$1");
r = r.replace(/(<[^>]+) style='.*?'/i,"$1");
r = r.replace(/(<[^>]+) onmousedown='.*?'/i,"$1");
r = r.replace(/(<[^>]+) onmouseout='.*?'/i,"$1");
r = r.replace(/(<[^>]+) onmouseover='.*?'/i,"$1");
r = r.replace(/(<[^>]+) onmouseup='.*?'/i,"$1");
return r.replace(/(<[^>]+) class=".*?"/i,"$1").replace(/(<[^>]+) class='.*?'/i,"$1").replace(/(<[^>]+) class=.*?/i,"$1");
}

function strip_attr($e){
$r = preg_replace('/(<[^>]+) onclick=".*?"/i','$1',$e);
$r = preg_replace('/(<[^>]+) onfocus=".*?"/i','$1',$r);
$r = preg_replace('/(<[^>]+) ondblclick=".*?"/i','$1',$r);
$r = preg_replace('/(<[^>]+) style=".*?"/i','$1',$r);
$r = preg_replace('/(<[^>]+) onmousedown=".*?"/i','$1',$r);
$r = preg_replace('/(<[^>]+) onmouseout=".*?"/i','$1',$r);
$r = preg_replace('/(<[^>]+) onmouseover=".*?"/i','$1',$r);
$r = preg_replace('/(<[^>]+) onmouseup=".*?"/i','$1',$r);

$r = preg_replace('/(<[^>]+) onclick=.*?/i','$1',$r);
$r = preg_replace('/(<[^>]+) onfocus=.*?/i','$1',$r);
$r = preg_replace('/(<[^>]+) ondblclick=.*?/i','$1',$r);
$r = preg_replace('/(<[^>]+) style=.*?/i','$1',$r);
$r = preg_replace('/(<[^>]+) onmousedown=.*?/i','$1',$r);
$r = preg_replace('/(<[^>]+) onmouseout=.*?/i','$1',$r);
$r = preg_replace('/(<[^>]+) onmouseover=.*?/i','$1',$r);
$r = preg_replace('/(<[^>]+) onmouseup=.*?/i','$1',$r);

$r = preg_replace("/(<[^>]+) onclick='.*?'/i","$1",$r);
$r = preg_replace("/(<[^>]+) onfocus='.*?'/i","$1",$r);
$r = preg_replace("/(<[^>]+) ondblclick='.*?'/i","$1",$r);
$r = preg_replace("/(<[^>]+) style='.*?'/i","$1",$r);
$r = preg_replace("/(<[^>]+) onmousedown='.*?'/i","$1",$r);
$r = preg_replace("/(<[^>]+) onmouseout='.*?'/i","$1",$r);
$r = preg_replace("/(<[^>]+) onmouseover='.*?'/i","$1",$r);
$r = preg_replace("/(<[^>]+) onmouseup='.*?'/i","$1",$r);
return preg_replace("/(<[^>]+) class='.*?'/i","$1",$r);
}