使用htmlpurifier在jqte jQuery文本编辑器中禁止脚本标签和事件侦听器 [英] Forbid script tags and event listeners in jqte jQuery text editor using htmlpurifier

问题描述

我正在使用jqte来为cms的用户提供一些我所写的所见即所得的内容. 要公开输出内容，我使用htmlPurifier，所以没有办法，编辑者会对网站的访问者造成伤害.

I am using jqte to give users of a cms I wrote some WYSIWYG for their content. To output the content publicly I use htmlPurifier so there is no way, editors will do harm to the visitors of the site.

但是他们可以放置

<button onclick="alert('this sux')">klick me</button>

在文本区域中，下一个用户将找到一个工作按钮.

in the textarea and the next user will find a working button.

<script>evilcode</script>

甚至被执行.

有人在我之前处理过这个问题，可以在这里给我一个优雅的解决方案的提示吗?

Has anyone dealt with this before me and can give me a hint to an elegant solution here?

推荐答案

在这里，我将四肢走动，说当您将先前提交的数据加载到表单中时，输出周围没有htmlspecialchars() -但是，您应该这样做，因为对于 textarea 来说，它仍然是 text .所见即所得将文本解释为HTML，但不要将其与实际HTML混淆. :)

I'm going to go out on a limb here and say you don't have htmlspecialchars() around the output when you load previously submitted data into your form - you should, though, since it's still text for a textarea. The text is being interpreted as HTML by your WYSIWYG, but don't confuse that for actual HTML. :)

作为安慰，您知道这种混乱是非常普遍的(一直存在 发生)，并且有很多人遇到的问题与一个人完全一样你描述.

As consolation, know that this confusion is extremely common (it keeps happening) and there are many, many people with a problem exactly like the one you describe.

让我们看一下工作流程以及可能出错的地方:

Let's take a look at the workflow and where things likely went wrong:

当有人在加载了WYSIWYG的情况下将<tag>写入到所见即所得字段中的RTF中时，编辑者会看到有人想要将HTML <tag>放入消息中.

When someone writes <tag> into the richtext within your WYSIWYG field with the WYSIWYG loaded, the editor sees that someone wants to put the HTML <tag> into the message.

当某人将粗体写入富文本格式时，编辑器会看到有人希望将HTML <b>bold text</b>(或类似内容)放入消息中.

When someone writes bold text into richtext, the editor sees that someone wants to put the HTML <b>bold text</b> (or comparable) into the message.

同时，在后台，文本&lt;tag&gt; <b>bold text</b>(或其他内容)存储在 textarea 中.为了在HTML上下文中将文本保存为 text ，该文本使用HTML编码进行编码，因此将其无形地转换为<tag> <b>bold text</b>.

Meanwhile, in the background, the text &lt;tag&gt; <b>bold text</b> (or whatever) is being stored in a textarea. To preserve the text as text in an HTML context, it's encoded with HTML-encoding, invisibly turning it into <tag> <b>bold text</b>.

但是，当您按下提交按钮时，文本区域(&lt;tag&gt; <b>bold text</b>)的 text 被发送到您的服务器，因为表单数据本身当然不是HTML编码的(不是嵌入到HTML中)-它只是一组键和值，而您想要的是textarea的值.

However, when your submit button is pressed, the text of the textarea (&lt;tag&gt; <b>bold text</b>) is sent to your server, since the form data itself of course isn't HTML encoded (it's not embedded in HTML) - it's just a set of keys and values, and you wanted the value of the textarea.

现在，当您在服务器端应用程序中构建HTML以再次加载消息以进行进一步编辑时，您希望该字段的 value 采用HTML编码，因为将该值放入HTML上下文中.您之前所做的是创建<textarea>&lt;tag&gt; <b>bold text</b></textarea>，它将HTML放入HTML上下文中.在基本上所有的浏览器中，这都使文本区域具有 value <tag> <b>bold text</b>的值.哎哟! (想象一下，如果有人将</textarea>作为其原始消息的一部分！)

