frontend-tips 前端安全要点parseInt 基数、新标签页链接与严格相等的4个隐藏陷阱【免费下载链接】frontend-tipsSuper tiny, quick tips, tricks and best practices of front-end development项目地址: https://gitcode.com/gh_mirrors/fr/frontend-tipsfrontend-tips是一个收录了 170 条简洁技巧的前端最佳实践合集覆盖 JavaScript、HTML 与 CSS。本文从中精选4 个容易被忽视的前端安全陷阱parseInt未传基数、新标签页链接缺少relnoopener、未用严格相等比较。这些小问题可能让数字变得面目全非、页面被恶意劫持或让错误逻辑悄悄通过。 陷阱 1parseInt 不传基数 → 字符串可能被当八进制解析parseInt(value, radix)接收两个参数第二个就是基数进制的基。如果不传JS 引擎会自动猜以0x/0X开头 → 按16 进制十六进制解析其他情况 → 按10 进制十进制解析在旧版 JavaScript 中以0开头的字符串 → 按8 进制八进制解析不同版本、不同浏览器的推断规则并不一致同样的代码在不同设备上可能得到不同结果。解法很简单——始终显式传入基数parseInt(0xF); // 15自动推断为十六进制 parseInt(0xF, 16); // ✅ 15明确指定十六进制 这一陷阱在项目中的完整说明见 always-pass-the-radix-to-parseint.mdx。️ 陷阱 2强行指定错误基数会静默返回 0更隐蔽的坑是传入的基数与字符串不匹配时parseInt不会报错而是安静地返回 0。parseInt(0xF, 10); // 0 —— 按十进制解析时x 不是合法数字这种静默失败比报错更危险业务逻辑会带着 0 继续往下跑bug 极难定位。关联技巧想把整串完整转为数字可用一元运算符参见 convert-string-to-number.mdx解析前先去除空格否则parseInt(12 345)只会得到 12参见 trim-the-spaces-before-parsing-a-number.mdx️ 陷阱 3target_blank 不加 relnoopener → 链接劫持用target_blank在新标签页打开链接时若不补充安全属性新标签页能通过window.opener访问原页面的window对象。恶意新页面可以这样做window.opener.location http://fake-website.example;这会把你的原始标签页重定向到一个假网站。如果假站 UI 与真站一模一样用户很可能毫无察觉地继续操作甚至输入账号密码——这就是经典的**反向标签钓鱼reverse tabnabbing**攻击。解决给链接加上relnoopener。更强的写法是relnoreferrer它除了修复上述安全问题还会阻止浏览器向新页面发送 Referer 头。!-- ❌ 不要这样写 -- a target_blank链接/a !-- ✅ 正确写法 -- a target_blank relnoopener链接/a部分现代浏览器Chrome 88会自动补充noopener行为但为了兼容旧浏览器仍建议手动写上该属性。详细说明见 always-use-noopener-or-noreferrer-for-links-opened-in-new-tabs.mdx。⚖️ 陷阱 4 不写 → 隐式类型转换比较变量时请始终使用严格相等运算符而不是宽松相等的。后者会先做类型转换再比较结果往往反直觉0 false; // true 0 ; // true 0 []; // true 0 false; // false ✅只比较值 类型不会发生任何转换意外。原理与更多示例见 use-the-strict-equality-operator-when-comparing-variables.mdx。✅ 快速自查三秒核对表场景❌ 不要✅ 应该字符串转数字parseInt(0xF)parseInt(0xF, 16)新标签页链接target_blanktarget_blank relnoopener变量比较a ba b这四个陷阱有一个共同点它们不报错只是悄悄给出错误结果。写代码时把假设显式声明出来传基数、写全属性、用严格相等就是最实用的前端安全实践。更多技巧可浏览项目的 README.md。【免费下载链接】frontend-tipsSuper tiny, quick tips, tricks and best practices of front-end development项目地址: https://gitcode.com/gh_mirrors/fr/frontend-tips创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考