Validating Text input with val()

Question

I try to validate the Input in my website because of Cross-Site-Scripting-Attacks!

<form name="SearchInput" class="form-inline filterForm" method="post" action="/annoncen/" onsubmit="validateMyForm();">
          <input type="text" name="searchWord" class="form-control form-search left" id="formGroupExampleInput" placeholder="Text" onkeyup="inputKeyUp(event)"/>
          <input type="text" name="searchLoc"  class="form-control form-search right" id="formGroupExampleInput" placeholder="Place" onkeyup="inputKeyUp(event)"/>
          <button type="submit">search</button>
 </form>

I use the validate() plugin to prevent the user put a script in the input field

function validateMyForm(){
       var text_value = $('#formGroupExampleInput').val();
       if(text_value!=='/^[a-zA-Z ]*$/') {
            alert("Enter Some Text In Input Field");
            event.preventDefault();
       }}

but every time I get text_value ="" !!! What am I doing wrong

Answer 1

Note that anything in Javascript (validation, encoding or whatever else) won't protect against reflected or stored XSS. You need to encode your output where it's written back to the page (presumably on the server side), but that part is not shown in the question. XSS by default is an output encoding problem, and it is less about input valudation, though if strict enough and under the right circumstances, server-side input validation might also prevent it.

If however this is a DOM XSS you are trying to prevent, it would still be better to implement proper output handling in Javascript (like for example using .text() of jQuery instead of .html() and so on) rather than trying to control input on the input field.

Answer 2

Your value is always empty because there is two input with same ID. here is an example with two different ID that works(formGroupExampleInput and formGroupExampleInput1)

$( document ).ready(function() {
    $("button").on("click", function (e){     
      var text_value = $('#formGroupExampleInput').val();
      console.log('your value ' + text_value);
       if(text_value==="") {
            alert("Enter Some Text In Input Field");
            e.preventDefault();
       }
      console.log('form is submited');
       //todo remove this e.preventDefault(); to make your form submit
       e.preventDefault();
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form name="SearchInput" class="form-inline filterForm" >
          <input type="text" name="searchWord" class="form-control form-search left" id="formGroupExampleInput" placeholder="Text" />
          <input type="text" name="searchLoc"  class="form-control form-search right" id="formGroupExampleInput1" placeholder="Place" />
          <button type="submit">search</button>
 </form>

Concerning using regExp, you maybe should use new RegExp() and test() or exec()

More info on regExp

<script type="text/javascript">
var reg=new RegExp("^[0-9]{2}[/]{1}[0-9]{2}[/]{1}[0-9]{4}$","g");
var chaine1="15/12/2017";
var chaine2="1a/bb/2017";
document.write(chaine1+" ");
if (reg.test(chaine1)) {document.write("est bien au format date<BR>")}
else {document.write("n'est pas au format date<BR>")}
document.write(chaine2+" ");
if (reg.test(chaine2)) {document.write("est bien au format date")}
else {document.write("n'est pas au format date")}
</script>

Answer 3

I have solved my Problem (in DOM ) with replace()

function validateMyForm(){
regex = /[`~!@#$%^&*()_|+\-=?;:'",.<>\{\}\[\]\\\/]/g;
$('#formGroupExampleInput1').val($('#formGroupExampleInput1').val().replace(regex,' '));
$('#formGroupExampleInput2').val($('#formGroupExampleInput2').val().replace(regex,' '));}

I replace all the not allowed characters with plain text and prevent in his way the injecting of scripts !!