SVG優雅顯示Email防止機器人竊取

現實中，我們時常需要在網頁中展示你的聯系方式，其中Email郵件地址通常需要提供在頁面上。但是在網絡機器人泛濫的互聯中，如果直接顯示你郵件，則很可能被他們識別并拷貝，然后對你的郵件地址實施郵件轟炸。為了避免這個問題，需要利用技術手段來保護你的地址，使其只能被人眼看到，并且支持直接鏈接發送郵件，但是不能被網絡機器人識別到，一般常用的方法是通過JS，Html，CSS對地址隱藏，但是編寫代碼有點繁瑣，可能還要引入額外的JS庫才能實現，而且還有一個缺點就是對一些限制級別的設備上，瀏覽器可能會禁用掉JS功能，這樣會導致頁面不能正常工作。此處給大家介紹一種基于SVG方法的郵件地址保護技術，可以極大程度的保護你免受機器人騷擾以及保證在瀏覽器禁用JS情況下仍然可以正常工作。

優點

在JavaScript禁用的情況下工作

主要優點這種基于SVG的電子郵件保護方法沒有用的任何的JavaScript代碼。

因此，即使訪問者瀏覽器禁用了JavaScript，頁面上顯示的電子郵件地址仍然可用、可訪問和受到保護，同時保持安全并免受垃圾郵件機器人的攻擊。

允許標準mailto:鏈接

與其他不需要JavaScript的方法（例如，通過插入不可見的HTML注釋或插入可見元素并隨后通過CSS隱藏它們來混淆電子郵件地址）不同，這基于SVG的方法允許標準 mailto:鏈接。主要區別是：mailto:鏈接存在于外部 SVG文檔內部，而不是內部引用的HTML文檔。

像圖像一樣隱藏內容，像文本一樣可復制

第三個優點是嵌入式SVG類似于圖像，但不是圖像。作為嵌入超文本文檔中的替換元素，SVG可以像圖像一樣有效地隱藏垃圾郵件地址的電子郵件地址。

但嚴格來說，SVG是圖形文檔，而非實際圖像。

因此，與圖像不同，人類訪問者仍然可以通過右鍵單擊電子郵件地址來復制電子郵件地址 <text>嵌入SVG中的元素。這對于傳統圖像方法來說，無法多做到手動復制地址（但是可以使用圖像文本識別OCR技術來實現）。

基本方法

我們以一個最簡單的Emil鏈接地址共享為例。示例中由兩個兩個文件組成：其中SVG圖形文檔通過<object>標簽方式嵌入到主HTML頁面中，基本語法如下：

注意，同一個SVG圖形文檔支持在多個地方，進行嵌入。主頁面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>請郵件聯系我: <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="點擊發郵件">
<rect />
<text x="50%" y="50%" text-anchor="middle" dominant-baseline="middle"> chongchong[at]ijz.me</text>
</a>
</svg>

將以上兩個文件放到同意目錄，然后用瀏覽器打開主頁面main.hm就可以看到效果了

總結

本文給大家介紹了一種基于SVG文檔的優雅的郵件保護方法，可以極大的免受網絡機器人竊取你的郵件地址進行騷擾攻擊，同時支持emailto鏈接，支持無JS瀏覽器下正常工作，支持手動郵件復制等優點，當然該方法也是只能抵擋一般性規模化工作的Web機器人攻擊，如果遇到高級機器人，比如可以模仿真人訪問行為的，可以分析語法找到SVG文件進行獲取地址的高級機器人則無防御能力。

言

2021 年最后一天，疫情還沒有完全結束，武漢市政府也取消了跨年活動。今晚，就連地鐵都提前到 9 點關閉，大家都在家里跨年。這不，我也在家里跨年。不過我并沒有看晚會，而是整理了一篇前端小技巧，算是給自己 2021年一個小小的總結。

正文

用 CSS 隱藏元素有很多種方法，這里介紹 3 種常見的。

opacity: 0

特點是【看不見，占空間，摸得著】

元素隱藏
不改變布局
如果綁定了事件，點擊該區域，是可以觸發事件的

visibility: hidden

特點是【看不見，占空間，摸不著】

元素隱藏
不改變布局
如果綁定了事件，點擊該區域，是無法觸發事件的

display: none

特點是【看不見，不占空間，摸不著】