Now, when you're building HTML in your server-side application to load up the message again for further editing, you want the value of the field to be HTML encoded, since you're putting that value into an HTML context. What you were previously doing is creating <textarea>&lt;tag&gt; <b>bold text</b></textarea>, which is putting HTML into an HTML context. In basically all browsers, this makes the textarea take on the value <tag> <b>bold text</b>. Ouch! (Imagine if someone had </textarea> as part of their raw message!)

令每个人困惑的是，所见即所得的编辑器仍然擅长在其中显示您想要的内容.在大多数用例中，您甚至都不会注意到差异，这就是为什么此错误如此普遍的原因.

To everyone's confusion, WYSIWYG editors are unfortunately good at nonetheless displaying approximately what you wanted, there. For most use-cases you won't even notice the difference, which is why this error is so widespread.

但是，在构建页面HTML时，实际上 您要构建<textarea>&amp;lt;tag&amp;gt; &lt;b&gt;bold text&lt;/b&gt;</textarea>.这使textarea具有 value &lt;tag&gt; <b>bold text</b>的价值-正是您想要的.

When building the HTML of your page, though, you actually want to build <textarea>&amp;lt;tag&amp;gt; &lt;b&gt;bold text&lt;/b&gt;</textarea>. This makes the textarea take on the value &lt;tag&gt; <b>bold text</b> - that's exactly what you wanted.

您当前使用的解决方案通过htmlspecialchars_decode()运行提交的文本，这会将<tag>转换为<tag>，从而让HTML Purifier消除它.您不再需要担心在所见即所得的上下文中将<tag>解释为<tag>.

The solution you currently have runs the submitted text through htmlspecialchars_decode(), which turns <tag> into <tag>, thereby letting HTML Purifier eliminate it. You no longer need to worry about <tag> being interpreted as <tag> in the context of the WYSIWYG.

但是，不幸的是，您有两个问题:

However, you unfortunately have two problems:

1)，如果没有HTML Purifier删除邮件，人们将无法再提交关于标签的邮件.根据您的文本区域的使用情况，这可能不是问题.也许您不希望人们能够使用您当前的解决方案提交If you're making your own website, you can use <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.js" language="javascript"> instead of hosting the jquery.js yourself之类的HTML消息-这样的消息将被HTML Purifier净化为If you're making your own website, you can use instead of hosting the jquery.js yourself.

1) People can no longer submit messages about tags without HTML Purifier stripping them. Depending on the use case of your textarea, this may not be a problem. Maybe you don't want people to be able to submit HTML messages like If you're making your own website, you can use <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.js" language="javascript"> instead of hosting the jquery.js yourself - with your current solution, a message like that would be sanitised to If you're making your own website, you can use instead of hosting the jquery.js yourself by HTML Purifier.

2) 更加危险，人们仍然可以入侵您！尝试将 text <script>alert(1);</script>写入到您的编辑器中(这样，编辑器便会以<script>alert(1);</script>的形式看到要提交的 HTML )，然后单击Submit.您的解决方案会将其转换为<script>alert(1);</script>，并将其放入<textarea>中，然后很遗憾地回到第一个平方.

2) Much more dangerously, people can still hack you! Try writing the text <script>alert(1);</script> into your editor (so the editor sees the HTML you want to submit as <script>alert(1);</script>) and hitting submit. Your solution will turn this into <script>alert(1);</script>, which you'll put into your <textarea> and then you're unfortunately back to square one.

删除您的htmlspecialchars_decode()解决方案(但请继续净化！)，而在您的输出周围放置htmlspecialchars().您的WYSIWYG仍然可以使用，并且您将不再绕过HTML Purifier的卫生要求.

Remove your htmlspecialchars_decode() solution (but keep purifying!) and instead put htmlspecialchars() around your output. Your WYSIWYG will still work and you won't bypass HTML Purifier's sanitation any more.

这篇关于使用htmlpurifier在jqte jQuery文本编辑器中禁止脚本标签和事件侦听器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！