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

结尾

您的项目需求