浏览器扩展中敏感数据的安全存储策略

// 假设在你的扩展的popup.html或某个内容脚本中
document.getElementById("loginButton").addEventListener("click", async function () {
    const usernameInput = document.getElementById("username");
    const passwordInput = document.getElementById("password");

    const username = usernameInput.value;
    const password = passwordInput.value;

    if (!username || !password) {
        alert("请输入用户名和密码。");
        return;
    }

    try {
        // 1. 将用户名和密码发送到后端服务器进行认证
        const response = await fetch("https://your-secure-backend.com/api/login", {
            method: "POST",
            headers: {
                "Content-Type": "application/json",
            },
            body: JSON.stringify({ username, password }),
        });

        if (response.ok) {
            const data = await response.json();
            const authToken = data.token; // 假设后端返回一个认证令牌

            // 2. 将认证令牌存储在 chrome.storage.local 中
            // 注意：authToken 仍可通过 DevTools 访问，但它不是原始密码，且有生命周期
            await chrome.storage.local.set({ userAuthToken: authToken });
            console.log("认证成功，令牌已存储。");

            // 登录成功后，可以更新UI或重定向用户
            // chrome.tabs.update({ url: "https://www.your-app-dashboard.com" });
            alert("登录成功！");
            // 清除密码输入框，避免明文密码残留在DOM中
            passwordInput.value = ''; 
        } else {
            const errorData = await response.json();
            alert(`登录失败: ${errorData.message || '用户名或密码不正确。'}`);
        }
    } catch (error) {
        console.error("登录请求出错:", error);
        alert("登录过程中发生网络错误，请稍后再试。");
    }
});

// 示例：如何在需要时从 chrome.storage.local 获取令牌并在后续请求中使用
async function getStoredAuthToken() {
    try {
        const result = await chrome.storage.local.get("userAuthToken");
        const token = result.userAuthToken;

        if (token) {
            console.log("获取到存储的认证令牌:", token);
            // 可以在此处使用令牌进行其他受保护的API请求
            // const protectedResponse = await fetch("https://your-secure-backend.com/api/protected-resource", {
            //     headers: {
            //         "Authorization": `Bearer ${token}`
            //     }
            // });
            // ... 处理受保护的响应
            return token;
        } else {
            console.log("未找到认证令牌，用户可能需要重新登录。");
            return null;
        }
    } catch (error) {
        console.error("获取认证令牌出错:", error);
        return null;
    }
}

// 假设在扩展初始化或需要认证的页面加载时调用
getStoredAuthToken();