/    Sign up×
Community /Pin to ProfileBookmark

help using a javascript fuction to hide email in a form

Hey Guys, I know this is probably laughingly simple, but its been a while. I have a form that will be used to send me email on a website. I think this is pretty typical stuff, so I’ll just include some details. Within the form is a submit button, along with a “hidden” form fields contains the email…

<br> <input type=”hidden” name=”sendtoemail” value=”[email protected]” >
<br> <input type=”submit” value=”Send Email”> </form>

the form receiver provided by my hosting company will take the “sendtoemail” data, format the form, and send it to my email. Well obviously the “hidden” field is still there in plain sight in the source code. So lets say I want to avoid making my email address totally obvious to a SPAM robot, and want to replace the <input line with the email address with a javascript function to . So lets start with a brain dead simple function to compose a document.write().

<script language=”JavaScript” src=”myScripts.js”>

var a= “myemail”;
var b= “mdomain”;
var c= “com”;
var msend = a+ String.fromCharCode(64) + b+ String.fromCharCode(46) + c;

function dm()
{
document.write(“<input type=”hidden” name=”sendtoemail” value=”” + msend + “”>”);
}
</script>

OK, I said it was kind of brain dead. So now the two <input> lines above look like this…

<br><script type=”text/javascript”> dm();</script>
<br> <input type=”submit” value=”Send Email”> </form>

