New to Kendo UI for jQuery? Download free 30-day trial

Prevent script execution in the input of the kendo.prompt predefined dialog using DOMPurify.

Environment

Product Progress Kendo UI Dialog
Operating System All
Browser All
Preferred Language JavaScript

Description

How to prevent JavaScript execution in the input of the kendo.prompt Dialog?

If you type some JavaScript in the kendo.prompt input field, it will execute. The reason for the observed behavior is because the application is not sanitizing content. While the responsibility for that falls to the developer, below you will find a small example how to prevent JavaScript execution using the DOMPurify library.

    <script src="https://cdnjs.cloudflare.com/ajax/libs/dompurify/2.0.12/purify.min.js"></script>

    <div id="example">
      <button id="promptBtn" class="k-button">kendo.prompt</button>

      <script>

        //Sanitized data from input
        function sanitizeHtml(html) {
          var temp = $("<div></div>").html(window.DOMPurify.sanitize(html));
          return temp.html() || "\ufeff";
        }

        $("#promptBtn").on("click", function () {
          kendo.prompt("Please, enter a arbitrary value:", "any value").then(function (data) {

            //Get the cleaned data from the function
            var cleanedData = sanitizeHtml(data);

                        //Output your results
            kendo.alert(kendo.format("The value that you entered is '{0}'", cleanedData));

          }, function () {

            //Canceled Prompt
            kendo.alert("Cancel entering value.");
          })
        });
      </script>
    </div>
In this article
Not finding the help you need? Improve this article