Как удалить все теги, похожие на html, после ввода в редакторе tinymce - PullRequest
0 голосов
/ 28 июня 2019

У меня есть встроенный редактор 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);

1 Ответ

1 голос
/ 28 июня 2019

Вы можете использовать параметры конфигурации TinyMCE, такие как valid_elements / extended_valid_elements, чтобы контролировать, какие теги вы хотите разрешить.Существуют аналогичные параметры конфигурации для управления разрешенными атрибутами.Это поможет вам убедиться, что TinyMCE разрешает только те теги, которые вам нужны.

Здесь описаны все параметры конфигурации, которые попадают под эту категорию фильтрации содержимого:

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

При этом вы никогда не сможете предположить, что проверки на стороне клиента достаточно, чтобы обеспечить защиту вашего приложения от недопустимого HTML, атак с использованием инъекций, XSS и т. Д.

РеальностьНечестивые люди могут публиковать данные в вашем приложении, используя другие инструменты (CURL и т. д.), чтобы контент не проходил через ваш пользовательский интерфейс.Кроме того, если вы неправильно настроили TinyMCE, вы можете разрешить теги, даже не осознавая, что вы это сделали.Вы всегда должны проверять данные на стороне сервера перед сохранением их в своей базе данных - это единственный способ убедиться, что то, что вы сохраняете, является "безопасным".

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...