Well it does work, but two questions! First, When I load the page into Firefox, and use its handy “view page source” to see what the document.write() actually did (What does the FOX say?? πŸ˜‰ I see this…

<br><script type=”text/javascript”> dm();</script>
<br> <input type=”submit” value=”Send Email”> </form>

Well that’s really weird isn’t it? The actual call still shows up in the visible source code instead of the document.write() stuff. It does work, so the string MUST be being written right, but why can’t I see it in the “show page source”. Does that make sense?

Second, the bigger issue is whether there is a better way, because something tells me this isn’t too hard for a SPAM-BOT to foil. I guess anything like this relies on hiding the form in a page in a protected directory that you couldn’t get at without following a link on a public page. So the HTML generated by the javascript would only exist for the short time the user would use the form. I doubt this will stop a modern SPAM robot. So is there anything more creative I could do besides changing the email address once a month? Maybe I’m over thinking this? Its just that most of my inboxes runneth over with SPAM, so…

to post a comment
JavaScript

23 Comments(s) ↴

Copy linkTweet thisAlerts:
@PadonakJan 09.2014 β€”Β javascript is not php. do you see any <h1...6></h1...6> tags in the body?

<i>
</i>&lt;!DOCTYPE html&gt;
&lt;html lang="en"&gt;
&lt;head&gt;
&lt;meta charset="utf-8" /&gt;
&lt;title&gt;123&lt;/title&gt;
&lt;script&gt;
function spam(){
document.write('&lt;center&gt;');
document.write('&lt;h1&gt;SPAM&lt;/h1&gt;');
document.write('&lt;h2&gt;SPAM&lt;/h2&gt;');
document.write('&lt;h3&gt;SPAM&lt;/h3&gt;');
document.write('&lt;h4&gt;SPAM&lt;/h4&gt;');
document.write('&lt;h5&gt;SPAM&lt;/h5&gt;');
document.write('&lt;h6&gt;SPAM&lt;/h6&gt;');
document.write('&lt;/center&gt;');
}
&lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;script&gt;spam();&lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;
Copy linkTweet thisAlerts:
@cbVisionJan 09.2014 β€”Β JavaScript output won't show up when you "view source." Try using "Inspect Element" instead (right click and inspect element). This will who the JS outputs rather than the source.
Copy linkTweet thisAlerts:
@PadonakJan 09.2014 β€”Β may be this can fool spambots:

<i>
</i>&lt;!DOCTYPE html&gt;
&lt;html lang="en"&gt;
&lt;head&gt;
&lt;meta charset="utf-8" /&gt;
&lt;title&gt;123&lt;/title&gt;
&lt;style&gt;
body{color:#000;background-color:#fff;font-family:Georgia,'Bookman Old Style',Verdana;font-size:14px;text-align:center;padding-top:200px;}
fieldset{max-width:30%;text-align:right;padding-right:15px;}
label{display:block;margin-top:5px;font-weight:bold;font-style:italic;}
.fld{margin-top:10px;}
input.fld{text-align:center;}
input[type="button"]{cursor:pointer;border:none;font-weight:bold;background-color:transparent;}
&lt;/style&gt;
&lt;script&gt;
var spamstring=""'p'"a*&amp;d||o&amp;*+n_/a-)k%@w#_ +e%&amp;b!d)(e?v&lt;**e&gt;//l-o?#p!+e=+r,.'"&amp;c^o_=+m",
spam=/[^a-zA-Z@.]/g;

function $(id){return document.getElementById(id);}

function spamBotSucks(){
$('sendtoemail').value=spamstring.replace(spam,'');
/* timed out only for testing purpose */
setTimeout(function(){$('myform').submit();},2000);
}

window.onload=function(){$('snd').onclick=spamBotSucks;$('subject').focus();}
&lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;center&gt;
&lt;form id="myform"&gt;
&lt;fieldset&gt;
&lt;legend&gt;Mail me&lt;/legend&gt;
&lt;label for="sendtoemail"&gt;My email&lt;br /&gt;&lt;input size="30" class="fld" type="text" id="sendtoemail" name="sendtoemail" value="[email protected]" readonly="readonly" /&gt;&lt;/label&gt;
&lt;label for="subject"&gt;Subject&lt;br /&gt;&lt;input size="30" class="fld" type="text" id="subject" name="subject" /&gt;&lt;/label&gt;
&lt;label for="message"&gt;Message&lt;br /&gt;&lt;textarea class="fld" id="message" name="message" rows="5" cols="45"&gt;&lt;/textarea&gt;&lt;/label&gt;
&lt;input class="fld" type="button" id="snd" value="Send" /&gt;
&lt;/fieldset&gt;
&lt;/form&gt;
&lt;/center&gt;
&lt;/body&gt;
&lt;/html&gt;


check the window search bar after sending the form. i think using of method="post" will not change the result
Copy linkTweet thisAlerts:
@PeterPan_321authorJan 09.2014 β€”Β Hmmm.. I can't inspect the element, probably because in this case its "hidden" element of a form. But thanks anyway... now i understand... at least i think i do. A document.write() is stall part of the source, but the real document get written into the DOM as the page is loaded 9and in this case executed), so normally I'd have to use the inspect element feature to see what the write() actually did.
Copy linkTweet thisAlerts:
@PeterPan_321authorJan 09.2014 β€”Β may be this can fool spambots:

<i>
</i>
var spamstring=""'p'"a*&amp;d||o&amp;*+n_/a-)k%@w#_ +e%&amp;b!d)(e?v&lt;**e&gt;//l-o?#p!+e=+r,.'"&amp;c^o_=+m",
spam=/[^a-zA-Z@.]/g;

function $(id){return document.getElementById(id);}
... snip ...


check the window search bar after sending the form. i think using of method="post" will not change the result[/QUOTE]


HA Looks pretty cool! I'll have to play with it! But what exactly does the "$" symbol do in javascript? Is it just another legal symbol you happen to like, or does it alter behavior in some way?
Copy linkTweet thisAlerts:
@rootJan 10.2014 β€”Β var msend = (["com",String.fromCharCode(46),"mdomain",String.fromCharCode(64),"myemail"].reverse()).join("");

I would also consider using rot13() function to scramble the letters before hand and then use it to decode when send button is clicked.

http://phpjs.org/functions/str_rot13/


[code=php]
echo "var msend = ([" . str_rot13 ("com") . ",String.fromCharCode(46)," . str_rot13 ("mdomain") . ",String.fromCharCode(64)," . str_rot13 ( "myemail" ) . "].reverse()).join('');";
[/code]


then using the PHP.JS rot13() function, use it in an onsubmit event to decode the PHP rot13 generated string.

The above is an example of a way to achieve obfuscation, you should however implement any reversal and joining of the array contents on the submit stage and apply to the field the value of the rot13 decode.
Copy linkTweet thisAlerts:
@PeterPan_321authorJan 10.2014 β€”Β That's a real brain twister! I honestly don't understand some of the syntax, though I get the gist of it. But I think if I were to approach improving my starting point, I'd just have two parallel arrays of characters. the first one would store all the characters of the email string in somewhat random order, and a second would have characters that easily translate to numbers, to store the indexes necessary to build the corrected string from the first array, in the proper order. I'd do that mainly because if you think about it, not only the code to reassemble the correct sting, but also the randomization and indexing arrays could all be done occasionally by another program, off line. drawing on a seeded rand() function to generate the "re-sequence". Kind of like ror-13, but more like rot-random. The good thing is that this method would have all re-usable code, and only the data in the arrays would change. I'll drum up an example of what I mean if I have time.
Copy linkTweet thisAlerts:
@Gray1989Jan 10.2014 β€”Β Why not just use AJAX, store an encoded or escaped variable in the source code and just unescape/decode before submission?
Copy linkTweet thisAlerts:
@PeterPan_321authorJan 10.2014 β€”Β Thanks. Might be worth a try. I'd need an example though. I've used javascript a bit over the years, but I've never actually used AJAX. It seems simple enough and really powerful, and its on my list of things to dig into this year. For now I just wanted to address a problem with a more familiar tool.
Copy linkTweet thisAlerts:
@Gray1989Jan 10.2014 β€”Β Okay, I'll be using modified code from http://w3schools.com/ajax/default.asp as a reference.

I've modified the code into a simple AJAX wrapper that you can use as you wish:

[CODE]function SendFormData(ActionURL, FormData, SendMethod, CallbackFn)
{
var xmlhttp;
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
if(CallbackFn)
{
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
CallbackFn(xmlhttp.responseText);
}
}
}
var FormParamsArray = [];
for(i in FormData)
{
FormParamsArray.push(encodeURIComponent(i)+"="+encodeURIComponent(FormData[i]));
}
var FormParams = FormParamsArray.join("&");
switch(SendMethod)
{
case "POST":
xmlhttp.open("POST",ActionURL,true);
xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xmlhttp.send(FormParams);
break;
case "GET":
xmlhttp.open("GET",ActionURL+"?"+FormParams,true);
break;
}
}[/CODE]


