I want to protect my e-mail address on webpages.
But I don't know JavaScript and PHP. I know only HTML and CSS.
So, please help me how to protect my email address with CSS only.
It's very simple. You can protect your email address with only HTML & CSS. You don't need to know about PHP or Java script. Try below code.
Simple HTML and CSS code:
<!doctype html>
<html>
<head>
<title>Protect e-mail with only css</title>
<style type="text/css">
.e-mail:before {
content: attr(data-website) "\0040" attr(data-user);
unicode-bidi: bidi-override;
direction: rtl;
}
</style>
</head>
<body>
<span class="e-mail" data-user="nohj" data-website="moc.liamg"></span>
</body>
</html>
Output of above code:
jhon#gmail.com
Please note:
Here I'm just used two extra attributes.
1) data-user write your e-mail id user name in reverse.
2) data-website write your e-mail id website in reverse.
Try this code:
.e-mail:before {
content: "\006a\0068\006f\006e\0040\0067\006d\0061\0069\006c\002e\0063\006f\006d";
}
<span class="e-mail"></span>
This is just the email encoded in hexadecimal.
One of the simple and effecting ways of embedding emails in html is by using hex values!
for example hex value for john#smith.me is:
%6A%6F%68%6E%40%73%6D%69%74%68%2E%6D%65
and you can use the following tag in your HTML Code
email me
This is a really simple and effective way of embedding email in a webpage.
you have hided the "maito:" and the email in this way.
you can use this tool to generate the %64 hex code
you can also use this tool to generate the hex code
As you likely know: Obfuscation techniques can't be foolproof and harvester bots will continue to improve. There are a number of arguments against obfuscation.
That being said, here are some additional techniques to the rather interesting ones you already mentioned.
HTML techniques:
Using html comment signs or substituting html entities has some years ago already been shown to be a pretty weak approach.
Using an image instead of text is a pain for most users, including the non-visually impaired as they can't cut and paste. It works well though.
One interesting pure HTML approach that allows for using a hyperlink was suggested a while back.
Email me.
CSS techniques:
These are of course not fool proof either. Besides what you've mentioned already:
Using CSS display:none is also useful. Bots that simply strip out style tags will include the hidden text in the harvested address.
jhon<span style="display:none">-anti-bot-bit</span>#gmail.com.
A web icon font could be used to pull in an # icon and it's possible to do this in a way that won't trip up screen readers. I've not seen a web icon font with an # icon for obvious reasons, but this would work.
Update: Font Awesome now has an # icon. Maybe someone suggested it after seeing this post ;-).
You can combine the two answers above (Ans1 & Ans2) to make the mailto works with the css for usability.
<style type="text/css">
.e-mail:before {
content: attr(data-website) "\0040" attr(data-user);
unicode-bidi: bidi-override;
direction: rtl;
}
</style>
<a href="mailto:%6A%6F%68%6E%40%67%6D%61%69%6C%2E%63%6F%6D">
<span class="e-mail" data-user="nhoj" data-website="moc.liamg"></span>
</a>
You can use Font Awesome:
In <head>:
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
In <body>:
<p>john<i class="fa fa-at"></i>hotmail.com</p>
I would recommend using JavaScript if possible over CSS and JavaScript as it can manipulate the dom. Easily you could do it with code like
<div onclick="document.write('joe#' + 'joemaller.com')">Email Me</div>
This a simple but not ideal solution.
JFiddle; http://jsfiddle.net/yFKUD/
Flexbox allows you to change the order of items inside a containing element, we can use this to separate and reorder parts of our email address in the html but present them to the user as a legible whole.
div {
display: flex;
flex-direction: row-reverse;
justify-content: flex-end;
}
<div>
<span>example.com</span>
<span>#</span>
<span>george</span>
<span>Email me at the following address: </span>
</div>
Here we use flex-direction: row-reverse to reverse the order of the elements.
A scammer could probably work this out if he tried hard, all he has to do is reverse the elements to recreate the address. For a more thorough attempt we can specify the order manually.
div {
display: flex;
}
<div>
<span style="order: 3">#</span>
<span style="order: 4">example.com</span>
<span style="order: 1">Email me at the following address: </span>
<span style="order: 2">user</span>
</div>
Here we use order to specify our own order so a simple reverse cannot be used.
Unfortunately doing any of this breaks copy/paste so your user will have to type out the address, but it is better than receiving correspondence from another Nigerian prince. Use this in conjunction with other techniques for a truly bulletproof email address.
I tend to use this for my clients:
hello@goodbye.com
Pretty sure it works 90% of the time judging by the experience and requires no CSS/JS to work. Though I don't think there is any point of protecting emails nowadays anyway as almost all CDN-s do it for you automatically using JS.
Use the reCAPTCHA Mailhide API
Mail hide using api
Use encoder Formate
Encode site url to convert data email
Hide email using CSS trick (direction property)
Demo
Scramble the email - While coding HTML, jumble and write the email address in reverse direction. (a#b.com should be written as moc.b#a). We can then use CSS stylesheet to reverse the email address againwhen rendering. Here's the sample HTML code with CSS.
<style type="text/css">
.backwards {
unicode-bidi:bidi-override;
direction: rtl;
}
</style>
<span class="backwards">moc.b#a</span>
If someone copies your email address, it will available in the reverse direction. Would not work on older browsers.
How to hide your email address from spammers with JavaScript
Let's look at more advanced methods that use javascipt to hide the email (name#domain.com). Remember to use noscript tags since some users prefer to disable javascript in browsers:
Basic Email Script
<script language=JavaScript>
<!--
document.write("name" + "#" + "domain.com");
//--> </script>
2. Basic Mailto: Email Script with Link Text
<script language=JavaScript>
<!--
var user = "name";
var host = "domain.com";
var link = user + "#" + host;
document.write("<a hre" + "f=ma" + "ilto:" + user + "#" + host + ">" + link + "</a>");
//--> </script>
3. Inline JavaScript
<a href="#" onclick="JavaScript:window.location='mailto:'+'name'+'#'+'domain'+'.com'" >Send me an email</a>
External JavaScript file
<script language="JavaScript" src="email-encoding.js"></script>
The external javascript contains the code mentioned in 2 above.
I was checking for techniques for a while now. While I agree that obfuscation is not a total solution, I believe it's still pragmatical as I benefit it by getting get zero spam with obfuscation.
Some of the techniques discussed:
CSS trick to make e-mail only visible to humans (see accepted answer from #user3087089)
Add HTML garbage to trick scrapers (see answer from #fzzylogic)
Inject e-mail using JS (as suggested by #Dean and others)
Another technique that was not suggested here to never have your e-mail in plain form through using base64 encoding. You simply encode your e-mail and use JavaScript to inject it to the webpage.
I built safe-email project on GitHub to combine all of the listed techniques. It's pretty easy to use with free license. You can check examples in CodePen. Feel free to use it & dig it and contribute.
It's vanilla-JS only, lightweight with no dependencies and you configure it with Base64 encoding of your e-mail.
I used for some time a similar JavaScript technique that allowed the "mailto" functionality while keeping the HTML valid :
HTML :
user
JavaScript (small jQuery plugin)
// mailto anti-spam
;(function($) {
$.fn.mailTo = function() {
this.each(function() {
var user = $(this).html() || false,
domain = $(this).attr('href')
.replace('http://www.', '')
.replace('www.', '')
.replace('http://', '')
.replace('/', '') || false;
if (user && domain) {
$(this).html(user + '#' + domain).attr('href', 'mailto:' + user + '#' + domain);
}
});
return this;
};
})(jQuery);
Usage
// protect inline e-mails
$('.js-contact').mailTo();
http://codepen.io/ced-anamorphik/pen/QwVrKZ
But lately Google Chrome displayed a phishing warning on the website.
As this is not entirely wrong (technically the link is spoofed indeed), is there another simple solution to this ?
To disable people to copy it try like:
span.email {
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
And HTML:
<span class="email">jack#gmail.com</span>
JSFIDDLE
And to protect against bots use CSS Codedirection:
<span style="unicode-bidi:bidi-override; direction: rtl;">
moc.elpmaxe#zyx
</span>
Related
I am trying to convert a website that uses a lot of old-school in-page formatting to the standard way of doing things where the content is on the html page and the styling is in the css document. Also, the page is in Japanese.
Here is the translated page.
Are there any batch operations or tools I can use to strip the page of all its messy inline formatting without selecting any of the Japanese characters (even with Google Translate after selecting the page the translated Japanese characters are still copied) and still maintain a word wrap? Basically, I want to make the coding and design of the page up to date and I need to do it on a lot of pages so I'll need some sort of batch operation.
Any ideas/advice? Thanks.
Hi you can use jquery to help. i've given you a starting point on jsfiddle.
jQuery:
$(document).ready(function() {
css = '';
$('body *').each(function(){
if (!!$(this).attr('style')){
if(!!$(this).attr('class')){
css += '.'+$(this).attr('class')+'{'+$(this).attr('style')+'}<br />';
};
if(!!$(this).attr('id')){
css += '#'+$(this).attr('id')+'{'+$(this).attr('style')+'}<br />';
};
}
});
$('#css').html(css);
});
This is by no means a finished solution, but it should definatly give you a helping start
Also whn you're happy that you got all the styles collected, you can use $(this).removeAttr('style') to remove the style attribute from the elements.
I am using Ruby on Rails 3 and I would like to disable an email address link in a HTML email.
For example, if in an email I send some raw HTML like
Hi, you email is: <br/>
test#email.com
Gmail autodetects that this is an email address and changes it to
Hi, you email is: <br/>
<a target="_blank" href="mailto:test#email.com">test#email.com</a>
I would like to have this output
# Text without the 'mailto:' link
Hi, you email is:
test#email.com
How can I do that?
I have a more natural suggestion: wrap the email/url in an anchor hyperlink.
<a name="myname">test#email.com</a>
Since the text is already wrapped in a hyperlink, Gmail gives up and leave it alone. :)
(Note: also worked for Apple mail client.)
By 2021, the best for me would be:
<a href='#' style='text-decoration: none; color:#000000' name='myname'>x#somemail.com</a>
Explanation
After trying different services like Gmail, Outlook 365, Mailinator, and MyTrashMail, the results are:
• <a> - wrapping the email into anchor is essential, as raugfer pointed
• href='#' is necessary for Outlook. Linking to a fake anchor disables following the link.
• text-decoration: none, color:#000000 removes underline and changes color from blue link color to natural text color. For those who want not only to disable the link but make its appearance as usual text.
• name='myname' wouldn't harm, however, I haven't noticed its necessity.
Any javascript should be avoided, it won't pass Gmail. E.g. onClick="return false;", <script>...</script>.
If you want to change the cursor to default, cursor: default or cursor: auto won't help. For Gmail only, do without href='#'
Using <span> or <myspan> works for Gmail as Prince Mishra stated, but it doesn't help in all the services (in Outlook, for instance).
Even I had the same problem. Gmail would detect and convert mail addresses and ip addresses to links. I used string.replace to enclose dots (.) and # in blocks. And that works fine for me. sample python code looks like.
text = myname#gmail.com
chars = ['.','#']
encloseIn = 'span'
for char in chars:
text = string.replace(text, char, '<'+encloseIn+'>'+char+'</'+encloseIn+'>')
This is what worked for me in Laravel.
<a style="pointer-events: none; color: inherit">
{{$user->email}}
</a>
You can try
Hi, you email is:<br />
test#email.com
Reading all answers, I tried this in a Joomla article and it worked:
<p><strong>This is the email address: </strong><a name="whatever">youremail@domain.com</a></p>
Result:
This is the email address: youremail@domain.com
Worked on Chrome and Firefox.
Late reply but i think I have found a way to get over this auto linking issue.
The easiest and fastest way is to add a zero width non joiner between each alphabets. Now that sounded hard so I developed a small script that made things easy for me. Run the code below, add email address (paste or type) and it adds the required code around the email address. Paste the result in your email.
$('#userInput').keyup(function() {
var s = $(this).val().trim();
var text = "";
for ( var i = 0; i < s.length; i++ )
{
text += s[i]+'' ;
}
$('p').text( text );
});
#userInput{max-width:400px;width:100%;padding:10px 5px;}
*{outline:none;}
p,#userInput{font-family: 'Roboto', sans-serif;}
p{word-break:break-all;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
<input type="text" id="userInput" />
<p></p>
You just need to add the "zero width space" character, his code in HTML is:
This code adds a space in the string where you need.
For a respectable solution you need to complement this method with a <nobr> tag, because with this tag you can prevent from breaking to the next line.
The only way to get around this is to convert the email address into an image and include that in the email. Of course this means the user might choose to not download the image, which would mean they won't get the email address either.
What it really comes down to is that you can't control what Gmail or any other email client does once it receives an email, so there isn't another way around this. It's Gmail's, or any other email client's, choice to do what they want with emails, and that includes hyper-linking email addresses.
If you are very adamant about not converting emails into hyperlinks you can try to do other things to conceal the fact that it's an email, like writing it out instead:
Hi, your email is:
test at email dot com
Of course this is probably more confusing. If I were you, I would simply settle for the fact that Gmail will hyper-link your emails.
I am writing an e-mail HTML template, and some e-mail clients do not support <style> for specifying CSS. The only alternative for applying CSS is to use inline styles (style attribute). Is there a tool or library (Node.JS) for applying a stylesheet to some HTML and getting back the HTML with the styles applied?
The tool does not have to support many selectors; id, class, and element name selectors should be sufficient for my needs.
Example of what is needed:
// stylesheet.css
a { color: red; }
// email.html
<p>This is a test</p>
// Expected result
<p>This is a test</p>
I think juice is what you're looking for.
Simply require it, then pass it your html and css and let it do the heavy lifting for you like this:
var juice = require('juice');
var inlinedcss = juice('<p>Test</p>', 'p { color: red; }');
It builds on a number of mature libraries including mootools' slick, and supports a broad range of selectors.
You may also be interested in node-email-templates, which is a nice wrapper for dynamic emails in node.
Here's the alive javascript projects that does what you want:
juice. 1.7Mb with dependencies.
juice2. 5.9Mb with dependencies. This is a fork of juice, seems to be containing more options than juice. This one doesn't drop media queries as juice does. Sorts inline css rules alphabetically.
styliner. 4.0Mb with dependencies. This one uses promises instead. Have a couple of different options than juice2. Has a compact option that other ones don't have that minifies the html. Doesn't read the html file itself as others do. Also extends margin and padding shorthands. And in case you somehow modify your native objects(like if you are using sugar) I don't suggest using this till this issue is resolved.
So which one to use? Well it depends on the way you write CSS. They each have different support for edge cases. Better check each and do some tests to understand perfectly.
You could use jsdom + jquery to apply $('a').css({color:'red'});
2020 solution
https://www.npmjs.com/package/inline-css
var inlineCss = require('inline-css');
var html = "<style>div{color:red;}</style><div/>";
inlineCss(html, options)
.then(function(html) { console.log(html); });
Another alternative is to go back to basics. If you want a link to be red, instead of
my link
do
<font color="red">my link</font>
Almost any browser, including the terrible BlackBerry browser can handle that.
I want to write an application that sends html formatted email. I have the css and html files as I want them. I'm trying to send the email with the embedded css using the style element like so:
<style type="text/css">
h1 {border-width: 1; border: solid; text-align: center}
</style>
<h1>Title</h1>
<p>Content of the email</p>
It works in some clients (e.g. it works on Mac OSX mail app) and not others (e.g. it doesn't work when reading the email in gmail). When I translate the above to:
<h1 style="border-width: 1; border: solid; text-align: center">Title</h1>
<p>Content of the email</p>
Then it works everywhere. What I'm looking for is a way to place the css as style properties on their corresponding dom elements according the css rules I defined. So for a given file.css and file.html I want to create a new file result.html which displays correctly but in which all the css is embedded as style properties in the dom elements. Any ideas?
This is what you're looking for:
http://www.mailchimp.com/labs/inlinecss.php
Hope this helps!
Drop the style tag, use inline styles.
I have the same issue - I have a php app that sends out a confirmation email once a customer has placed an order. In various email clients it's fine, but web based clients tend to strip out the HEAD tag, which includes the STYLE tag - so any style is lost.
While it's still a good idea, as #Zack mentions, to include a plain text version of what you wanted to say, nobody likes to read plain text. I doubt that Zack is reading Stack Overflow on Lynx, for example.
A quick Google search for 'CSS inliner php' brings up: http://classes.verkoyen.eu/css_to_inline_styles
Also it seems that this question has been asked before on stackoverflow (at least once), at least for php, and there was a Ruby answer given in php class to inline css styles?
I want to write an application that sends html formatted email
Never do this. Email MUST be plain text. You cannot even rely on attachments.
Since a lot of email clients ignore the HEAD tag, can I embed an inline stylesheet in the body?
The short answer is no. Gmail strips the tag and it's content.
Hotmail, Yahoo! Mail and Windows Live Mail does not strip style-tags in the body-element.
But take a look at "The Ultimate Guide to CSS" for HTML email over at Campaign Monitor.
Creating an HTML email that works in every email client is hard. I spent several months refining a good looking template.
http://commadot.com/the-holy-mail/ - original blog with my findings.
http://commadot.com/email-best-practices/ - latest greatest.
Specific answer to your question: Gmail will be ok with style="" but not with a <style> block.
You might want to check out the free html email templates that CampaignMonitor and MailChimp (EDIT: and Ink by Zurb) provide:
http://www.campaignmonitor.com/templates/
http://www.mailchimp.com/resources/templates/
http://zurb.com/ink/
There's an updated version of Campaign Monitor's helpful guide here:
http://www.campaignmonitor.com/css/
Unfortunately, the most reliable HTML to use in emails is totally stone age
EDIT: Ink has an "inliner" tool that takes the contents of style tags and inlines them onto the appropriate elements: http://zurb.com/ink/inliner.php
Most gmail clients now support embedded CSS as of September 2016, so it should be safe to do.
https://litmus.com/blog/gmail-to-support-responsive-email-design
Yes you can. However you have to keep in mind that few email clients respect css standards. Just stick to basic css properties like margin and padding, etc., and it should all be fine.
Also you can style your html elements inline (<div style="">) though it's not an elegant solution.
The top answer is outdated. Gmail now supports using media query's along with other css properties now - https://developers.google.com/gmail/design/css
As others have pointed out, the accepted answer is out of date.
In my own tests, as of 8/20/2022, Gmail supports elements with classes, and the use of the <style> tag, as long as it is in the <head>. Also, Gmail no longer strips out inline classes for elements.
Example email:
<head>
<style>
div.mydiv { background-color: blue; }
</style>
</head>
<body>
<div class='mydiv'>This is the contents of my email message! Thank you
google, for observing the style tag!</div>
</body>