杂项知识点

关于“空白”网页无 JavaScript 代码却有弹窗的问题

做题遇到的网页，源代码只有一个 html 文件，内容如下：

1
2
3
4
5
6
7
8
9

<!-- saved from url=(0029)chrome-error://chromewebdata/ -->
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    </head>
    <body>
    </body>
</html>

在没有任何 JavaScript 代码的情况下，打开网页时有一弹窗，有两个输入框分别输入账号密码，下方有“登录”或“取消”两选项。该网页源代码没有任何涉及弹窗的内容，所以出现弹窗看起来很反常。

其实是利用了 HTTP Basic 认证协议：

  • 当服务器返回 401 Unauthorized 状态码时，浏览器会强制自动弹出账号密码输入框。这是 HTTP 协议规定的标准行为，无需前端代码。

  • 用户输入的账号密码会被浏览器自动拼接为 username:password 格式，并进行 Base64 编码，最终添加到请求头的 Authorization 字段中：

    1
    Authorization: Basic base64(username:password)

    上述 base64(username:password) 实际替换为账号、冒号与密码拼接成的字符串的 Base64 编码。

    Basic 是认证方式，表示 HTTP Basic Authentication （基本认证），还有 Digest 、 Bearer Token (Token-Based) 以及其他许多认证方式。

全过程由浏览器原生实现，不需要任何 JavaScript 代码。