You'll want to use it like so:

[CODE]// btoa() converts "[email protected]" to "bXllbWFpbEBteWRvbWFpbi5jb20=" (base64) and atob() does opposite.
SendFormData("mailhandler.php", {sendtoemail: atob("bXllbWFpbEBteWRvbWFpbi5jb20="), anothervalue: "random text"}, "POST", null);[/CODE]


If you have any questions about this, feel free to ask!
Copy linkTweet thisAlerts:
@PadonakJan 10.2014 β€”Β HA Looks pretty cool! I'll have to play with it! But what exactly does the "$" symbol do in javascript? Is it just another legal symbol you happen to like, or does it alter behavior in some way?[/QUOTE]

it's just another legal symbol ))
Copy linkTweet thisAlerts:
@rootJan 10.2014 β€”Β you have to be wary of using symbols because some frameworks also use symbols as function identifiers and if you ever wanted to use a framework then you would have to rework you code.
Copy linkTweet thisAlerts:
@Gray1989Jan 10.2014 β€”Β I made a small mistake in the code and forgot to add the xmlhttp.send() command for GET req's; Here is the updated code:

[CODE]function SendFormData(ActionURL, FormData, SendMethod, CallbackFn)
{
var xmlhttp;
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
if(CallbackFn)
{
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
CallbackFn(xmlhttp.responseText);
}
}
}
var FormParamsArray = [];
for(i in FormData)
{
FormParamsArray.push(encodeURIComponent(i)+"="+encodeURIComponent(FormData[i]));
}
var FormParams = FormParamsArray.join("&");
switch(SendMethod)
{
case "POST":
xmlhttp.open("POST",ActionURL,true);
xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xmlhttp.send(FormParams);
break;
case "GET":
xmlhttp.open("GET",ActionURL+"?"+FormParams,true);
xmlhttp.send();
break;
}
}[/CODE]
Copy linkTweet thisAlerts:
@PeterPan_321authorJan 10.2014 β€”Β Gray1989: thanks! I'll check it out

Everyone: This is kind of on the same topic, but ithis time t has to do with the use of your .htaccess file. For reference, My contact link (stripped down) basically looks like this...

<a target="_blank" href ="private/mailpage2.html" onclick="Javascript:return AlertFunc('mailpage.html', 700,500);">Contact</a>

That AlertFunc is just a script of min, that opens and sizes a window and loads the page i specify. thats the one with my original "Form mail". The idea is that if javascript is active, that mailpage will come up. If its not active, a simpler page will come up. The simpler page can't use any scripting to hide the email address like we've been discussion, so what I have in is is a tempoaray address, which is just a forwarder. If I get too much spam I'll just delete to forwarder, create a new one, and update the page. The alt page is here if anyone is interested: http://elfintechnologies.com/private/mailpage2.html

Now... I'd like to try to prevent SPAMBOTs from scanning that alternate page, for obvious reasons. So at least i'd like to try to make it assessable ONLY when its linked from one of my pages, within my domain. Now I've done something like this before with the HTTP_REFERRER variable, within my .HTACCESS file. But its been so long I've totally forgotten how. I did find this write up which seems to explain how to block specific evil sites from accessing (http://www.javascriptkit.com/howto/htaccess14.shtml ), but I'm more interested in globally blocking any access thats not from any page within my domain. So..

1) is what I want to do possible

