Firefox内置Dev Tool出现hidden input属性混淆浏览器bug咨询

问题背景 #

• 运行环境：自带开发者工具的普通版Firefox浏览器
• 异常表现：使用hidden类型input存储数据时，两次出现浏览器打乱所有input字段属性的问题，无法正确识别各input对应的属性内容。清空缓存、重新加载页面均无法修复，重启浏览器后恢复正常，已排除人为操作失误可能。

问题示例 #

服务端原始返回HTML #

<input id="test" type="hidden" value="Hello there"><input id="something" type="hidden" value="0">

Firefox解析后实际生效的DOM内容 #

<input id="test" type="hidden" value="0"><input id="something" type="hidden" value="Hello there">

此时id为test和something的两个输入框value属性出现交叉错乱。

可能的触发原因 #

• Firefox内核HTML解析缓存bug：部分版本Firefox在处理连续相同类型的自闭合标签时，偶发属性映射缓存错乱问题，该问题仅在特定渲染时序下触发，重启浏览器后解析上下文重置即可恢复。
• 内存软错误：浏览器运行过程中进程内存极低概率出现数据位翻转，导致DOM节点属性存储的数据异常，重启后内存重新分配即可解决。
• 第三方扩展干扰：如果安装了可修改DOM内容的浏览器扩展，部分扩展的注入逻辑存在漏洞时，可能错误批量修改同类型隐藏输入框的属性，重启后扩展重新加载临时恢复正常。

规避建议 #

• 不推荐使用连续相邻的hidden input存储关键业务数据，改用type="application/json"的script标签挂载全局静态数据，解析稳定性更高。
• 读取hidden input值时增加合法性校验，比如读取指定id的输入框值后，校验值格式、值域是否符合预期，不符合时触发页面硬重载。
• 若问题高频复现，可先升级Firefox到最新正式版，同时通过开发者工具网络面板确认服务端返回的原始响应内容是否正常，排除CDN、反向代理等中间层篡改内容的可能。

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