Question

我有一个ice inline编辑器，用户可以根据需要粘贴并键入，一旦完成编辑，我就使用ng-blur将最终内容保存到DB。我担心的是用户可以编写或粘贴可能带有html之类的标签（甚至是一些可疑脚本标签）的任何内容。如果有可疑代码之类的内容，我的代码会将其视为危险请求。因此，我要做的就是在ng-blur上，如果有任何html标记（ins和del除外），则应将其删除，并且我的编辑器应具有干净的代码，因此我可以通过get window [varname]来获取。 getElementContent（）方法。

对于粘贴，我正在使用以下代码

       {
           name: 'IceCopyPastePlugin',
           newLine: true,
           settings: {
              pasteType: 'formattedClean',
              preserve: '',
              afterPasteClean: function (body) {            
                 body = GetWithoutScriptString(body)
                    return body;
                 }
              }
       } ]

想象一下，有一个div可以初始化inlineeditor，现在我可以在该编辑器中编辑内容了。我可以复制粘贴内容，也可以写作。我要做的就是，每当我在编辑器中进行任何更改时，onBlur我都希望清理内容（即，从新粘贴或编辑的文本中删除所有有效或无效的html之类的标记，例如

等）首先，接受编辑器的更改，然后获取正确的内容并将其保存到数据库。

现在-

This is my original text. This is I am writing as editing with script <ins>inserted text</ins><del>deleted text</del><script>alert('xxx')</script> <div>Pratap</div><span>xxx</span>.

预期-

This is my original text. This is I am writing as editing with script <ins>inserted text</ins><del>deleted text</del>

任何帮助将不胜感激。

解决方案对我有用：

客户端=>

var tracker =
                        new ice.InlineChangeEditor({
                            element: element[0],
                            handleEvents: true,
                            invalid_elements : 'strong,em,script,embed,style,meta,img,head,body,input,iframe,monoscript,applet,object,paramnav,a,link,videp,track,source,audio,map,frame,fieldset,label,option,select,button,textarea,form,font,b',
                            extended_valid_elements : 'span[class|data-cid|data-userid|data-username|data-time]',
                            currentUser: {
                                id: 11,
                                name: 'user'
                            },
                            plugins: [
                                {
                                    name: 'IceCopyPastePlugin',
                                    newLine: true,
                                    settings: {                                           
                                        pasteType: 'formattedClean',
                                        preserve: '',
                                        afterPasteClean: function (body) {            
                                            body = GetWithoutScriptString(body)
                                            return body;
                                        }
                                    }
                                }
                                //, {
                                //    name: 'IcejQuerySpellcheckerPlugin',
                                //}
                            ]
                        });

服务器端=>

HtmlSanitizer sanitizer = new HtmlSanitizer();
sanitizer.AllowedAttributes.Add("class");
sanitizer.AllowDataAttributes = true;
descHtml = sanitizer.Sanitize(descHtml);

Answer 1

您可以使用TinyMCE配置选项（例如valid_elements / extended_valid_elements）来控制要允许的标签。有类似的配置选项可用于控制允许的属性。这些将帮助您确保TinyMCE仅允许您需要的标签。

此内容过滤类别下的配置选项全部记录在这里：

https://www.tiny.cloud/docs/configure/content-filtering/

话虽这么说， 您永远不能假设客户端验证足以确保您的应用程序免受无效HTML，注入攻击，XSS等的影响。

现实是邪恶的人们可以使用其他工具（CURL等）将数据发布到您的应用程序，以使内容不会通过您的UI。另外，如果您对TinyMCE进行了错误配置，您可能会允许标签而没有意识到自己已经这样做了。在将数据存储到数据库之前，应始终先验证服务器端的数据-这是确保保存的数据“安全”的唯一方法。

在tinymce编辑器中键入后，如何删除所有类似html的标签

1 个答案: