基于JavaScript實(shí)現(xiàn)一個(gè)動(dòng)態(tài)脫敏指令

更新時(shí)間：2024年12月28日 13:53:48 作者：JYeontu

數(shù)據(jù)脫敏是指在不影響數(shù)據(jù)分析結(jié)果的準(zhǔn)確性前提下,對(duì)原始數(shù)據(jù)中的敏感字段進(jìn)行處理,從而降低數(shù)據(jù)敏感度和減少個(gè)人隱私風(fēng)險(xiǎn)的技術(shù)措施,下面我們就來(lái)看看如何實(shí)現(xiàn)一個(gè)動(dòng)態(tài)脫敏指令吧

所謂的數(shù)據(jù)脫敏，是指在不影響數(shù)據(jù)分析結(jié)果的準(zhǔn)確性前提下，對(duì)原始數(shù)據(jù)中的敏感字段進(jìn)行處理，從而降低數(shù)據(jù)敏感度和減少個(gè)人隱私風(fēng)險(xiǎn)的技術(shù)措施。在現(xiàn)在這個(gè)大數(shù)據(jù)時(shí)代，個(gè)人隱私信息在互聯(lián)網(wǎng)上傳播的幾率是很大的，因此作為前端工程師，我們很多時(shí)候也需要在視圖層面對(duì)數(shù)據(jù)進(jìn)行脫敏展示處理。

效果展示

體驗(yàn)地址

http://jyeontu.xyz/jvuewheel/#/JDesensitizationView

指令實(shí)現(xiàn)

脫敏函數(shù)

參數(shù)處理

接受三個(gè)參數(shù) str（待脫敏的字符串）、config（脫敏配置對(duì)象）和 fn（可選的自定義處理函數(shù)）。首先對(duì) str 進(jìn)行了 trim 操作并強(qiáng)制轉(zhuǎn)換為字符串類(lèi)型，確保輸入數(shù)據(jù)的規(guī)范性。
若存在自定義函數(shù) fn，則直接調(diào)用該函數(shù)并返回結(jié)果，給予開(kāi)發(fā)者靈活定制脫敏邏輯的空間。
當(dāng) str 為空字符串時(shí)，直接返回空，簡(jiǎn)潔處理邊界情況。

const desensitization = (str, config, fn) => {
    str = str.trim() + "";
    if (fn) {
        return fn(str);
    }
    if (!str) {
        return "";
    }
    …………
}

配置解析與默認(rèn)值設(shè)定

從 config 中解構(gòu)出 before（脫敏前保留的字符數(shù)）和 after（脫敏后保留的字符數(shù)），并提供了默認(rèn)值 0。同時(shí)獲取 type（數(shù)據(jù)類(lèi)型標(biāo)識(shí)，如 phone、email 等）和 ch（用于替換敏感字符的符號(hào)，默認(rèn)為 *）。
根據(jù)不同的 type，對(duì) before 和 after 進(jìn)行了智能的默認(rèn)值調(diào)整。例如對(duì)于 phone 類(lèi)型，若字符串長(zhǎng)度小于 11，則合理調(diào)整 before 為 2，after 為 2，以適配常見(jiàn)的手機(jī)號(hào)碼格式；對(duì)于 email 類(lèi)型，則根據(jù) @ 符號(hào)分割字符串來(lái)確定 after 的值，精準(zhǔn)定位域名部分進(jìn)行保護(hù)。

let { before = 0, after = 0 } = config;
const { type, ch = "*" } = config;
const len = str.length;
switch (type) {
    case "phone":
        before = "3";
        after = "4";
        if (len < 11) {
            before = 2;
            after = 2;
        }
        break;
    case "email":
        before = "1";
        if (str.split("@").length > 1) after = str.split("@")[1].length + 1;
        break;
    case "idCard":
        before = "3";
        after = "4";
        break;
    case "name":
        before = "1";
        after = len > 2 ? 1 : 0;
        break;
}

構(gòu)造正則進(jìn)行脫敏

計(jì)算出需要顯示的真實(shí)字符數(shù) show，基于此構(gòu)建正則表達(dá)式 reg。通過(guò) replace 方法，按照正則表達(dá)式的匹配規(guī)則，用指定的 ch 符號(hào)替換中間的敏感字符，最終返回脫敏后的字符串。

