整合營銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
際上，從源代碼中隱藏Javascript代碼是不可能的，因?yàn)镴avascript代碼是以明文形式下載到客戶端瀏覽器并由瀏覽器執(zhí)行完成的。
在本文中，我將與您分享一些阻礙用戶和使用戶難以閱讀 javascript 源代碼的方法：
混淆是一種改變代碼結(jié)構(gòu)以使其更難理解的技術(shù)。例如，變量名可以用隨機(jī)字符或字符串替換。這使得代碼更難閱讀和理解，如前所述，它不提供完整的保護(hù)。
網(wǎng)上有一些工具可以混淆 javascript 代碼，例如 JavaScript Obfuscator Tool[1]
為了維護(hù)敏感代碼的安全和隱私，可以在服務(wù)器端而不是客戶端執(zhí)行敏感計算。這種方法通常用于各種 Web 應(yīng)用程序，尤其是那些處理機(jī)密數(shù)據(jù)的應(yīng)用程序，例如網(wǎng)上銀行應(yīng)用程序。通過在服務(wù)器端執(zhí)行計算，敏感代碼對客戶端保持隱藏狀態(tài)，從而降低未經(jīng)授權(quán)訪問、篡改或盜竊的風(fēng)險。
在服務(wù)器端執(zhí)行計算時，Web 應(yīng)用程序通過從客戶端向服務(wù)器端發(fā)送請求來工作，然后服務(wù)器端處理請求并將結(jié)果發(fā)送回客戶端。這種方法確保敏感代碼不會暴露給客戶端，客戶端容易受到黑客攻擊或其他安全漏洞。
此外，服務(wù)器端的計算處理提供了多項(xiàng)優(yōu)勢，例如更快的性能、增強(qiáng)的可擴(kuò)展性和資源的有效利用。由于服務(wù)器端可以同時處理多個請求，因此可以提供更快的響應(yīng)時間和更好的用戶體驗(yàn)。此外，服務(wù)器端可以有效地管理計算資源，確保應(yīng)用程序可以在不影響性能的情況下處理大量數(shù)據(jù)和用戶。
考慮到這些好處，開發(fā)人員在構(gòu)建處理機(jī)密數(shù)據(jù)的 Web 應(yīng)用程序時需要考慮服務(wù)器端實(shí)現(xiàn)。
壓縮的過程，通過刪除不必要的字符（例如空格和注釋）以及縮短變量名稱來優(yōu)化代碼。這是一種常用于減少網(wǎng)絡(luò)傳輸?shù)臄?shù)據(jù)量的方法，從而減少網(wǎng)頁的加載時間。
在壓縮過程中，代碼會去除所有無關(guān)字符以使其盡可能緊湊。這是通過從代碼中刪除所有空格、制表符和換行符來實(shí)現(xiàn)的。此外，所有注釋以及程序運(yùn)行不需要的任何代碼都從代碼中刪除。
盡管壓縮使代碼更小且更難閱讀，但如果有人決心這樣做，仍然可以理解代碼。但是，壓縮的主要目的是優(yōu)化代碼并減少需要傳輸?shù)臄?shù)據(jù)量。這有助于加快網(wǎng)頁的加載時間，從而為網(wǎng)站訪問者帶來更好的用戶體驗(yàn)。
防止用戶訪問上下文菜單（包括查看源代碼、檢查元素和保存圖像等選項(xiàng)）的一種方法是通過事件偵聽器或 CSS 屬性禁用右鍵單擊。然而，這種方法在隱藏代碼方面并不完全有效，因?yàn)橛脩羧匀豢梢允褂面I盤快捷鍵或?yàn)g覽器工具訪問源代碼。
以下是如何在 javascript 中禁用鼠標(biāo)右鍵，
document.addEventListener('contextmenu', event => event.preventDefault());注意：一般您不應(yīng)禁用右鍵單擊，因?yàn)樗鼤档途W(wǎng)站的可訪問性，從而導(dǎo)致糟糕的用戶體驗(yàn)。
總之，雖然不可能從源代碼中完全隱藏 Javascript 代碼，但可以使用多種方法使其更難閱讀和理解?；煜⒎?wù)器端渲染、Javascript 壓縮和禁用鼠標(biāo)右鍵單擊是一些可用于保護(hù)敏感代碼的方法。
然而，重要的是要注意這些方法并非萬無一失，如果有足夠的動機(jī)，人們?nèi)匀豢梢栽L問代碼。因此，開發(fā)人員必須實(shí)施多層安全措施來保護(hù)他們的代碼并確保他們的 Web 應(yīng)用程序的安全。
[1] JavaScript Obfuscator Tool: https://www.obfuscator.io/
紹input[type="hidden"],input[type="file"]兩種特殊的表單元素，readonly disabled只讀屬性與禁用屬性的區(qū)別于使用場景。
現(xiàn)實(shí)中，我們時常需要在網(wǎng)頁中展示你的聯(lián)系方式，其中Email郵件地址通常需要提供在頁面上。但是在網(wǎng)絡(luò)機(jī)器人泛濫的互聯(lián)中，如果直接顯示你郵件，則很可能被他們識別并拷貝，然后對你的郵件地址實(shí)施郵件轟炸。為了避免這個問題，需要利用技術(shù)手段來保護(hù)你的地址，使其只能被人眼看到，并且支持直接鏈接發(fā)送郵件，但是不能被網(wǎng)絡(luò)機(jī)器人識別到，一般常用的方法是通過JS，Html，CSS對地址隱藏，但是編寫代碼有點(diǎn)繁瑣，可能還要引入額外的JS庫才能實(shí)現(xiàn)，而且還有一個缺點(diǎn)就是對一些限制級別的設(shè)備上，瀏覽器可能會禁用掉JS功能，這樣會導(dǎo)致頁面不能正常工作。此處給大家介紹一種基于SVG方法的郵件地址保護(hù)技術(shù)，可以極大程度的保護(hù)你免受機(jī)器人騷擾以及保證在瀏覽器禁用JS情況下仍然可以正常工作。
在JavaScript禁用的情況下工作
主要優(yōu)點(diǎn) 這種基于SVG的電子郵件保護(hù)方法沒有用的任何的JavaScript代碼。
因此，即使訪問者瀏覽器禁用了JavaScript，頁面上顯示的電子郵件地址仍然可用、可訪問和受到保護(hù)，同時保持安全并免受垃圾郵件機(jī)器人的攻擊。
允許標(biāo)準(zhǔn)mailto:鏈接
與其他不需要JavaScript的方法（例如，通過插入不可見的HTML注釋或插入可見元素并隨后通過CSS隱藏它們來混淆電子郵件地址）不同，這基于SVG的方法 允許標(biāo)準(zhǔn) mailto:鏈接。主要區(qū)別是：mailto:鏈接存在于外部 SVG文檔內(nèi)部，而不是 內(nèi)部引用的HTML文檔。
像圖像一樣隱藏內(nèi)容，像文本一樣可復(fù)制
第三個優(yōu)點(diǎn)是嵌入式SVG類似于圖像，但不是圖像。作為嵌入超文本文檔中的替換元素，SVG可以像圖像一樣有效地隱藏垃圾郵件地址的電子郵件地址。
但嚴(yán)格來說，SVG是圖形文檔，而非實(shí)際圖像。
因此，與圖像不同，人類訪問者仍然可以通過右鍵單擊電子郵件地址來復(fù)制電子郵件地址 <text>嵌入SVG中的元素。這對于傳統(tǒng)圖像方法來說，無法多做到手動復(fù)制地址（但是可以使用圖像文本識別OCR技術(shù)來實(shí)現(xiàn)）。
我們以一個最簡單的Emil鏈接地址共享為例。示例中由兩個兩個文件組成：其中SVG圖形文檔通過<object>標(biāo)簽方式嵌入到主HTML頁面中，基本語法如下：
<object data="svg-email-protection.svg" type="image/svg+xml" /></object>。
注意，同一個SVG圖形文檔支持在多個地方，進(jìn)行嵌入。主頁面HTML（main.htm）源代碼如下，一個很簡單的頁面：
<!DOCTYPE html>
<html lang="en-GB">
<head>
<meta charset="utf-8">
<title>SVG Email Protection</title>
<style>
.cc {
width: 180px;
height: 24px;
vertical-align: middle;
}
</style>
</head>
<body>
<p>請郵件聯(lián)系我: <object class="cc" data="svg-email-protection.svg" type="image/svg+xml"></object></p>
</body>
</html>SVG文檔（svgprot-chongchong）代碼：
<svg xmlns="http://www.w3.org/2000/svg"
lang="en-GB"
aria-labelledby="title"
viewBox="0 0 200 24">
<title id="title"> SVG Email Protection</title>
<defs>
<style type="text/css"><![CDATA[
rect {
width: 200px;
height: 24px;
fill: rgb(255, 255, 255);
}
a:focus rect,
rect:hover {
rx: 4px;
ry: 4px;
fill: rgb(0, 0, 255);
}
text {
font-size: 16px;
fill: rgb(0, 0, 255);
pointer-events: none;
}
a:focus text,
rect:hover + text {
fill: rgb(255, 255, 255);
font-weight: 900;
text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.2);
text-decoration: underline 1px solid rgb(255, 255, 255);
text-underline-offset: 5px;
}
]]></style>
</defs>
<a href="mailto:chongchong[at]ijz.me" aria-label="點(diǎn)擊發(fā)郵件">
<rect />
<text x="50%" y="50%" text-anchor="middle" dominant-baseline="middle"> chongchong[at]ijz.me</text>
</a>
</svg>將以上兩個文件放到同意目錄，然后用瀏覽器打開主頁面main.hm就可以看到效果了
本文給大家介紹了一種基于SVG文檔的優(yōu)雅的郵件保護(hù)方法，可以極大的免受網(wǎng)絡(luò)機(jī)器人竊取你的郵件地址進(jìn)行騷擾攻擊，同時支持emailto鏈接，支持無JS瀏覽器下正常工作，支持手動郵件復(fù)制等優(yōu)點(diǎn)，當(dāng)然該方法也是只能抵擋一般性規(guī)模化工作的Web機(jī)器人攻擊，如果遇到高級機(jī)器人，比如可以模仿真人訪問行為的，可以分析語法找到SVG文件進(jìn)行獲取地址的高級機(jī)器人則無防御能力。
*請認(rèn)真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。
