为什么不应在HTML行内使用JavaScript：Firebug调试安全隐患与解法

行内JavaScript的安全隐患

许多开发者习惯采用这种方式引入JavaScript逻辑。

 
<a href="#" onclick="al()">保存</a>

这种写法虽然操作便捷且兼容所有主流浏览器，但存在潜在风险。

尽管早期资料建议将HTML、CSS与JS分离以利于维护，但出于便利考虑，笔者仍常采用此法。然而，在使用Firefox进行调试时，发现行内脚本存在严重安全隐患，因为Firebug等工具可轻易使代码失效。

具体原因分析如下：

 
<html>
<head>
<script>
function al()
{ 
alert("good");
} 
</script>
</head>
<body>
<a href="#" onclick="al()">保存</a>
</body>
</html>

上述代码实现了点击链接后弹出提示框的功能。

运行效果如图所示：

若在Firefox中利用开发者工具定位到该a标签，并手动移除其中的JavaScript代码，再次点击该链接时将不再弹出对话框，具体操作见下图。

因此，若该点击事件用于验证用户输入数据的合法性，则前端验证机制将被绕过，无法起到拦截作用。

笔者从事ASP.NET开发，今日便遇到此问题。ASP.NET服务器控件包含前台与后台两个单击事件，笔者原本利用前台事件校验用户输入，合法则调用后台逻辑。但在Firefox调试过程中，发现即使数据校验不通过，仍可直接触发后台方法。此现象虽非高深技术，但值得分享以避免类似陷阱。

解决方案：DOM事件绑定

解决方案如下：

为a标签添加唯一ID，并通过脚本绑定事件，即可避免此类问题。

 
<a id="a1" href="#">保存</a>
<script>
document.getElementById("a1").onclick=function(){}
</script>