如何在 tinymce 编辑器中输入后删除任何 html 之类的标签

Question

我有一个 ice 内联编辑器，用户可以根据需要粘贴和键入，编辑完成后我使用 ng-blur 将最终内容保存到数据库。我担心的是用户可以编写或粘贴任何可能具有 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，在上面初始化了一个内联编辑器，现在我可以在该编辑器中编辑内容。我可以复制粘贴内容或可以写。我想要做的就是，每当我在编辑器中进行任何更改时，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

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

属于此内容过滤类别的配置选项都记录在此处：

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

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

现实情况是，不法分子可以使用其他工具（CURL 等）post 向您的应用程序发送数据，这样内容就不会通过您的 UI。此外，如果您错误地配置了 TinyMCE，您可能会在没有意识到的情况下允许使用标签。在将数据存储到数据库之前，您应该始终验证数据 server-side - 这是确保您保存的内容是 "safe".[=13= 的唯一方法]

如何在 tinymce 编辑器中输入后删除任何 html 之类的标签

How to remove any html like tags after typing in tinymce editor

tinymce