How to replace innerHTML with jQuery?

Question

I have written the code below but now I have to write this with jQuery because of security reasons. I have never done something with jQuery before and I really don't know, how to write this. I shouldn't mix the HTML with JS and should use createElement and stuff like that.

var demoName1 = "Peter Stone";
function showMessage() {
    var newMsg = '<div id="messageBoxSend">' +
        '<div class="nameSend">' + demoName1 + '</div>' +
        '<div class="text">' +
        ' <div id="FscToolPaneNoseSend">' +
        '</div></div>' +
        document.getElementById('inputText').value;

var a = new Date();
    var b = a.getHours();
    var c = a.getMinutes();
    if (c < 10) {
        c = "0" + c;
    }
    var time = b + ':' + c;

    newMsg += '<div class="time">' + time + '</div>' +
        ' </div></div><br>';
...
}

"*now I have to write this with jQuery because of security reasons*" why would jQuery be more secure? Especially if you are seeking to blindly put raw HTML on the page which is the security vulnerability to begin with? — VLAZ, Jul 09 '19 at 11:24
I'm assuming OP want's to return the markup in an ajax request, as just passing the html string to jquery's `.html()` is no more secure than what they've posted — Sean T, Jul 09 '19 at 11:31
@VLAZ There is a lot that could go wrong with just using `innerHTML()`, so it's recommended to sanitize the html before using it. — designtocode, Jul 09 '19 at 12:00
@designtocode [I know](https://stackoverflow.com/questions/55370694/whole-page-gets-replaced-with-a-text-xss-after-a-successful-loop/55370885#55370885) [that](https://stackoverflow.com/questions/56082892/ajax-response-return-html-response-xss-veracode/56083107#56083107). I'm asking why is jQuery more secure. — VLAZ, Jul 09 '19 at 12:25
You can search for answers @VLAZ See here https://stackoverflow.com/questions/3563107/jquery-html-vs-innerhtml. It has a try/catch.. It is made to support multiple browsers and also preforms multiple other checks of the html. — designtocode, Jul 09 '19 at 12:35
@designtocode I'm asking OP why jQuery is considered more secure in his case. Because *any* direct parsing of HTML is inherently unsafe, doesn't matter if you put it in a try-catch. I'm trying to understand what OP's security concern and threat model is. Simply saying "I want to use jQuery because of security" makes no sense. It's as meaningful as saying "I want to use `for` loop for security". Similarly, any answer that suggests direct parsing of HTML is meaningless without knowing *what* this is supposed to solve. Replacing `.innerHTML = code` with `.html(code)` provides no security benefit. — VLAZ, Jul 09 '19 at 13:08

score 3 · Answer 1 · answered Jul 09 '19 at 11:27

3

You will try this code

$('class or id').html('');

$('class or id').html(newMsg);

answered Jul 09 '19 at 11:27

Lokendra Singh Panwar

503
9
27

Why would this satisfy any security reason? – VLAZ Jul 09 '19 at 11:30

score 1 · Answer 2 · answered Jul 09 '19 at 11:32

1

jQuery is a library for JavaScript, so yes, if you consider JavaScript to be insecure, then jQuery is, as well. Also, jQuery makes AJAX easier, but it doesn't prove that Jquery is secure than javascript.

answered Jul 09 '19 at 11:32

Shivani Sonagara

1,299
9
21

designtocode · Answer 3 · 2019-07-09T12:05:09.200

0

It would be something like the below. You should probably look into the jQuery docs https://jquery.com/

var demoName1 = "Peter Stone";
function showMessage() {
    var input = $('#inputText').val();
    $('.nameSend').html(demoName1 + input);

var a = new Date();
    var b = a.getHours();
    var c = a.getMinutes();
    if (c < 10) {
        c = "0" + c;
    }
    var time = b + ':' + c;

    $('#messageBoxSend').append(time);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" id="inputText">
<div id="messageBoxSend">
<div class="nameSend"></div>
</div>
<div class=""></div>
<button onclick="showMessage();">Click me!</button>

After reading the comments and your question, I realized that the security concern should be answered. It is recommended to sanitize the HTML before using innerHTML().

You can read more on creating DOM elements and using innerHTML() safely here https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/Safely_inserting_external_content_into_a_page

edited Jul 09 '19 at 12:05

answered Jul 09 '19 at 11:43

designtocode

2,215
4
21
35

How does that satisfy any security concernes that `.innerHTML` doesn't? – VLAZ Jul 09 '19 at 11:46
As per Mozilla, it is recommended to santize the html before using innerHTML(), you can read more about it here https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/Safely_inserting_external_content_into_a_page – designtocode Jul 09 '19 at 11:50
If you are simply changing `innerHTML = code` with `.html(code)` then there is no functional difference. And the easiest way to change the content securely is to *avoid* directly parsing HTML at all and instead use DOM manipulation. – VLAZ Jul 09 '19 at 12:28

How to replace innerHTML with jQuery?

3 Answers3