cross-site scripting filter blocking my attempt to save javascript variable to mysql db using python cgi script

Question

The main objective I have is to save a javascript variable to a mysql db using a python cgi script. This is the contents of the js variable:

<li style="width: 300px; background-color: white; list-style-image: url(http://champ/images/plus.gif); ">Costco 
  <input style="float: right; display: none; " type="image" src="/images/next_level.png" alt="Submit button" onclick="newLevel(this)">
  <input style="float: right; margin-right: 7px; display: none; " type="image" src="/images/b_add.png" alt="Submit button" onclick="addItem(this)">
  <input style="float: right; margin-right: 7px; display: none; " type="image" src="/images/b_edit.png" alt="Submit button" onclick="editItem(this)">
  <input style="float: right; margin-right: 7px; display: none; " type="image" src="/images/b_drop.png" alt="Submit button" onclick="delItem(this)">
  <ul style="display: none; ">
    <li style="width: 300px; background-color: white; cursor: default; list-style-image: none; ">Cheese
        <input style="float:right;" type="image" src="/images/next_level.png" alt="Submit button" onclick="newLevel(this)">
        <input style="float:right; margin-right: 7px;" type="image" src="/images/b_add.png" alt="Submit button" onclick="addItem(this)">
        <input style="float:right; margin-right: 7px" type="image" src="/images/b_edit.png" alt="Submit button" onclick="editItem(this)">
        <input style="float:right; margin-right: 7px" type="image" src="/images/b_drop.png" alt="Submit button" onclick="delItem(this)">
    </li>
    <li style="width: 300px; background-color: white; cursor: default; list-style-image: none; ">Milk
        <input style="float:right;" type="image" src="/images/next_level.png" alt="Submit button" onclick="newLevel(this)">
        <input style="float:right; margin-right: 7px;" type="image" src="/images/b_add.png" alt="Submit button" onclick="addItem(this)">
        <input style="float:right; margin-right: 7px" type="image" src="/images/b_edit.png" alt="Submit button" onclick="editItem(this)">
        <input style="float:right; margin-right: 7px" type="image" src="/images/b_drop.png" alt="Submit button" onclick="delItem(this)">
    </li>
    <li style="width: 300px; cursor: default; list-style-image: none; ">Pretzels
        <input style="float:right;" type="image" src="/images/next_level.png" alt="Submit button" onclick="newLevel(this)">
        <input style="float:right; margin-right: 7px;" type="image" src="/images/b_add.png" alt="Submit button" onclick="addItem(this)">
        <input style="float:right; margin-right: 7px" type="image" src="/images/b_edit.png" alt="Submit button" onclick="editItem(this)">
        <input style="float:right; margin-right: 7px" type="image" src="/images/b_drop.png" alt="Submit button" onclick="delItem(this)">
    </li>
  </ul>
</li>
<li style="width: 300px; background-color: white; list-style-image: url(http://champ/images/plus.gif); ">Walmart
  <input style="float: right; display: none; " type="image" src="/images/next_level.png" alt="Submit button" onclick="newLevel(this)">
  <input style="float: right; margin-right: 7px; display: none; " type="image" src="/images/b_add.png" alt="Submit button" onclick="addItem(this)">
  <input style="float: right; margin-right: 7px; display: none; " type="image" src="/images/b_edit.png" alt="Submit button" onclick="editItem(this)">
  <input style="float: right; margin-right: 7px; display: none; " type="image" src="/images/b_drop.png" alt="Submit button" onclick="delItem(this)">
  <ul style="display: none; ">
    <li style="width: 300px; background-color: white; cursor: default; list-style-image: none; ">Bread 
      <input style="float:right;" type="image" src="/images/next_level.png" alt="Submit button" onclick="newLevel(this)">
      <input style="float:right; margin-right: 7px;" type="image" src="/images/b_add.png" alt="Submit button" onclick="addItem(this)">
      <input style="float:right; margin-right: 7px" type="image" src="/images/b_edit.png" alt="Submit button" onclick="editItem(this)">
      <input style="float:right; margin-right: 7px" type="image" src="/images/b_drop.png" alt="Submit button" onclick="delItem(this)">
    </li><li style="width: 300px; background-color: white; cursor: default; list-style-image: none; ">Bannanas 
      <input style="float:right;" type="image" src="/images/next_level.png" alt="Submit button" onclick="newLevel(this)">
      <input style="float:right; margin-right: 7px;" type="image" src="/images/b_add.png" alt="Submit button" onclick="addItem(this)">
      <input style="float:right; margin-right: 7px" type="image" src="/images/b_edit.png" alt="Submit button" onclick="editItem(this)">
      <input style="float:right; margin-right: 7px" type="image" src="/images/b_drop.png" alt="Submit button" onclick="delItem(this)">
    </li><li style="width: 300px; background-color: white; cursor: default; list-style-image: none; ">Cereal 
      <input style="float:right;" type="image" src="/images/next_level.png" alt="Submit button" onclick="newLevel(this)">
      <input style="float:right; margin-right: 7px;" type="image" src="/images/b_add.png" alt="Submit button" onclick="addItem(this)">
      <input style="float:right; margin-right: 7px" type="image" src="/images/b_edit.png" alt="Submit button" onclick="editItem(this)">
      <input style="float:right; margin-right: 7px" type="image" src="/images/b_drop.png" alt="Submit button" onclick="delItem(this)">
    </li><li style="width: 300px; background-color: white; cursor: default; list-style-image: none; ">Tortillas 
      <input style="float:right;" type="image" src="/images/next_level.png" alt="Submit button" onclick="newLevel(this)">
      <input style="float:right; margin-right: 7px;" type="image" src="/images/b_add.png" alt="Submit button" onclick="addItem(this)">
      <input style="float:right; margin-right: 7px" type="image" src="/images/b_edit.png" alt="Submit button" onclick="editItem(this)">
      <input style="float:right; margin-right: 7px" type="image" src="/images/b_drop.png" alt="Submit button" onclick="delItem(this)">

