攻击者能否通过XSS/CSRF等攻击窃取JS局部变量及网页密码？

存在一个不使用任何Cookie的网页，代码如下：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <script>
    async function handleSubmit(event) {
      event.preventDefault();
      const username = document.getElementById('username').value.trim();
      const password = document.getElementById('password').value.trim();
      document.getElementById('username').value = "";
      document.getElementById('password').value = "";

      const response = await fetch('/path', {
        method: 'GET',
        headers: {
          'Authorization': 'Basic ' + btoa(username + ':' + password)
        },
      });

      const message = await response.text();
      document.getElementById('response_message').innerText = message;

      if (response.ok) {
        document.getElementById('do_something').onclick = async () => {
          const response = await fetch('/another_path', {
            method: 'GET',
            headers: {
              'Authorization': 'Basic ' + btoa(username + ':' + password)
            },
          });
        }
      }

    }
  </script>
</head>

<body>
  <form id="signinForm" onsubmit="handleSubmit(event)">
    <label for="username">Username:</label><br>
    <input type="text" id="username" required><br><br>

    <label for="password">Password:</label><br>
    <input type="password" id="password" required><br><br>

    <button type="submit" id="submit_btn">Submit</button>
  </form>

  <div id="response_message"></div>
  <button id="do_something">Do something</button>
</body>

</html>

用户输入密码并提交后，网页会展示响应内容，随后允许用户执行其他操作。该响应内容可能包含攻击者提供的内容，脚本将用户名和密码存储在handleSubmit函数的局部变量中，同时通过闭包被后续绑定的do_something点击事件函数引用。请问攻击者是否有可能窃取该密码？

结论：攻击者可通过存储型XSS攻击窃取密码，CSRF无法实现此目的 #

1. 存储型XSS的利用路径 #

虽然当前代码用innerText渲染响应内容，看似能避免HTML注入，但只要攻击者能控制响应内容，且存在以下任一情况，就能窃取密码：

• 后续页面逻辑将response_message的内容改为innerHTML渲染，注入的恶意脚本直接执行；
• 攻击者通过其他方式在页面上下文注入脚本（比如页面存在其他未被修复的XSS漏洞）。

一旦恶意脚本在同一页面执行，就能利用闭包特性获取到username和password：

• 触发do_something按钮的点击事件，同时拦截fetch请求，解析Authorization头里的Base64编码内容，还原出明文密码；
• 覆盖全局fetch方法，在回调执行时直接捕获凭证参数；
• 篡改do_something的点击回调函数，直接将密码发送到攻击者的服务器。

2. CSRF无法窃取密码的原因 #

CSRF的核心是诱导用户发起目标站点的请求，但受浏览器同源策略限制，第三方站点的脚本无法访问目标页面的DOM、变量或请求响应内容，只能执行请求，无法读取局部变量中的密码。

3. 其他潜在攻击场景 #

• 本地环境被攻破：如果用户浏览器安装了恶意扩展，或者在开发者工具中保留了页面上下文，攻击者可直接从闭包内存中读取变量，但这属于用户本地环境问题，而非网页自身漏洞；
• 代码逻辑漏洞：若后续功能存在未被过滤的DOM操作，攻击者可通过注入脚本遍历闭包获取敏感信息。

修复建议 #

• 绝不客户端持久化存储密码，哪怕是闭包持有，应使用服务器颁发的短期令牌代替，提交后立即丢弃密码；
• 对所有用户可控内容做严格HTML转义，确保渲染方式不会被绕过；
• 避免通过闭包长期持有敏感凭证，按需生成、用完即销毁；
• 启用内容安全策略（CSP），限制脚本执行来源，阻断XSS脚本注入。

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