const show = Math.max(len - before - after, 0);
const reg = [
    new RegExp(`^(.{${before}}).{${show}}(.{${after}})$`),
    `$1${ch.repeat(show)}$2`,
];
return str.replace(reg[0], reg[1]);

指令執(zhí)行函數(shù)

參數(shù)提取與初始值獲取

從指令綁定的值 binding.value 中提取出 params，進(jìn)一步解構(gòu)得到 config 和 fn。同時(shí)獲取元素 el 的相關(guān)屬性值，如 innerHTML、getAttribute 獲取的原始值 originVal，并初始化 inputOriginVal，為后續(xù)處理用戶(hù)輸入做準(zhǔn)備。

const params = binding.value || {};
const { config, fn } = params;
let inputOriginVal = "";
let originVal = el.getAttribute("desensitization-originVal") || "";

文本節(jié)點(diǎn)脫敏處理

當(dāng) el.innerHTML 存在時(shí)，意味著是對(duì)頁(yè)面展示的文本內(nèi)容進(jìn)行脫敏。首先確保 originVal 的獲取，若為空則從 el.innerText 中獲取并設(shè)置為原始值，存儲(chǔ)在自定義屬性 desensitization-originVal 中，然后調(diào)用 desensitization 函數(shù)對(duì) originVal 進(jìn)行脫敏處理，并更新 el.innerHTML。

if (el.innerHTML) {
    if (!originVal) {
        el.setAttribute("desensitization-originVal", el.innerText);
        originVal = el.innerText;
    }
    el.innerHTML = desensitization(originVal, config, fn);
    return;
}

輸入框交互處理

針對(duì)輸入框元素，先移除之前可能存在的焦點(diǎn)和失焦事件監(jiān)聽(tīng)器，避免重復(fù)綁定。然后分別為 focus 和 blur 事件添加監(jiān)聽(tīng)器。在 focus 事件中，將輸入框的值恢復(fù)為原始輸入值 inputOriginVal；在 blur 事件中，獲取當(dāng)前輸入值 value，更新 inputOriginVal，并調(diào)用 desensitization 函數(shù)對(duì) value 進(jìn)行脫敏處理，最后更新輸入框的顯示值。

if (fouceListerner) {
    el.removeEventListener("focus", fouceListerner);
}
fouceListerner = el.addEventListener("focus", (event) => {
    event.target.value = inputOriginVal;
});
if (blurListerner) {
    el.removeEventListener("blur", blurListerner);
}
blurListerner = el.addEventListener("blur", (event) => {
    const value = event.target.value;
    inputOriginVal = value;
    const newVal = desensitization(value, config, fn);
    event.target.value = newVal;
});

指令生命周期鉤子

bind

當(dāng)指令首次綁定到元素上時(shí)執(zhí)行。在此處調(diào)用 doDesensitization 函數(shù)，嘗試進(jìn)行脫敏處理，若出現(xiàn)錯(cuò)誤則捕獲并打印 bindErr 相關(guān)的錯(cuò)誤信息，確保指令初始化的穩(wěn)定性。

bind: function (el, binding) {
    try {
        doDesensitization(el, binding);
    } catch (err) {
        console.error("bindErr", err);
    }
}

update

當(dāng)指令所在組件的數(shù)據(jù)更新時(shí)觸發(fā)。首先判斷元素 el 的 innerText 是否存在，若存在則調(diào)用 doDesensitization 函數(shù)進(jìn)行重新脫敏處理，同樣對(duì)錯(cuò)誤進(jìn)行捕獲并打印 updateErr，保證數(shù)據(jù)更新后的脫敏效果持續(xù)有效。

update: function (el, binding) {
    if (!el.innerText) return;
    try {
        doDesensitization(el, binding);
    } catch (err) {
        console.error("updateErr", err);
    }
}

unbind

當(dāng)指令從元素上移除時(shí)執(zhí)行。主要任務(wù)是移除之前綁定的焦點(diǎn)和失焦事件監(jiān)聽(tīng)器。

unbind: function (el) {
    if (fouceListerner) {
        el.removeEventListener("focus", fouceListerner);
    }
    if (blurListerner) {
        el.removeEventListener("blur", blurListerner);
    }
}

指令使用

電話(huà)號(hào)碼脫敏

內(nèi)置有電話(huà)的脫敏類(lèi)型，對(duì)于11位數(shù)的手機(jī)號(hào)碼，脫敏方式是顯示前3位和后4位；對(duì)于小于11位數(shù)的，比如7位數(shù)的電話(huà)號(hào)碼，脫敏方式是顯示前2位和后2位。