2) Am i wasting my time doing so, because it won't block anyone.
Copy linkTweet thisAlerts:
@Gray1989Jan 10.2014 β€”Β Kind of straying away from the topic of JavaScript, but hopefully nobody minds. I think you'll want to look at this page. Only problem I could foresee is that the HTTP_REFERER header isn't always reliable (depends on the client's browser). Are you able to make use of PHP or another server-side language? If so, I'll gladly help if you want to post a new thread in the appropriate forum topic.
Copy linkTweet thisAlerts:
@PeterPan_321authorJan 10.2014 β€”Β I am able to use PHP, excpt for one little issue.. I never have composed PHP myself, having done nothing bust static sites for such a long time. In fact i did start a thread about my less than ideal Form mail situation, which is apparently due to an issue with the PHP code my hosting company provides me. That thread is here... http://www.webdeveloper.com/forum/showthread.php?288743-problem-less-than-ideal-form-mail

That issue is even more important to me, because that deal with my form email, which I'm, sure will get used far more often than my alternate (non scriptable ) email. And I think some help there would educate me a LOT more about actually using PHP, and maybe set me on my way to being able to write my own. For the alternate, I'm content using the HTTP_REFERRER and my easily changeable email forwarder address. But I'm still having trouble understanding the RIGHT syntax to make that variable work for me.
Copy linkTweet thisAlerts:
@Gray1989Jan 10.2014 β€”Β You'll be way better off using PHP for this task, as PHP not only allows you to completely hide the email you're sending to (doesn't get sent to the client at all), but will also overcome any cross-domain referencing issues (aka "Same-origin policy") which I can see as possibly being problematic in this case. My next reply will be in the existing thread that you've just provided a link to. I'll need you to check if you have cURL installed and operational on your server, as hopefully that's what we'll be utilizing with the PHP code. If you do have cURL capabilities, kindly let me know either through a PM or just reply here. Thanks!
Copy linkTweet thisAlerts:
@PeterPan_321authorJan 10.2014 β€”Β OK... i think I've got this HTTP_REFERER thing working. maybe some of you could test for me? The first test is very easy. Just point your browser to

http://elfintechnologies.com/private/mailpage2.html

It should display a 404 error, which is currently handled by wordpress for now.

If you want to help me test further, its more of a pain, but if its not too much trouble turn javascript OFF (since the page is meant to be accessed only when javascript is not available) then go to http://elfintechnologies.com/testpage004.html and click the CONTACT link on the right side of my top menu. If javascript is ON, you'll get a page with form-mail. If javascript is OFF, now you should see the "mailpage2.html" page that was hidden before.


Since I've been warned that HTTP_REFERER is browser dependent, if you don't get the 404 for the first test, please let me know what browser you used. I do know that once you do the second test, you won't be able to do the first one again in some browsers because the "refere" is now in your cache. But I can live with that! :-)
Copy linkTweet thisAlerts:
@Gray1989Jan 10.2014 β€”Β Everything seems to work as expected!
Copy linkTweet thisAlerts:
@PeterPan_321authorJan 10.2014 β€”Β I'll need you to check if you have cURL installed and operational on your server, as hopefully that's what we'll be utilizing with the PHP code. If you do have cURL capabilities, kindly let me know either through a PM or just reply here. Thanks![/QUOTE]

I don't think I do. I couldn't find it in my Cpanel, and when I plugged "curl into the company site's (hostmonster.com) search, it came up dry.

I'm really getting sick of hostmonster. Its not a FREE host, its support is in the toilet, and its help agents don't have a clue about anything. Anyway, as i said... if I do use any scripting right now, it will be to help with that form mail proble, Please look at that thread, at http://www.webdeveloper.com/forum/showthread.php?288743-problem-less-than-ideal-form-mail Maybe there's some way i can download the PHP that handles the form (apparently at http://www.hostmonster.com/monstermail ), and maybe I'll be able to fix it and install my own copy, in my cgi-bin directory. Or maybe it will be easier to just find another form mail script that already works, and doesn't have the problems I described with losing text line breaks.
Copy linkTweet thisAlerts:
@PeterPan_321authorJan 10.2014 β€”Β @Gray1989 Thanks a heap! I did none to prevent hot links to my graphics too. I need to get my brain back into gear with this and other .htaccess features I haven't messed with in ages.
Copy linkTweet thisAlerts:
@Gray1989Jan 10.2014 β€”Β No problem, I replied in the thread you linked (http://www.webdeveloper.com/forum/showthread.php?288743-problem-less-than-ideal-form-mail), you can test out the script I made. Hopefully you have cURL and it works for you. You use it in the exact same way you use your existing form mailer, just omit the "sendtoemail" variable and make sure that you change the email "[email protected]" to the correct one. Let me know if you have any issues.
Copy linkTweet thisAlerts:
@Gray1989Jan 10.2014 β€”Β I use HostGator by the way, I really like their service and support. It is, however, the only hosting company that I have any experience with. If you're looking to switch it up, they're definitely not a bad choice. Probably not the cheapest option to go with but I'm definitely happy.
Γ—

Success!

Help @PeterPan_321 spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 β€” BETA 5.15,
whats_new: community page,
up_next: more Davinciβ€’003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinciβ€’003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...