有時候在網路上註冊會員
但密碼太多又不好管理
所以想到如果我只記一個高強度密碼
然後每個網站的密碼用下列這方法產生
會不會有什麼問題？

1. password = toBase64(hmac_sha256(salt=原始密碼, data=網站名稱+日期))
2. 這邊 hmac_sha256 是舉例，可以用其他類似的雜湊方法
3. 長度太長的話可以截斷
4. 網站名稱+日期 可以記錄，不怕給人看

補個大概的程式碼：https://jsfiddle.net/y6o28c34/

html

<label for="pwd-main">主密碼</label>
<input id="pwd-main" type="password" placeholder="主密碼">
<table>
    <thead>
        <tr>
            <th>網站</th>
            <th>長度</th>
            <th>添加</th>
            <th></th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>
                <input type="text" id="site-id">
            </td>
            <td>
                <input type="number" id="pwd-len" value="16">
            </td>
            <td>
                <input type="text" id="pwd-pad">
            </td>
            <td>
                <button id="copy-btn" onclick="copyPassword(-1)">複製</button>
            </td>
        </tr>
    </tbody>
    <tbody id="site-list"></tbody>
</table>

javascript

// config 的內容可以記在紙上或印出來，不怕別人看
const config = [
    {
        data: 'it邦幫忙@2022-05-03',
        len: 16,
        pad: ''
    },
    {
        data: '要特殊字元的某站@1977-01-01',
        len: 12,
        pad: '@#$^'
    }
];

document.querySelector('#site-list').innerHTML = config.map((cfg, idx) => {
    //其實 len 跟 pad 可以不用顯示
    return `
    <tr>
        <td>${cfg.data}</td>
        <td>${cfg.len}</td>
        <td>${cfg.pad}</td>
        <td><button onclick="copyPassword(${idx})">複製</button></td>
    </tr>`;
}).join('');

async function copyPassword(idx) {
    let salt = document.querySelector('#pwd-main').value;
    if(salt==='') {
        alert('主密碼不能為空');
        return;
    }
    if(idx >= 0) {
        var { data, len, pad } = config[idx];
    } else {
        var data = document.querySelector('#site-id').value;
        var len = document.querySelector('#pwd-len').value;
        var pad = document.querySelector('#pwd-pad').value;
    }
    let hashVal = await getHmacSha512(salt, data);
    let result = hashVal.slice(0, len) + pad;
    navigator.clipboard.writeText(result);

    //這邊是測試才把 result 顯示出來
    alert(`已複製：${result}`);
}

async function getHmacSha512(salt, data) {
    let coder = new TextEncoder();
    data = coder.encode(data);
    salt = coder.encode(salt);
    let key=await crypto.subtle.importKey('raw', salt, {
        name: 'HMAC',
        hash: 'SHA-512'
    }, false, ['sign', 'verify']);
    let buf = await crypto.subtle.sign('HMAC', key, data);
    let u8arr = new Uint8Array(buf);
    let s = String.fromCharCode.apply(null, u8arr);
    return btoa(s);
}