Question

我需要使用jquery的$.html()将输入textarea中的客户创建内容插入页面上的另一个div以获取实时预览功能

但是如果客户在内容中输入了javascript，例如：

<script type='text/javascript'>
alert('abc');
</script>

使用.html()调用此代码时，javascript将被执行，如果我使用.text()，则内容将不会被视为html。

我该如何解决这个问题？我为它创建了一个jsfiddle：http://jsfiddle.net/larryzhao/VL82f/

更新：也许我需要更清楚，我正在做降价预览。因此，用户在textarea上输入markdown，然后我转换为html，并将其显示到div#dest。如果用户输入如上所示的脚本怎么办？有没有办法保留原始类型但不执行它？如果没有，那么我想我会写一个正则表达式来擦除我认为的脚本块..

我找到了两个在线降价工具： http://daringfireball.net/projects/markdown/dingus这个执行它 http://www.ctrlshift.net/project/markdowneditor/这个只是擦除脚本块

Answer 1

是否有针对JavaScript的HTML清理程序？如果是这样，这就是这样做的方法。作为一个注释，这是非常不容易正确做，所以一个天真的正则表达通常是不够的。如果您通过应用程序将其保存在某处，则预览功能可以通过发布和获取已清理的版本来利用该清洁剂。

Answer 2

您可以使用其他内容替换脚本标记，这样您只能在预览中看到提醒值，例如：

$(document).ready(function() {
    $('#source').on('keydown', function(){
       var content = ($(this).val()).replace(/(<\s*\/?\s*)script(\s*([^>]*)?\s*>)/gi ,'$1jscript$2')
        console.log( content );
        $("#dest").html( content );
    });
});

请参阅：jsFiddle

Answer 3

如果用户输入的文本保留在客户端上，那么为什么用户想要自己使用XSS呢？如果文本返回服务器然后你在那里清理它，那么如果其他用户看到输入，他们将看到清理后的输入。

Answer 4

您可以清理用户输入，删除xss。

请参阅node-validator

Answer 5

为什么不找到<script>...</script>并转义代码部分中的字符？

例如：

<script src="test/javascript>
var userInput=document.getElementByID("#input");
..
..
..
</script>


&lt;script src=&quot;test/javascript&gt;
var userInput=document.getElementByID(&quot;#input&quot;);
..
..
..
&lt;/script&gt;

Answer 6

您必须创建一个正则表达式，以便不在预览中插入<script>：

<script (.|\n)*?>(.|\n)*?</script>

或尝试一下：

function stripScripts(s) {
  var div = document.createElement('div');
  div.innerHTML = s;
  var scripts = div.getElementsByTagName('script');
  var i = scripts.length;
  while (i--) {
    scripts[i].parentNode.removeChild(scripts[i]);
  }
  return div.innerHTML;
}

alert(
  stripScripts('<span><script type="text/javascript">alert(\'foo\');<\/script><\/span>')
);

使用jQuery时如何防止javascript执行.html（）

6 个答案: