ASP.NET WebForm信用卡页面自动出现PIN#输入框问题排查求助

1. 浏览器端快速定位DOM来源 #

• 右键点击PIN输入框和对应提示文字，选择「检查」打开DevTools元素面板，查看该DOM节点的父级容器、class/id属性、相邻节点，确认是否属于你已知的页面组件
• 切换到DevTools的「源代码」面板，按Ctrl+Shift+F（Mac为Cmd+Opt+F）全局搜索关键词：PIN#、5% Discount with Pin On Debit Transactions、debit discount，直接定位生成该文本的JS代码或后端渲染模板片段
• 打开DevTools的「性能」面板，刷新页面录制完整加载过程，录制完成后筛选「脚本」执行环节，查看DOM变更的触发堆栈，直接定位是哪段JS执行了插入节点的操作
• 切换到DevTools的「网络」面板，筛选「JS」资源，查看是否有非自有域名的第三方支付、收单相关脚本加载，这类第三方脚本常会自动注入表单元素
• 禁用所有浏览器扩展后再刷新页面，排除是支付类、优惠券类扩展自动插入的元素

2. 服务端代码排查 #

• 全局搜索WebForm项目中所有.aspx、.ascx、.ashx、.cs文件中的上述关键词，排查是否有母版页、用户控件、后端Render方法中硬编码了该内容，或是调用了第三方支付SDK的渲染方法生成了该节点
• 确认是否配置了第三方支付网关、收单服务的前端嵌入脚本，很多收单服务会根据卡BIN判断是借记卡后自动插入PIN输入框和优惠提示，即使你在后台关闭了优惠功能，也可能是前端脚本未更新、缓存未清导致残留
• 检查IIS配置中是否有注入脚本的模块、站点是否被劫持插入了额外内容，可通过curl直接请求页面地址，对比返回的原始HTML中是否已经存在该PIN框相关代码：

  curl 你的页面完整URL > page.html
  # 打开page.html搜索相关关键词，确认是服务端返回就有还是前端JS动态插入
  

3. 缓存相关排查 #

• 清理服务器端输出缓存、CDN缓存、浏览器端缓存后再访问，排除旧版本代码缓存导致的残留
• 确认是否有静态资源代理、CDN节点缓存了旧的JS文件，导致虽然修改了代码但用户端还是加载旧脚本插入元素

相关异常界面截图：

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