Im just learning about IT security, so this is basic stuff and Im maybe overthinking it.
1. I have this input field on my wordpress site (ssl is on) that directs the user to the product he typed in:
HTML
<a target="_blank" id="reflectedlink" href="http://www.google.com/search">Button</a>
<input id="searchterm"/>
JS
// Adds string to href
var link= document.getElementById('reflectedlink');
var input= document.getElementById('searchterm');
input.onchange=input.onkeyup= function() {
link.search= '?q='+encodeURIComponent(input.value);
};
// Fires button on enter keypress
$("#searchterm").on("keyup", function(e) {
if(e.keyCode == 13) {
$('#reflectedlink')[0].click();
}
});
It filters bad signs with encodeURIComponent() (so it should be fine if js is turned on?), however, if someone turns js off, can the input field be used for any kind of XSS attack or similar stuff? Do I need to validate this field in my functions.php or is it fine since there is no data being sent to the database and wordpress maybe taking care of it anyway?
2. I learned that innerHTML should be avoided, so I have this function to sort products, it uses jQuerys html() method (which does basically the same?):
HTML
<div class="wrap">
<button id="alphBnt">Alphabetical</button>
<button id="numBnt">Numerical</button>
<div id="container">
<div class="box">
<h1>B<h1>
<h2>10.35</h2>
</div>
<div class="box">
<h1>A<h1>
<h2>100.05</h2>
</div>
<div class="box">
<h1>D<h1>
<h2>200</h2>
</div>
<div class="box">
<h1>C<h1>
<h2>5,510.25</h2>
</div>
</div>
</div>
JS
var $divs = $("div.box");
$('#alphBnt').on('click', function () {
var alphabeticallyOrderedDivs = $divs.sort(function (a, b) {
return $(a).find("h1").text() > $(b).find("h1").text();
});
$("#container").html(alphabeticallyOrderedDivs);
});
$('#numBnt').on('click', function () {
var numericallyOrderedDivs = $divs.sort(function (a, b) {
return $(a).find("h2").text() > $(b).find("h2").text();
});
$("#container").html(numericallyOrderedDivs);
});
Is it fine to use in this context and does this whole "avoid innerHTML / html()" refer to its use in combination with input fields / any user input?
FOR CLARIFICATION
Regarding the input field I am asking about this exact scenario, it is not used to store any data on the server, all it does is to change an href and I am validating the input to this field with encodeURIComponent().
I wanted to know if the following is correct:
If the client's js is on, the input gets validated, if not I don't have to validate the input since this input field is basically just that, an input field without interaction with the server or the client (aside from typing digits in it) and therefore can not be used for an attack (assuming the rest of the site / server is secure).
Thanks in advance for any help / hints.
