如何禁止文本输入框中输入的JS代码被执行？

完全可以禁止该问题，你遇到的是典型的DOM型XSS漏洞，输入框本身不会执行输入的JS代码，触发原因是你直接将用户输入的原始内容作为HTML字符串拼接后插入DOM，浏览器会自动解析其中的脚本、事件类代码导致执行。

修复方案 #

方案1：优先使用纯文本插入（最安全，推荐）

不要直接拼接HTML字符串，先创建DOM节点，通过jQuery的text()方法写入用户输入，jQuery会自动将所有特殊字符转为普通文本，不会解析为HTML代码，同时修正直接用用户输入作为元素ID的属性注入风险，修改后代码如下：

jQuery('#typing_and_press_form').on('submit', function (event) {
    event.preventDefault();
    const $input = jQuery('#typing_and_press');
    const enteredValue = $input.val().trim();
    if (enteredValue) {
       // 单独创建标签容器和子元素
       const $tag = $('<div class="tagstyle"></div>');
       // 用户输入作为纯文本插入，不会解析任何HTML/JS代码
       $('<span></span>').text(enteredValue).appendTo($tag);
       // 关闭按钮ID自主生成，不使用用户输入内容，避免属性注入
       const randomId = 'tag-' + Math.random().toString(36).slice(2);
       $('<span class="remove">X</span>').attr('id', randomId).appendTo($tag);
       // 插入到页面容器
       jQuery('.typing-press .tagsgroupkeyup').append($tag);
       $input.val('');
    }
})

方案2：手动HTML转义后再拼接

如果需要保留部分HTML解析能力，可先对用户输入的特殊字符做转义，将<、>、引号等可能触发HTML解析的字符转为实体编码，再进行拼接：

// 封装HTML转义函数
function htmlEscape(str) {
  return str.replace(/[&<>"']/g, function(match) {
    const escapeMap = {
      '&': '&amp;',
      '<': '&lt;',
      '>': '&gt;',
      '"': '&quot;',
      "'": '&#39;'
    };
    return escapeMap[match];
  });
}

jQuery('#typing_and_press_form').on('submit', function (event) {
    event.preventDefault();

    if (jQuery('#typing_and_press').val()){
       // 先转义用户输入再使用
       var enteredValue = htmlEscape(jQuery('#typing_and_press').val());
       jQuery('.typing-press .tagsgroupkeyup').append('<div class="tagstyle"><span>' + enteredValue + '</span><span class="remove">X</span></div>');
       jQuery('#typing_and_press').val('');
    }
})

额外安全建议 #

• 不要将用户输入直接放入href、src、onclick等属性中，即使做了转义也可能存在绕过风险。
• 前端防护仅为第一层，后端存储数据、输出内容到页面时也需要做对应的转义和校验，避免出现存储型XSS漏洞。

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