Proteggere l'email
13-05-2024
Usare SVG per non mostrare l'email a spambot
WEB
La pubblicazione dell'email puĆ² essere veicolo di spambot se non protetta.
Ho trovato un modo per poterla mostrare attraverso un'immagine SVG e usare il comodo "mailto:" ma senza usare JS e restando comunque accessibile tramite il title e gli attributi aria-.
file: index.html
<!DOCTYPE html>
<html lang="it-IT">
<head>
<meta charset="utf-8">
<title>Email SVG</title>
<style>
.email-svg {
width: 160px;
height: 20px;
vertical-align: middle;
}
p {
border: 5px solid;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
padding: 10px;
}
</style>
</head>
<body>
<p>La mia email:
<object class="email-svg" data="email-svg.svg" type="image/svg+xml"></object>
</p>
</body>
</html>
file: email-svg.svg
<svg xmlns="http://www.w3.org/2000/svg" lang="it-IT" aria-labelledby="title" viewBox="0 0 160 20">
<title id="title">Invia email</title>
<defs>
<style type="text/css"><![CDATA[
rect {
width: 160px;
height: 20px;
fill: rgb(255, 255, 255);
}
text {
font-size: 16px;
fill: rgb(0, 0, 0);
pointer-events: none;
}
a:focus text,
rect:hover + text {
fill: rgb(255, 255, 255);
text-decoration: underline 1px solid rgb(255, 255, 255);
text-underline-offset: 5px;
}
a:focus rect,
rect:hover {
fill: rgb(0, 0, 0);
}
]]></style>
</defs>
<a href="mailto:supercat@test.com" aria-label="Invia email">
<rect />
<text x="50%" y="50%" text-anchor="middle" dominant-baseline="middle">supercat@test.com</text>
</a>
</svg>
