登录脚本添加密码加密后无法正常跳转的问题排查请求

核心问题分析 #

1. 变量拼写错误
   代码中条件判断里的decodedPasword少写了一个s，正确变量名是decodedPassword。如果这个错误存在，输入正确密码也不会进入成功分支；如果实际运行中你已经修正了这个拼写，那下面的问题才是导致无法跳转的关键。

2. getCookie函数未定义
   你调用了getCookie("login")来读取cookie，但代码里没有实现这个函数，浏览器会抛出ReferenceError: getCookie is not defined的错误，导致后续的跳转代码被中断执行——这就是弹出成功提示但无法跳转的直接原因。

3. 严重安全隐患
   用Base64编码存储密码完全没有安全意义，window.atob可以直接解码出原始密码，任何查看页面源码的人都能轻松获取你的测试密码，这不是加密，只是编码。

修复后的代码示例 #

const loginForm = document.getElementById("login-form");
const loginButton = document.getElementById("login-form-submit");
const loginErrorMsg = document.getElementById("login-error-msg");
// 注意：此处仅为演示，实际开发绝对不能在前端存储密码
const encodedPassword = "YTI5NWU0MiFAc2xvcEVHYW1lISQ=";
const decodedPassword = window.atob(encodedPassword);

loginButton.addEventListener("click", (e) => {
    e.preventDefault();
    
    const username = loginForm.username.value;
    const password = loginForm.password.value;
    
    // 修复拼写错误
    if (username === "ls120cbaJp" && password === decodedPassword) {
        alert("You have successfully logged in.");
        
        // 设置cookie，补充path参数确保站点内生效
        document.cookie = "login=True; path=/";
        
        // 验证通过后直接跳转，无需重复读取cookie验证
        window.location.replace("https://datlickk421503912fo3e35fjdgket353kjj3l.github.io/Ko3h2hlrkjdhflkj3hklgrjfKo3h2hlrkjdhflkj3hklgrjfKo3h2hlrkjdhflkj3hklgrjfKo3h2hlrkjdhflkj3hklgrjf/unity.html");
        
        // 如需删除cookie，设置过期时间为过去的时间即可
        // document.cookie = "login=True; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;";
    } else {
        loginErrorMsg.style.opacity = 1;
    }
})

关键修复点说明 #

• 修正decodedPasword的拼写错误，确保条件判断逻辑正常。
• 移除不必要的getCookie调用：既然已经通过用户名密码验证，直接执行跳转即可，无需额外验证cookie。
• 补充cookie的path=/参数，确保cookie在整个站点范围内有效。

重要安全建议 #

1. 禁止前端存储密码：无论是明文还是Base64编码，都完全不安全。正确流程是前端将用户名和密码提交到后端，后端使用bcrypt等哈希算法验证密码。
2. 前端验证仅作体验优化：必须在后端再做一次验证，防止恶意绕过前端直接请求接口。
3. cookie安全配置：如果用cookie保存登录状态，建议添加HttpOnly、Secure、SameSite等属性，防范XSS和CSRF攻击。

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