As you can see I am trying to save my shopping list to the db. As I understand the cross-site scripting filter problem, the problem arises when you send js via the http post method and then the same code comes back via the http response. Maybe I'm missunderstanding the problem because I don't see any js in this block of code, do you?

So I was hoping to write the contents of this js variable to a hidden input form element and submit the form:

   function saveList()
  {
     var list = $('ul').html();
     document.getElementById("html_passed").value = list;
     document.forms["editsForm"].submit();
  }

Here is the form definition:

<form name="editsForm" action="/cgi-bin/todo2.py" method="post">
  ...
  <input id="html_passed" type="hidden" name="html_passed">
  ...
</form>

Then read the value of this form element when the python cgi script (todo2.py) is executed:

form = cgi.FieldStorage()

if form.keys() != []:
  if 'html_passed' in form.keys():

Then place this block of code in a mysql db via MySQLdb. However, when I try to read the form contents with form = cgi.FieldStorage() I get the following error in the webkit console:

 Refused to execute a JavaScript script. Source code of script found within request.

So, I'm in a bit of a jam. I've found some info on cross-site scripting workarounds, but I don't know how to send a non-standard HTTP header in python or if it can even be done. I see that it can be done in php with header("X-XSS-Protection: 0");. But I'd rather not mess with that if there is some other way to workaround this problem. Any ideas would be greatly appreciated. Thanks.

If youre using jQuery, you will have a patch to add CSRF token into each request — James, Aug 06 '12 at 06:47
@Trinh Hoang Nhu, thank you for the idea. It is a totally new concept to me. I did google it, but it didn't clear it up much. Is there a simple example that you can point me toward? — nomadicME, Aug 06 '12 at 07:17

score 0 · Accepted Answer · answered Aug 07 '12 at 05:39

I decided to bone up on my javascript/jquery skills. I discovered that it was indeed the onclicks that were causing the issue. So as a workaround I removed them with before submitting the form:

  function rmOnClicks()
  {
    console.log('entered rmOnClicks()')
    $('li').children().each(function(index) 
    {
      $(this).removeAttr("onclick");
      //alert($(this).text());
    });
  }

Then I added them back in when I recalled the data from the db with:

function addOnClicks()
  {
    console.log('entered rmOnClicks()')
    $('li').children().each(function(index) 
    {
      var src = $(this).attr('src');

            if (src == "/images/b_drop.png") 
      {
        $(this).removeAttr("onclick");
        $(this).attr('onclick','delItem(this)')
      }
      else if (src == "/images/b_edit.png") 
      {
        $(this).removeAttr("onclick");
        $(this).attr('onclick','editItem(this)')
      }
      else if (src == "/images/b_add.png") 
      {
        $(this).removeAttr("onclick");
        $(this).attr('onclick','addItem(this)')
      }
      else if (src == "/images/next_level.png") 
      {
        $(this).removeAttr("onclick");
        $(this).attr('onclick','newLevel(this)')
      }

    });

    var list = $('ul').html();
    console.log(list);
}

It is a bit of a kludge, but I think it is pretty robust. If you have other ideas I would still like to hear them. Thanks.

cross-site scripting filter blocking my attempt to save javascript variable to mysql db using python cgi script

1 Answers1