鯤圭填鴨初實現｜給你代碼

前言

最近有一個需求需要做一款能夠應用於登錄頁面，自動記錄並且填充的這樣的一個插件。使用以後媽媽再也不用擔心我記住密碼了。

疑問

實現前有幾個大疑問,

1. 如何收集用戶的信息，收集的保障
2. 信息保證安全性？只發送加密後的內容

實現

通過dom遍歷相關的節點，text ,password。把這些屬性都保存起來，儲存其中的關鍵屬性如id還有name字。這就是一次簡單的收集。然後要把他們轉換為對象。怎麼轉就是下面一段簡單的東西。

<code>function createObj(obj, lists) {
    let countUnName = 0;
    for (let i = 0; i         if (getComputedStyle(lists[i]).display === "none" || getComputedStyle(lists[i]).visibility === "hidden" || lists[i].clientWidth ===
            0 || lists[i].value === "") {
            continue;
        }
        const content = {
            value: lists[i].value,
            name: lists[i].name,
            id: lists[i].id,
        }
        if (lists[i].name) {
            if (obj[lists[i].name]) { 

                obj[lists[i].name + "[1]"] = content;
            } else {
                obj[lists[i].name] = content;
            }
        } else {
            obj["unname" + countUnName] = content;
            countUnName++;
        }
    }
}
/<code>

按照name去收集他的屬性（name，id，value），如果遇到重名的（網頁代碼name重名)那麼就在其後面加上後綴。值得注意的是，我這裡忽略一些隱藏的或者說是用戶不會去接觸到的元素沒有去收集他。

然後通過收集的這段信息，轉換為字符串，然後進行加密。我這裡運用的aes加密。由於有長度限制，所以把字符串每段分割開來，假設代碼是這樣的（這裡假設長度為26）。

<code>/**
 * @param {String} pt
 * @return {[]}
 */
function aesPassword(pt) {  
    const room = [];
    let s = 0;
    while (1) {
        const temp = pt.slice(s, s + 26);
        if (temp === "") {
            break;
        }
        room.push(加密以後的東西);
        s += 26;
    }
    return room;
}
/<code> 

這樣返回的對象是這樣的

這樣就變成一段數組，下次匹配這個數據再還原也可以了。

總結

通過這些如上這些操作我們已經可以獲得和傳遞相關數據，當然光靠這些是無法完成填鴨應用的。後面的東西，讓我們下次再說。

給你代碼｜往期回顧：

閱讀更多 鯤圭雲計算 的文章

關鍵字: value 填鴨 let