如何阻止向Select2输入框写入特殊字符以防范SQL注入

因为Select2的输入框是动态生成的DOM元素，并非原生<select>控件，你之前绑定在原生select上的事件不会生效。需要针对Select2生成的输入框绑定事件，或者利用它的钩子处理输入内容。

方案一：通过Select2的select2:open事件绑定输入拦截 #

当Select2下拉框打开时，获取它的输入框元素，再绑定特殊字符拦截逻辑：

$(document).ready(function () {
  $('#indivCitizen').select2({
    ajax: {
      url: "/countrylist",
      dataType: 'json',
      delay: 250,
      data: function (params) {
        var query = {
          search: params.term
        }
        console.log(params)
        return query;
      },
      processResults: function (data) {
        return {
          results: data.items
        };
      }
    },
    placeholder: 'Write country name',
    minimumInputLength: 3,
    maximumResultsForSearch: 1,
    tags: true,
    maximumSelectionLength: 1,
    language: {
      inputTooShort: function () {
        return 'Search will start after 3 symbols';
      },
      maximumSelected: function (e) {
        var t = "You can choose only one";
        return t
      },
    },
  });

  // 监听Select2打开事件，绑定输入拦截
  $('#indivCitizen').on('select2:open', function() {
    // 获取Select2的输入框
    const select2Input = $('.select2-search__field')[0];
    if (!select2Input) return;

    // 阻止特殊字符按键输入
    select2Input.addEventListener('keydown', function(e) {
      if (e.key.match(/[()`'"!@#$%^&*=_+,.*;:/|\<>?~]/)) {
        e.preventDefault();
      }
    });

    // 清除已输入的特殊字符
    select2Input.addEventListener('input', function(e) {
      this.value = this.value.replace(/[()`'"!@#$%^&*=_+,.*;:/|\<>?~]/g, "");
    });
  });
});

方案二：在AJAX请求前过滤参数 #

除了前端输入拦截，还可以在发送请求前直接过滤搜索参数，确保传给后端的内容已清除特殊字符：

data: function (params) {
  // 先过滤特殊字符再组装查询参数
  const cleanedTerm = params.term ? params.term.replace(/[()`'"!@#$%^&*=_+,.*;:/|\<>?~]/g, "") : "";
  var query = {
    search: cleanedTerm
  }
  console.log(query)
  return query;
},

关键提醒：SQL注入的核心防范 #

前端拦截只是辅助手段，绝对不能依赖前端过滤阻止SQL注入。后端必须使用**参数化查询（Prepared Statements）**处理数据库请求，比如在MSSQL中用SqlCommand配合参数占位符，而非直接拼接SQL语句，这才是防范注入的根本方法。

内容的提问来源于stack exchange，提问作者ad0rfin