元素隱藏
改變布局
如果綁定了事件，點擊該區域，是無法觸發事件的

接下來，我們來編寫代碼驗證一下。首先寫入三個方塊，對中間的橙色方塊添加點擊事件。代碼及頁面效果如下所示：

<!DOCTYPE html>
<html>
    <head>
        <style type="text/css">
            .box {width: 200px;height: 50px;}
            .red {background-color: red;}
            .orange {background-color: orange;}
            .yellow {background-color: yellow;}
        </style>
    </head>

    <body>
        <div>
            <div class='box red'></div>
            <div class='box orange' id="btn"></div>
            <div class='box yellow'></div>
        </div>
        <script type="text/javascript">
            document.getElementById("btn").onclick=function() {
                alert('觸發點擊操作 0.0');
            }
        </script>
    </body>
</html>

image

opacity: 0

對中間橙色方塊添加 opacity: 0 樣式，代碼及效果如下：

元素隱藏
不改變布局
如果綁定了事件，點擊該區域，是可以觸發事件的

<!DOCTYPE html>
<html>
    <head>
        <style type="text/css">
            .box {width: 200px;height: 50px;}
            .red {background-color: red;}
            .orange {background-color: orange;}
            .yellow {background-color: yellow;}
            .opacity {opacity: 0}
        </style>
    </head>

    <body>
        <div>
            <div class='box red'></div>
            <div class='box orange opacity' id="btn"></div>
            <div class='box yellow'></div>
        </div>
        <script type="text/javascript">
            document.getElementById("btn").onclick=function() {
                alert('觸發點擊操作 0.0');
            }
        </script>
    </body>
</html>

image

visibility: hidden

對中間橙色方塊添加 visibility: hidden 樣式，代碼及效果如下：

元素隱藏
不改變布局
如果綁定了事件，點擊該區域，是無法觸發事件的

<!DOCTYPE html>
<html>
    <head>
        <style type="text/css">
            .box {width: 200px;height: 50px;}
            .red {background-color: red;}
            .orange {background-color: orange;}
            .yellow {background-color: yellow;}
            .visibility {visibility: hidden}
        </style>
    </head>

    <body>
        <div>
            <div class='box red'></div>
            <div class='box orange visibility' id="btn"></div>
            <div class='box yellow'></div>
        </div>
        <script type="text/javascript">
            document.getElementById("btn").onclick=function() {
                alert('觸發點擊操作 0.0');
            }
        </script>
    </body>
</html>

image

display: none

對中間橙色方塊添加 display: none 樣式，代碼及效果如下：

元素隱藏
改變布局
如果綁定了事件，點擊該區域，是無法觸發事件的

<!DOCTYPE html>
<html>
    <head>
        <style type="text/css">
            .box {width: 200px;height: 50px;}
            .red {background-color: red;}
            .orange {background-color: orange;}
            .yellow {background-color: yellow;}
            .display {display: none}
        </style>
    </head>

    <body>
        <div>
            <div class='box red'></div>
            <div class='box orange display' id="btn"></div>
            <div class='box yellow'></div>
        </div>
        <script type="text/javascript">
            document.getElementById("btn").onclick=function() {
                alert('觸發點擊操作 0.0');
            }
        </script>
    </body>
</html>

image

結尾

本人 2021 年度成就總結：

學術方面，憑借個人努力，在核酸檢測領域產出多份數據真實詳盡的報告。
健康方面，保證膳食纖維攝入，具體表現為每日堅持吃瓜，吃好瓜，吃大瓜。
商業方面，與各大平臺合作，全面參與投資 618、雙 11、雙 12 等千億級重大項目。
環保方面，股票基金一片綠，綠水青山就是金山銀山。在廢物利用領域更是成績斐然：自己作為廢物，常常被別人利用。
運動方面，專注于水上項目，在摸魚、劃水等小項上有突出表現。

最后，祝大家元旦快樂～

平常的樣式排版中，我們經常遇到將某個模塊隱藏，下面我整理了一下隱藏元素的多種方法以及對比（有的占據空間，有的不占據空間。有的可以點擊，有的不能點擊。）：

( 一 ) display: none;

特點：元素不可見，不占據空間，無法響應點擊事件。

.hide{
 display: none; 
}

