2

I am using Ajax call to invoke C# method that is processing user paste input by removing unwanted html tags and attributes.

When I paste in content with html formatting (tags & attributes), my Ajax call doesn't work. Can you please advise how Ajax parameters should be defined for such scenario (send raw html to server side code and get raw html returned)?

view:

@(Html.Kendo().Editor()
 .Name("myEditor")
 .PasteCleanup(p => p.Custom("myPasteCleanUp")
)

script:

function myPasteCleanUp(input) {
      var response = null;
      if (input != null) {
       $.ajax({
         type: "POST",
         url: '/Home/htmlTagCleanUp',
         data: { userInput: input },
         async: false,
         success: function (response) {
            input = response;
         },
       });
     }
    return input;
   }

controller:

[HttpPost]
[AllowAnonymous]
public ActionResult htmlTagCleanUp(string userInput)
{
  userInput = userInput;
  return Content(userInput, "text/html");
}
Tom S
  • 127
  • 1
  • 4
  • 18
  • 1
    Can you please define "doesn't work"? What is happening and what do you expect? – fredrik Jul 15 '21 at 21:02
  • `my Ajax call doesn't work` is not a helpful description. What does not work? And the shown code you only have `input = response;` so when do you try to use `input`? – t.niese Jul 15 '21 at 21:05
  • my ajax call is linked to paste action. when pasted content of clipboard does not contain html tags, my htmlTagCleanUp() ActionResult method gets executed. When pasted content does contain html tags, htmlTagCleanUp() does not get invoked/hit at all. response is supposed to contain server side-processed pasted string. input (response) is what is returned to my textarea. – Tom S Jul 15 '21 at 21:17
  • Check your browsers dev tools for what happens to the request. – fredrik Jul 15 '21 at 21:24
  • You might need to post more of your code. Personally I would console.log the ajax data, so `{ userInput: input }` as well as the success response, `success: function (response) { input = response; console.log(response) }` Also how/where are you initialising `input`? – lharby Jul 17 '21 at 21:10
  • I added all of my related code as requested. I noticed one thing. When I copy a string element with formatting and copy that into my editor from my clipboard, the ajax call doesn't work. However, if I copy plain html of the same string element (with all formatting, but in html format) and then paste it into my editor, the Ajax call works properly and my controller ActionResult gets executed with parameter passed as expected. Summary: my ajax call does not work if I copy an html formatted element of a web page and paste it directly to my editor. – Tom S Jul 19 '21 at 09:31

4 Answers4

0

It turned out the missing part was sanitizing HTML:

var  = document.createElement('div');
element.innerText = html;
var sanitizedHTML = element.innerHTML;
Tom S
  • 127
  • 1
  • 4
  • 18
0

The thing that is preventing your AJAX call is because you have added if conditions:

if (html != null) {
}

Can you tell me where the html variable is defined. Nonetheless, I think you are trying to check the input null values and if we replace the html by input variable on the if the condition it should work:

if (input != null) {
}
Abinesh Amatya
  • 160
  • 1
  • 1
  • 7
  • my bad, I forgot to rename the html variable while pasting in my code - it is now corrected. Thanks for the catch. My own answer to the issue is listed above. Regards. – Tom S Jul 19 '21 at 18:34
0

I guess the issue is that MVC considers data with tags as a bad request.

Therefore would suggest you try it above the action method in your controller:

[ValidateInput(false)]
pushkar singh
  • 75
  • 10
0

Looks like you need to add the [ValidateInput(false)] attribute to your method as it may treat as an XSS attack.

Ref: ValidateInput(false) vs AllowHtml

Manthan Makani
  • 119
  • 1
  • 6