<div class="content">
    <input
        v-JDesensitization:params="params"
        placeholder="輸入需要脫敏的字符"
        class="input-content"
    />
    <div v-JDesensitization:params="params" class="div-content">
        15012345678
    </div>
</div>
<script>
export default{
    data(){
        return {
            params:{
                "config": {
                    "type": "phone",
                    "before": ,
                    "after": "",
                    "ch": "*"
                },
                "fn": ""
            },
        }
    }
}
</script>

身份證號(hào)碼脫敏

內(nèi)置有身份證號(hào)碼的脫敏類(lèi)型，脫敏方式是顯示前3位和后4位；

<div class="content">
    <input
        v-JDesensitization:params="params"
        placeholder="輸入需要脫敏的字符"
        class="input-content"
    />
    <div v-JDesensitization:params="params" class="div-content">
        330621199909091234
    </div>
</div>
<script>
export default{
    data(){
        return {
            params:{
                "config": {
                    "type": "idCard",
                    "before": ,
                    "after": "",
                    "ch": "*"
                },
                "fn": ""
            },
        }
    }
}
</script>

姓名脫敏

內(nèi)置有姓名的脫敏類(lèi)型，兩個(gè)字的姓名脫敏方式是顯示第1位；大于兩個(gè)字的姓名脫敏方式是顯示第一個(gè)字和最后一個(gè)字。

<div class="content">
    <input
        v-JDesensitization:params="params"
        placeholder="輸入需要脫敏的字符"
        class="input-content"
    />
    <div v-JDesensitization:params="params" class="div-content">
        張三風(fēng)
    </div>
</div>
<script>
export default{
    data(){
        return {
            params:{
                "config": {
                    "type": "name",
                    "before": ,
                    "after": "",
                    "ch": "*"
                },
                "fn": ""
            },
        }
    }
}
</script>

郵箱脫敏

內(nèi)置有郵箱的脫敏類(lèi)型，脫敏方式是顯示第一位和@及以后的字符。

<div class="content">
    <input
        v-JDesensitization:params="params"
        placeholder="輸入需要脫敏的字符"
        class="input-content"
    />
    <div v-JDesensitization:params="params" class="div-content">
        123456@163.com
    </div>
</div>
<script>
export default{
    data(){
        return {
            params:{
                "config": {
                    "type": "email",
                    "before": ,
                    "after": "",
                    "ch": "*"
                },
                "fn": ""
            },
        }
    }
}
</script>

自定義脫敏

可以自定義脫敏代替字符，默認(rèn)為*

修改 config 中的 ch 參數(shù)即可自定義脫敏代替字符

params: {
    config: {
        type: "phone",
        before: "",
        after: "",
        ch: "~",
    },
    fn: "",
}

可以自定義脫敏字符頭尾顯示位數(shù)

修改 config 中的 before 和 after 參數(shù)即可自定義脫敏顯示位數(shù)，type 需要修改為內(nèi)置類(lèi)型以外的，直接傳空即可。

params: {
    config: {
        type: "",
        before: "2",
        after: "2",
        ch: "~",
    },
    fn: "",
}

可以自定義脫敏函數(shù)進(jìn)行脫敏

可以直接在參數(shù)的 fn 中傳入一個(gè)脫敏函數(shù)，如果傳入了 fn，其優(yōu)先級(jí)最高，則其他參數(shù)都不會(huì)生效，會(huì)直接調(diào)用傳入的 fn函數(shù) 進(jìn)行脫敏，如：

(str) => {
  return str[0] + '@'.repeat(str.length - 1);
}

應(yīng)用場(chǎng)景

用戶(hù)信息填寫(xiě)，輸入框聚焦時(shí)顯示真實(shí)數(shù)據(jù)供用戶(hù)進(jìn)行修改，失焦時(shí)顯示脫敏后的數(shù)據(jù)。

（至于為什么會(huì)有這個(gè)場(chǎng)景，需要去問(wèn)一下產(chǎn)品經(jīng)理）

到此這篇關(guān)于基于JavaScript實(shí)現(xiàn)一個(gè)動(dòng)態(tài)脫敏指令的文章就介紹到這了,更多相關(guān)JavaScript動(dòng)態(tài)脫敏指令內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: