[筆記] 前端 URL 鏈結帶入的參數加密 Base64 編碼 @地瓜大的飛翔旅程

章節連結

Can I Use?
程式碼

在前端開發上由於一些需要，不太想讓於網址列後方所帶的參數被直接讀懂。這時想起過往在看一些 Marco 體驗師有關於解密相關的影片時，有提及Base 64 編碼。而瀏覽器和 JavaScript 中是有內建這些方法的，可以直接拿來使用。

Can I Use?

根據 Can I Use – encodeURIComponent 和 Can I Use – decodeURIComponent 的資料上顯示，IE 10 以後的主流瀏覽器都可以使用。另外，還需要搭配 btoa() 和 atob () 兩個方法來分別產生 Base64 編碼和解碼 Base 64 的字串。

程式碼

1. 使用起來相當輕巧，步驟如下：

const text = 'test123'
const decodeBase64String = function (value){
    return value.trim().length > 0
        ? window.atob(window.decodeURIComponent(value.trim()))
        : 'Please check your input.'
}
window.encodeURIComponent(window.btoa(text)) // 'dGV4dDEyMw%3D%3D'
decodeBase64String(window.encodeURIComponent(window.btoa(text))) // test123