www.webdeveloper.com
Page 1 of 2 12 LastLast
Results 1 to 15 of 24

Thread: help using a javascript fuction to hide email in a form

  1. #1
    Join Date
    Jun 2004
    Location
    Tampa, Florida
    Posts
    77

    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="myemail@mydomain.com" >
    <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...
    Last edited by PeterPan_321; 01-08-2014 at 09:07 PM.
    Randy (PeterPan)
    * * *
    * *
    ... Second Star to the Right, and Straight on Till Morning!
    * * *

  2. #2
    Join Date
    May 2006
    Location
    Somewhere behind your screen
    Posts
    1,648
    javascript is not php. do you see any <h1...6></h1...6> tags in the body?

    Code:
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="utf-8" />
    <title>123</title>
    <script>
    function spam(){
    document.write('<center>');
    document.write('<h1>SPAM</h1>');
    document.write('<h2>SPAM</h2>');
    document.write('<h3>SPAM</h3>');
    document.write('<h4>SPAM</h4>');
    document.write('<h5>SPAM</h5>');
    document.write('<h6>SPAM</h6>');
    document.write('</center>');
    }
    </script>
    </head>
    <body>
    <script>spam();</script>
    </body>
    </html>
    xxx: Guess Buddhist riddle: "What is the sound of one hand clapping?"
    yyy: facepalm

  3. #3
    Join Date
    Sep 2008
    Location
    Akron, OH
    Posts
    1,121
    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.
    I'm always up for networking with fellow web professionals. Connect with me on LinkedIn if you like!

  4. #4
    Join Date
    May 2006
    Location
    Somewhere behind your screen
    Posts
    1,648
    may be this can fool spambots:

    Code:
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="utf-8" />
    <title>123</title>
    <style>
    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;}
    </style>
    <script>
    var spamstring="\"'p'\"a*&d||o&*+n_/a-)k%@w#_ +e%&b!d)(e?v<**e>//l\-o?#p!+e=+r,.'\"\&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();}
    </script>
    </head>
    <body>
    <center>
    <form id="myform">
    <fieldset>
    <legend>Mail me</legend>
    <label for="sendtoemail">My email<br /><input size="30" class="fld" type="text" id="sendtoemail" name="sendtoemail" value="spam@flood.com" readonly="readonly" /></label>
    <label for="subject">Subject<br /><input size="30" class="fld" type="text" id="subject" name="subject" /></label>
    <label for="message">Message<br /><textarea class="fld" id="message" name="message" rows="5" cols="45"></textarea></label>
    <input class="fld" type="button" id="snd" value="Send" />
    </fieldset>
    </form>
    </center>
    </body>
    </html>
    check the window search bar after sending the form. i think using of method="post" will not change the result
    Last edited by Padonak; 01-09-2014 at 10:54 AM.
    xxx: Guess Buddhist riddle: "What is the sound of one hand clapping?"
    yyy: facepalm

  5. #5
    Join Date
    Jun 2004
    Location
    Tampa, Florida
    Posts
    77
    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.
    Randy (PeterPan)
    * * *
    * *
    ... Second Star to the Right, and Straight on Till Morning!
    * * *

  6. #6
    Join Date
    Jun 2004
    Location
    Tampa, Florida
    Posts
    77
    Quote Originally Posted by Padonak View Post
    may be this can fool spambots:

    Code:
    var spamstring="\"'p'\"a*&d||o&*+n_/a-)k%@w#_ +e%&b!d)(e?v<**e>//l\-o?#p!+e=+r,.'\"\&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
    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?
    Randy (PeterPan)
    * * *
    * *
    ... Second Star to the Right, and Straight on Till Morning!
    * * *

  7. #7
    Join Date
    Mar 2007
    Location
    localhost
    Posts
    2,326
    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/


    PHP Code:
    echo "var msend = ([" str_rot13 ("com") . ",String.fromCharCode(46)," str_rot13 ("mdomain") . ",String.fromCharCode(64)," str_rot13 "myemail" ) . "].reverse()).join('');"
    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.
    Yes, I know I'm about as subtle as being hit by a bus..(\\.\ Aug08)
    Yep... I say it like I see it, even if it is like a baseball bat in the nutz... (\\.\ Aug08)
    I want to leave this world the same way I came into it, Screaming, Incontinent & No memory!
    I laughed that hard I burst my colostomy bag... (\\.\ May03)
    Life for some is like a car accident... Mine is like a motorway pile up...

    Problems with Vista? :: Getting Cryptic wid it. :: The 'C' word! :: Whois?

  8. #8
    Join Date
    Jun 2004
    Location
    Tampa, Florida
    Posts
    77
    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.
    Randy (PeterPan)
    * * *
    * *
    ... Second Star to the Right, and Straight on Till Morning!
    * * *

  9. #9
    Join Date
    Mar 2012
    Posts
    202
    Why not just use AJAX, store an encoded or escaped variable in the source code and just unescape/decode before submission?

  10. #10
    Join Date
    Jun 2004
    Location
    Tampa, Florida
    Posts
    77
    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.
    Randy (PeterPan)
    * * *
    * *
    ... Second Star to the Right, and Straight on Till Morning!
    * * *

  11. #11
    Join Date
    Mar 2012
    Posts
    202
    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;
      }
    }
    You'll want to use it like so:

    Code:
    // btoa() converts "myemail@domain.com" to "bXllbWFpbEBteWRvbWFpbi5jb20=" (base64) and atob() does opposite.
    SendFormData("mailhandler.php", {sendtoemail: atob("bXllbWFpbEBteWRvbWFpbi5jb20="), anothervalue: "random text"}, "POST", null);
    If you have any questions about this, feel free to ask!
    Last edited by Gray1989; 01-10-2014 at 08:53 AM.

  12. #12
    Join Date
    May 2006
    Location
    Somewhere behind your screen
    Posts
    1,648
    Quote Originally Posted by PeterPan_321 View Post
    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?
    it's just another legal symbol ))
    xxx: Guess Buddhist riddle: "What is the sound of one hand clapping?"
    yyy: facepalm

  13. #13
    Join Date
    Mar 2007
    Location
    localhost
    Posts
    2,326
    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.
    Yes, I know I'm about as subtle as being hit by a bus..(\\.\ Aug08)
    Yep... I say it like I see it, even if it is like a baseball bat in the nutz... (\\.\ Aug08)
    I want to leave this world the same way I came into it, Screaming, Incontinent & No memory!
    I laughed that hard I burst my colostomy bag... (\\.\ May03)
    Life for some is like a car accident... Mine is like a motorway pile up...

    Problems with Vista? :: Getting Cryptic wid it. :: The 'C' word! :: Whois?

  14. #14
    Join Date
    Mar 2012
    Posts
    202
    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;
      }
    }

  15. #15
    Join Date
    Jun 2004
    Location
    Tampa, Florida
    Posts
    77
    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.
    Randy (PeterPan)
    * * *
    * *
    ... Second Star to the Right, and Straight on Till Morning!
    * * *

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles