0

我的主要目标是使用 python cgi 脚本将 javascript 变量保存到 mysql db。这是 js 变量的内容：

<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)">

如您所见，我正在尝试将我的购物清单保存到数据库中。据我了解跨站点脚本过滤器问题，当您通过 http post 方法发送 js 然后通过 http 响应返回相同的代码时会出现问题。也许我误解了这个问题，因为我在这段代码中没有看到任何 js，是吗？

所以我希望将这个js变量的内容写入一个隐藏的输入表单元素并提交表单：

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

这是表单定义：

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

然后在执行python cgi脚本（todo2.py）时读取这个表单元素的值：

form = cgi.FieldStorage()

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

然后通过 MySQLdb 将这段代码放在一个 mysql db 中。但是，当我尝试阅读表单内容时，form = cgi.FieldStorage()我在 webkit 控制台中收到以下错误：

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

所以，我有点卡住了。我找到了一些关于跨站点脚本解决方法的信息，但我不知道如何在 python 中发送非标准 HTTP 标头，或者是否可以完成。我看到它可以在 php 中完成header("X-XSS-Protection: 0");。但是，如果有其他方法可以解决此问题，我宁愿不要搞砸。任何想法将不胜感激。谢谢。

4

1 回答 1

0

我决定加强我的 javascript/jquery 技能。我发现确实是导致问题的 onclicks。因此，作为一种解决方法，我在提交表单之前删除了它们：

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

然后，当我从数据库中调用数据时，我将它们添加回：

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);
}

这有点杂乱无章，但我认为它非常强大。如果您有其他想法，我仍然想听听。谢谢。

于 2012-08-07T05:39:34.080 回答