安基網 首頁 電腦 電腦學堂 查看內容

奇思妙想:用JS給圖片加口令

2019-10-30 08:36| 投稿: xiaotiger |來自: 互聯網


免責聲明:本站系公益性非盈利IT技術普及網,本文由投稿者轉載自互聯網的公開文章,文末均已注明出處,其內容和圖片版權歸原網站或作者所有,文中所述不代表本站觀點,若有無意侵權或轉載不當之處請從網站右下角聯系我們處理,謝謝合作!

摘要: 本文展示一種用JS給圖片加口令的方法,可以將任意圖片轉化為html,輸入正確的口令才能打開查看圖片。效果如下:效果說明1、它最終只有一個文件。并非一張圖片和一個html,不是在html中引用圖片,而是將圖片放入了html。2、打開時,必須輸入的正確口令,口令錯誤則不能打開。3、口令不能被獲取!查看htm ...
本文展示一種用JS給圖片加口令的方法,可以將任意圖片轉化為html,輸入正確的口令才能打開查看圖片。效果如下:

效果說明

1、它最終只有一個文件。并非一張圖片和一個html,不是在html中引用圖片,而是將圖片放入了html。

2、打開時,必須輸入的正確口令,口令錯誤則不能打開。

3、口令不能被獲取!查看html源碼無法找到口令,雖然口令確實是存放在文件中。

直入主題,下面介紹此效果的技術原理和實現方法:

技術原理

1、將圖片轉化為base64字符串,這樣可以直接將字符串寫入html,而無需引用外部的圖片。

2、打開時要求輸入口令、口令校驗都由JS實現。

3、口令隱藏,不能通過查看網頁源碼獲取。

實現方法

1、將圖片放入網頁的方法非常簡單,只要將圖片轉為base64編碼字符即可,轉換使用canvas進行,代碼如下:

function getImageBase64(img, ext) { 
//創建canvas DOM元素,并設置其寬高和圖片一樣
var canvas = document.createElement("canvas");
canvas.width = img.width;
canvas.height = img.height;
var ctx = canvas.getContext("2d");
//使用畫布畫圖
ctx.drawImage(img, 0, 0, img.width, img.height);
var dataURL = canvas.toDataURL("image/" + ext);

//返回的是一串Base64編碼
canvas = null;
return dataURL;
}
var img_path ="yxdj250x250.jpg";
//網頁中需提前設定一個id為icon的img元素
var user_icon = document.getElementById('icon');
fileExt="";
//獲取base64編碼
user_icon.src = img_path;
user_icon.onload = function () {
//base64編碼
base64 = getImageBase64(user_icon, fileExt);
console.log(base64);
}

操作方法:準備一張圖片,上面的代碼中使用的是:yxdj250x250.jpg,實際操作時換為自己要轉化的圖片。

將以上js代碼放入html中,打開運行,然后從瀏覽器的調試工具中可以看到輸出了圖片對應的base64編碼,效果如下:

這時,如果要在網頁中顯示圖片,只要使用img src=""方法,將上面輸出的編碼填入src即可。

2、接下來實現口令功能,代碼如下:

var pass = prompt('請輸入口令','');
if (pass != "123"){
history.go(-1);
alert("口令錯誤。");
}
else{
show_pic();
}

從以上的功能邏輯可以看出,如果輸入口令:123,則顯示圖片,反之不能打開。

3、口令能被直接查看到,顯然是不行的。那樣隨便誰懂點電腦知識都可以獲取口令,就失去了口令保護的效果。

或許有人會說:不要使用名文比較,使用變量比較、把口令字符隱藏起來。但也不是個有效的辦法。懂點技術的都知道瀏覽器可以斷點調試的,只要來到斷點處,就可以直接查看密碼:

真正有效的辦法是什么呢?JS代碼混淆加密!口令也是存儲在JS代碼中的,只要將代碼混淆加密,口令也會一起被加密,就沒辦法找到密碼了,而且還可以防斷點調試。

下面是JS代碼混淆加密后的代碼效果:

JS代碼混淆,國際上有JScrambler,國內有JShaman,混淆效果差不多,JShaman的使用起來更方便一些,中文界面、操作也更符合國人習慣。

上面的代碼是用JShaman混淆出來的,有人擔心混淆后的代碼會被破解、還原回原始代碼。

經本人測試,這種情況不存在的,下面進行測試:

需要注意的是,進行代碼混淆時,一定要使用“字符串加密”功能,因為這是我們進行混淆的關鍵需求,只要選了這一項,密碼才會隱藏起來。

對上面圖中的混淆代碼進行反混淆。

這里用的是esprima、escodegen。這里在nodejs的環境下使用:

首先安裝這兩個組件:

npm install esprima
npm install escodegen

然后準備以下代碼:

然后執行,這時會輸出反混淆結果:

可見,反混淆后得到的代碼,跟原始代碼差別非常大,多了很多很多復雜的邏輯關系,字符也是混亂不堪,代碼幾乎是無法閱讀,更別說理解出原本代碼含義了。

從這解密后的代碼中,當然也沒辦法找到原來的密碼“123”。

我們回到正文。

因為圖片的base64編碼字符串比較長、內容量大,混淆加密時,建議只對關鍵代碼進行混淆,否則生成的代碼可能會太過龐大。

經過這一系列操作后,一張被口令保護的圖片就生成了。

掌握了一個很絢酷的技能吧!

同時,這個技能在很多場合,是有實際用途的,相信你會遇的到。



小編推薦:欲學習電腦技術、系統維護、網絡管理、編程開發和安全攻防等高端IT技術,請 點擊這里 注冊賬號,公開課頻道價值萬元IT培訓教程免費學,讓您少走彎路、事半功倍,好工作升職加薪!

本文出自:https://www.toutiao.com/a6752656236488950286/

免責聲明:本站系公益性非盈利IT技術普及網,本文由投稿者轉載自互聯網的公開文章,文末均已注明出處,其內容和圖片版權歸原網站或作者所有,文中所述不代表本站觀點,若有無意侵權或轉載不當之處請從網站右下角聯系我們處理,謝謝合作!


鮮花

握手

雷人

路過

雞蛋

相關閱讀

最新評論

 最新
返回頂部
湖北快3 购买技巧