jquery ajax对特殊字符进行转义防止js注入使用示例

首先，我们需要明确 jquery ajax 的一个重要特性：它自动对发送的数据进行转义，以防止 XSS 攻击。但有时候我们需要发送一些特殊字符，如 <, >, &, " 等，这些字符会被自动转义，导致在后端无法正常处理。为了解决这个问题，我们需要手动对这些特殊字符进行转义。

我们可以使用 jQuery 提供的 $.param 方法，它可以将一个对象序列化成 URL 编码的字符串，在此过程中会对特殊字符进行转义。

下面给出两个示例说明。

第一个示例，我们需要将一个包含特殊字符的字符串发送给后端：

var data = {
  content: '<p>这是一段包含特殊字符的字符串</p>'
};

$.ajax({
  url: '/api/save',
  method: 'POST',
  data: $.param(data),
  success: function(res) {
    console.log(res);
  }
});

这里我们将一个包含了 <p> 标签的字符串作为参数传递给后端，因为 < 和 > 是 HTML 中的特殊字符，如果不进行转义，在接收到数据后就会出现问题。使用 $.param 方法将 data 转换后，生成的字符串为：

content=%3Cp%3E%E8%BF%99%E6%98%AF%E4%B8%80%E6%AE%B5%E5%8C%85%E5%90%AB%E7%89%B9%E6%AE%8A%E5%AD%97%E7%AC%A6%E7%9A%84%E5%AD%97%E7%AC%A6%E4%B8%B2%3C%2Fp%3E

其中 %3C 对应 <，%3E 对应 >，%E8%BF%99... 对应中文字符。

第二个示例，我们需要发送一段包含特殊字符的 JSON 数据：

var data = {
  name: '<script>alert("xss");</script>',
  age: 18
};

$.ajax({
  url: '/api/save',
  method: 'POST',
  data: JSON.stringify(data),
  contentType: 'application/json;charset=utf-8',
  success: function(res) {
    console.log(res);
  }
});

这里我们使用 JSON.stringify 方法将数据转换为 JSON 字符串，在传递给后端时，需要设置 contentType 为 application/json;charset=utf-8，表示传递的是 JSON 数据。

如果不对 name 字段中的特殊字符进行转义，在后端接收到数据后，就会出现 XSS 攻击。使用 $.param 方法将 data 转换后生成的字符串为：

{"name":"%3Cscript%3Ealert(%22xss%22);%3C/script%3E","age":18}

其中 %3C 对应 <，%3E 对应 >，这样可以保证后端接收到的数据不会出现 XSS 攻击。