( 二 ) opacity: 0; ( IE8以下版本：filter:Alpha(opacity=50) ）

特點：改變元素透明度，元素不可見，占據頁面空間，可以響應點擊事件。

.hide{
 opacity: 0;
 filter:Alpha(opacity=0); 
}

( 三 ) visibility: hidden;

特點：元素不可見，占據頁面空間，無法響應點擊事件。

.hide{
 visibility: hidden;
}

( 四 ) transform: scale(0);

( 1 ) zoom: 0.1; transform: scale(0);

特點：元素不可見，IE 6 7 9 不占據頁面空間，IE8 谷歌火狐歐朋等瀏覽器占據空間，無法響應點擊事件。

.hide{
 zoom: 0.1;
 transform: scale(0);
 -webkit-transform: scale(0);
 -moz-transform: scale(0);
 -ms-transform: scale(0);
 -o-transform: scale(0); 
}

( 2 ) position: absolute; zoom: 0.1; transform: scale(0);

特點：元素不可見，不占據頁面空間，無法響應點擊事件。

.hide{
 position: absolute;
 zoom: 0.1;
 transform: scale(0);
 -webkit-transform: scale(0);
 -moz-transform: scale(0);
 -ms-transform: scale(0);
 -o-transform: scale(0); 
}

( 五 ) width: 0; height: 0; 配合overflow: hidden;

特點：元素不可見，不占據頁面空間，無法響應點擊事件。但 padding值和 margin值依然存在，需要將內外邊距都調整為0。

.hide{
 display: inline-block;
 width: 0;
 height: 0;
 padding: 0;
 margin: 0;
 overflow: hidden; 
}

( 六 ) position: absolute; left: -200%; 或者 top: -200%；等，父級需要相對定位，這種left top值可以根據具體的實際情況去定義

特點：元素不可見，不占據頁面空間，無法響應點擊事件。

. father{
 position: relative;
 overflow: hidden;
}
.hide{
 position: absolute;
 left: -200%;//或top: -200%; 
}

( 七 ) clip-path: polygon(0px 0px,0px 0px,0px 0px,0px 0px)

特點：元素不可見，占據頁面空間，無法響應點擊事件。

.hide{
 float: left;
 width: 150px;
 margin: 20px;
 clip-path: polygon(0px 0px, 0px 0px, 0px 0px, 0px 0px); 
}

( 八 ) margin: top | right | bottom | left ;父級添加overflow: hidden; (margin的值一定要小于（子級的寬度加上邊距的總和的負數）)

特點：元素不可見，不占據頁面空間，無法響應點擊事件。

.father{
 width: 400px;
 height: 400px;
 overflow: hidden;
}
.hide{
 display: inline-block;
 width: 200px;
 height: 200px;
 margin-left: -200px;
}

以上就是幾種隱藏元素的方法，我在以前的面試中，也碰到了面試官提出的一些關于隱藏元素css的對比，查閱了一些資料，做了以下整理：

( 一 ) display: none 和 visibility: hidden 的區別

1. 占據頁面空間( display: none 將元素隱藏后，在頁面是是不占有空間位置的，而visibility: hidden 將元素隱藏后，還保留著元素大小的空間位置 ) ；

2. display: none 影響了 reflow和repaint(回流與重繪)，而visibility: hidden并沒有影響

3. 某個模塊添加了display: none; 它下面的任何子級都會被隱藏，而添加了visibility: hidden，子級一旦有添加visibility: visible的css，該子級將不會被隱藏。

( 二 ) display: none 和 opacity: 0的區別

1. 占據頁面空間( display: none 將元素隱藏后，在頁面是是不占有空間位置的，而opacity: 0 只是改變了元素的透明度將其隱藏，還保留著元素大小的空間位置 ) ；

2. display: none 不會被子類繼承，但是子類一樣不會顯示。 opacity: 0 會被子類繼承，但不能像visibility的屬性一樣，給子類添加opacity:1，并不能將子類顯示。

3. css3 transition 屬性對display：none 并無效果，但對opacity 則有效果。（附加一句，對visibility: hidden也無效果）

在線咨詢

上一篇：何以聚焦漢文帝霸陵：“考古中國”公布漢唐三大考古
下一篇：CSS蒙層+彈框

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

SVG優雅顯示Email防止機器人竊取

優點

基本方法

總結

言

正文

opacity: 0

visibility: hidden

display: none

opacity: 0

visibility: hidden

display: none

結尾

您的項目需求