如何通过 HTML 表单安全提交含特殊字符的文本（如代码）-html教程-PHP中文网

如何通过 HTML 表单安全提交含特殊字符的文本（如代码）

本文详解如何在不破坏 html 结构的前提下，将含引号、反斜杠等特殊字符的用户输入（如 javascript 代码）完整、可靠地通过 html 表单提交至后端，避免因属性值未正确转义导致的数据截断。

本文详解如何在不破坏 html 结构的前提下，将含引号、反斜杠等特殊字符的用户输入（如 javascript 代码）完整、可靠地通过 html 表单提交至后端，避免因属性值未正确转义导致的数据截断。

在 Web 开发中，常需通过

提交用户编写的代码片段（例如 console.log("one big pizza, please");）。若直接使用字符串拼接方式动态插入元素，极易引发 HTML 解析错误——尤其当 value 属性值中包含双引号（"）、单引号（'）、尖括号（）等特殊字符时，浏览器会将第一个未转义的 " 视为 value 属性的结束符，导致后续内容被截断或 DOM 解析异常。

根本问题在于：

event.target.innerHTML += `<input name="code" type="hidden" value="${code}">`;

该写法将原始字符串直接嵌入 HTML 字符串模板中，未对 code 做 HTML 实体编码。即使 JSON.stringify(code) 在 JS 中生成了合法的 JSON 字符串（如 "console.log(\"...\")"），它仍不是有效的 HTML 属性值——HTML 不识别 \ 转义序列，仅支持 "、' 等实体编码。

html-ppt-to-pdf

将使用 `

` 约定的 HTML 幻灯片转换为高保真、矢量文本 PDF（使用 Playwright + Chromium 原生 PDF 功能）。

下载

✅ 推荐解决方案：不操作 innerHTML，改用 DOM API 安全赋值

静态声明隐藏字段（推荐）
在 HTML 中预先定义好隐藏输入框，避免运行时拼接 HTML：

在提交事件中仅设置 .value 属性
利用 DOM 的 value 属性天然支持任意字符串（包括引号、换行、Unicode），无需手动转义：

document.querySelector("#submit-form")
  .addEventListener("submit", this.handleSubmit.bind(this));

handleSubmit(event) {
  const code = this.code; // 如：'console.log("one big pizza, please");'
  document.getElementById("code-input").value = code;
  // 或更简洁地：event.target.elements.code.value = code;
}

⚠️ 关键注意事项：

✅ input.value = str 是安全的：浏览器内部自动处理所有字符，不会触发 HTML 解析；
❌ 避免 innerHTML += ... 或 insertAdjacentHTML() 动态注入带用户数据的标签；
? 若必须动态创建，请使用 document.createElement() + el.setAttribute('value', str)，而非字符串拼接；
? 后端接收时，确保以 application/x-www-form-urlencoded 或 multipart/form-data 正确解析（现代框架默认支持）；
? 对于超长代码或富文本，建议搭配 encodeURIComponent() + 自定义 AJAX 提交，但普通表单场景 DOM 赋值已完全足够。

此方法简洁、兼容性好（支持所有现代浏览器及 IE11+），且从根本上规避了 XSS 风险与数据截断问题，是生产环境中提交用户生成文本的最佳实践。