Ajax based data post

[eluser]mallix[/eluser]
Hello,

i have a quick question.

Assume i have a view for creating a team [input field id="team"]
I pass the value to ajax.js [createTeam(team)], which goes to controller Team.
Then in the same ajax.js i have a function [deleteTeam(teamId)] which goes to another controller to delete the team based on the id.

So if i go to the input field and write [script type="text/javascript"]deleteTeam(48)[/script] and hit save i get:

newly created team [removed]deleteTeam(48)[removed] BUT team with id 48 is deleted.

How can i prevent that ?
I am using jQuery to post form data to controllers, inside the controllers i have xss filters, but this happens before the logic goes to controllers.

Thank you in advance, any tip-help is really appreciated.

[eluser]mallix[/eluser]
Does anyone now how to replicate CI s xss_clean() into js, any usefull regex or else to make sure that input fields does not execute other js functions?

[eluser]gRoberts[/eluser]
On your success callback, what are you doing with the text that is typed into the input? Are you calling Eval or creating any new elements on the page using the raw text?

There is no reason why it would be executing deleteTeam(48) unless you are either

a) Eval'ing javascript
b) Using innerHTML or $.HTML to update the DOM with the newly created content.
c) Your not actually XSS filtering your content.

If you look at the content in the database, can you confirm it has been filtered and that < script> tags have been removed?

[eluser]mallix[/eluser]

Code:

success: function(data) {
    
     if(data.code == 0){
      loader.hide();
      alert(data.message);
      $("#component_category").val('');
      $("#groupsData").prepend('<tr class="odd gradeX" id="tr_'+data.group_id+'">' +
        '<td>'+group+'</td>' +
        '<td>'+data.choice+'</td>' +
        '<td>strong>'+data.sum_groups+' components</strong></td>' +
        '<td>' +
         '<span class="deleteGroupSpan" id="deleteGroupLoader_'+data.group_id+'">' +
         '<img src="'+host+'client/images/loaders/loader.gif" /></span>' +
         '<button class="btn btn-small btn-quaternary">' +
          '<span class="icon-check"></span>Add components' +
         '</button>' +
         '<button class="btn btn-small btn-quaternary">' +
          '<span class="icon-x"></span>Delete' +
         '</button>' +          
        '</td>' +
       '</tr>');
        
     }else{
      loader.hide();
      alert(data.message);
      
     }
        
    }

That is what i do.
1. Hide my loader.
2. Alert that the group is stored
3. Clear the input box
4. Prepend the new data into a table view

Thats all i do.
The data stored into the database have [removed][removed] after the XSS filtering, so it is ok there.

The logic is: Create a group of components -> add components. The above implementation is only the create group of components, but every other input box of my application that i have tested, allows javascript execution using the input boxes(before the logic "hits" my controller classes) like i said in my previous posts.

[eluser]gRoberts[/eluser]
Am I right to assume that the variable "group" is the value of `$("#component_category").val('');` ?

If so, you are inserting < script></ script> tags directly. I know it sounds like a lot of work, but to be safe, include the XSS filtered value along with the other data you return in your Ajax request so that you can use the XSS filtered value rather than taking the value directly from the input.

[eluser]mallix[/eluser]
How can i include XSS filter in js ?

My function

Code:

function createGroupOfComponents(){
var loader = $("#componentCategoryLoader");
var group = $("#component_category").val();
var single = 'multi';
loader.show();

if($("#singleSelect").is(':checked')){ single = 'single'; }

if(group.length < 100){
  
  if(group.length >= 1){
  
   var dataString = 'group=' + group + '&single;=' + single;
  
   $.ajax({
    type: "POST",
    url: host + "act/add-group-of-components/",
    data: dataString,
    dataType: "json",
    success: function(data) {
    
     if(data.code == 0){
      loader.hide();
      alert(data.message);
      $("#component_category").val('');
      $("#groupsData").prepend('<tr class="odd gradeX" id="tr_'+data.group_id+'">' +
        '<td>'+group+'</td>' +
        '<td>'+data.choice+'</td>' +
        '<td>strong>'+data.sum_groups+' components</strong></td>' +
        '<td>' +
         '<span class="deleteGroupSpan" id="deleteGroupLoader_'+data.group_id+'">' +
         '<img src="'+host+'client/images/loaders/loader.gif" /></span>' +
         '<button class="btn btn-small btn-quaternary">' +
          '<span class="icon-check"></span>Add components' +
         '</button>' +
         '<button class="btn btn-small btn-quaternary">' +
          '<span class="icon-x"></span>Delete' +
         '</button>' +          
        '</td>' +
       '</tr>');
        
     }else{
      loader.hide();
      alert(data.message);
      
     }
        
    }
    
   });
  
  }else{
   loader.hide();
   alert('Empty group name!');
  }
  
}else{
  loader.hide();
  alert('Maximum number of characters exceeded!');
}

}

[eluser]gRoberts[/eluser]
It's likely you will have to recreate the XSS filter by converting the PHP code to Javascript.

For what effort it would take to implement a Javascript version of the CodeIgniter XSS filter, you could make two simple changes and the problem would be solved.

Within your controller, you can simply pass back the XSS filtered Group value and then within your Success callback, instead of using `group`, you would use `data.Group`.

[eluser]mallix[/eluser]
Really appreciate your help gRoberts,
I will of course go with the second way, that you suggested.

I didn t know that this caused the javascript code execution.

Thank you