Add proof-of-work (in JS) for contact form

There was too much spam from this contact form, so let's make it harder
for spammers to use.

lib/Explain.pm

@@ -37,6 +37,9 @@ sub startup {
     # load number_format plugin
     $self->plugin( 'number_format' );
 
+    # Plugin to check if static file exists
+    $self->plugin( 'Explain::Plugin::StaticExists' );
+
     # routes
     my $routes = $self->routes;
 
@@ -74,7 +77,8 @@ sub startup {
     $routes->route( '/history/:date' )->to( 'controller#history', date => '' )->name( 'history' );
 
     # route: 'contact'
-    $routes->route( '/contact' )->to( 'controller#contact' )->name( 'contact' );
+    $routes->get( '/contact' )->to( 'controller#contact' )->name( 'contact' );
+    $routes->post( '/contact' )->to( 'controller#contact_post' )->name( 'contact_post' );
 
     # route: 'help'
     $routes->route( '/help' )->to( 'controller#help' )->name( 'help' );

lib/Explain/Controller.pm

@@ -8,6 +8,7 @@ use Pg::Explain;
 use Encode;
 use Email::Valid;
 use Config;
+use Digest::MD5 qw( md5_hex );
 
 sub logout {
     my $self = shift;
@@ -357,11 +358,36 @@ sub history {
     return;
 }
 
-sub contact {
+sub contact_post {
     my $self = shift;
 
-    # nothing to do...
+    return $self->redirect_to( 'contact' ) unless $self->req->param( 'message' );
-    return unless $self->req->param( 'message' );
+
+    my $session_nonce = $self->session->{ 'nonce' };
+    my $param_nonce   = $self->req->param( 'nonce' );
+    my $prefix        = $self->req->param( 'nonceprefix' );
+
+    if (   ( !defined $session_nonce )
+        || ( !defined $param_nonce )
+        || ( $session_nonce ne $param_nonce ) )
+    {
+        $self->flash( error => "Please don't hack me" );
+        return $self->redirect_to( 'contact' );
+    }
+    if (   ( !defined $prefix )
+        || ( $prefix eq '' ) )
+    {
+        $self->flash( error => "Sorry, due to contact spam, you need JavaScript to contact me." );
+        return $self->redirect_to( 'contact' );
+    }
+
+    my ( $level, $nonce ) = split( /:/, $session_nonce );
+    my $md5_prefix = substr( md5_hex( $prefix . $nonce ), 0, $level );
+    $md5_prefix =~ s/0//g;
+    if ( $md5_prefix ne '' ) {
+        $self->flash( error => "Please don't hack me" );
+        return $self->redirect_to( 'contact' );
+    }
 
     # invalid email address
     return $self->render( error => 'Invalid email address' )
@@ -393,6 +419,17 @@ sub contact {
     $self->redirect_to( 'contact' );
 }
 
+sub contact {
+    my $self = shift;
+
+    my @chars = ( "a" .. "z", "A" .. "Z", "0" .. "9" );
+    my $level = 2;
+    my $nonce = $level . ':' . join( '', map { $chars[ rand @chars ] } 1 .. 20 );
+    $self->stash->{ 'nonce' }   = $nonce;
+    $self->session->{ 'nonce' } = $nonce;
+    return;
+}
+
 sub info {
     my $self = shift;
     $self->redirect_to( 'new-explain' ) unless $self->session->{ 'user' };

lib/Explain/Plugin/StaticExists.pm

@@ -0,0 +1,22 @@
+package Explain::Plugin::StaticExists;
+use Mojo::Base qw( Mojolicious::Plugin );
+
+use File::Spec;
+
+sub register {
+    my ( $self, $app ) = @_;
+
+    $app->helper(
+        'static_exists' => sub {
+            my ( $self, $file ) = @_;
+
+            for my $path ( @{ $self->app->static->paths } ) {
+                return 1 if -e File::Spec->catfile( $path, split('/', $file ) );
+            }
+
+            return;
+        }
+    );
+}
+
+1;

public/css/style.css

@@ -30,7 +30,6 @@ button {overflow:visible;width:0}
 
 button[type] {width:auto}
 
-
 /*
  * typography
  */
@@ -425,3 +424,4 @@ div.plea { float: right; color: #666; }
 .user-history .row .action button:hover span  {color:#fff;cursor:pointer}
 
 .user-history div.date              {background:#ddd;text-align:center;font-style:italic;color:#333;}
+

public/js/contact.js

@@ -0,0 +1,34 @@
+( function( $ ) {
+    var submit = $('#send_email');
+    submit.hide();
+
+    // MD5 function taken from
+    // https://stackoverflow.com/questions/14733374/how-to-generate-md5-file-hash-on-javascript
+    var MD5 = function(d){result = M(V(Y(X(d),8*d.length)));return result.toLowerCase()};function M(d){for(var _,m="0123456789ABCDEF",f="",r=0;r<d.length;r++)_=d.charCodeAt(r),f+=m.charAt(_>>>4&15)+m.charAt(15&_);return f}function X(d){for(var _=Array(d.length>>2),m=0;m<_.length;m++)_[m]=0;for(m=0;m<8*d.length;m+=8)_[m>>5]|=(255&d.charCodeAt(m/8))<<m%32;return _}function V(d){for(var _="",m=0;m<32*d.length;m+=8)_+=String.fromCharCode(d[m>>5]>>>m%32&255);return _}function Y(d,_){d[_>>5]|=128<<_%32,d[14+(_+64>>>9<<4)]=_;for(var m=1732584193,f=-271733879,r=-1732584194,i=271733878,n=0;n<d.length;n+=16){var h=m,t=f,g=r,e=i;f=md5_ii(f=md5_ii(f=md5_ii(f=md5_ii(f=md5_hh(f=md5_hh(f=md5_hh(f=md5_hh(f=md5_gg(f=md5_gg(f=md5_gg(f=md5_gg(f=md5_ff(f=md5_ff(f=md5_ff(f=md5_ff(f,r=md5_ff(r,i=md5_ff(i,m=md5_ff(m,f,r,i,d[n+0],7,-680876936),f,r,d[n+1],12,-389564586),m,f,d[n+2],17,606105819),i,m,d[n+3],22,-1044525330),r=md5_ff(r,i=md5_ff(i,m=md5_ff(m,f,r,i,d[n+4],7,-176418897),f,r,d[n+5],12,1200080426),m,f,d[n+6],17,-1473231341),i,m,d[n+7],22,-45705983),r=md5_ff(r,i=md5_ff(i,m=md5_ff(m,f,r,i,d[n+8],7,1770035416),f,r,d[n+9],12,-1958414417),m,f,d[n+10],17,-42063),i,m,d[n+11],22,-1990404162),r=md5_ff(r,i=md5_ff(i,m=md5_ff(m,f,r,i,d[n+12],7,1804603682),f,r,d[n+13],12,-40341101),m,f,d[n+14],17,-1502002290),i,m,d[n+15],22,1236535329),r=md5_gg(r,i=md5_gg(i,m=md5_gg(m,f,r,i,d[n+1],5,-165796510),f,r,d[n+6],9,-1069501632),m,f,d[n+11],14,643717713),i,m,d[n+0],20,-373897302),r=md5_gg(r,i=md5_gg(i,m=md5_gg(m,f,r,i,d[n+5],5,-701558691),f,r,d[n+10],9,38016083),m,f,d[n+15],14,-660478335),i,m,d[n+4],20,-405537848),r=md5_gg(r,i=md5_gg(i,m=md5_gg(m,f,r,i,d[n+9],5,568446438),f,r,d[n+14],9,-1019803690),m,f,d[n+3],14,-187363961),i,m,d[n+8],20,1163531501),r=md5_gg(r,i=md5_gg(i,m=md5_gg(m,f,r,i,d[n+13],5,-1444681467),f,r,d[n+2],9,-51403784),m,f,d[n+7],14,1735328473),i,m,d[n+12],20,-1926607734),r=md5_hh(r,i=md5_hh(i,m=md5_hh(m,f,r,i,d[n+5],4,-378558),f,r,d[n+8],11,-2022574463),m,f,d[n+11],16,1839030562),i,m,d[n+14],23,-35309556),r=md5_hh(r,i=md5_hh(i,m=md5_hh(m,f,r,i,d[n+1],4,-1530992060),f,r,d[n+4],11,1272893353),m,f,d[n+7],16,-155497632),i,m,d[n+10],23,-1094730640),r=md5_hh(r,i=md5_hh(i,m=md5_hh(m,f,r,i,d[n+13],4,681279174),f,r,d[n+0],11,-358537222),m,f,d[n+3],16,-722521979),i,m,d[n+6],23,76029189),r=md5_hh(r,i=md5_hh(i,m=md5_hh(m,f,r,i,d[n+9],4,-640364487),f,r,d[n+12],11,-421815835),m,f,d[n+15],16,530742520),i,m,d[n+2],23,-995338651),r=md5_ii(r,i=md5_ii(i,m=md5_ii(m,f,r,i,d[n+0],6,-198630844),f,r,d[n+7],10,1126891415),m,f,d[n+14],15,-1416354905),i,m,d[n+5],21,-57434055),r=md5_ii(r,i=md5_ii(i,m=md5_ii(m,f,r,i,d[n+12],6,1700485571),f,r,d[n+3],10,-1894986606),m,f,d[n+10],15,-1051523),i,m,d[n+1],21,-2054922799),r=md5_ii(r,i=md5_ii(i,m=md5_ii(m,f,r,i,d[n+8],6,1873313359),f,r,d[n+15],10,-30611744),m,f,d[n+6],15,-1560198380),i,m,d[n+13],21,1309151649),r=md5_ii(r,i=md5_ii(i,m=md5_ii(m,f,r,i,d[n+4],6,-145523070),f,r,d[n+11],10,-1120210379),m,f,d[n+2],15,718787259),i,m,d[n+9],21,-343485551),m=safe_add(m,h),f=safe_add(f,t),r=safe_add(r,g),i=safe_add(i,e)}return Array(m,f,r,i)}function md5_cmn(d,_,m,f,r,i){return safe_add(bit_rol(safe_add(safe_add(_,d),safe_add(f,i)),r),m)}function md5_ff(d,_,m,f,r,i,n){return md5_cmn(_&m|~_&f,d,_,r,i,n)}function md5_gg(d,_,m,f,r,i,n){return md5_cmn(_&f|m&~f,d,_,r,i,n)}function md5_hh(d,_,m,f,r,i,n){return md5_cmn(_^m^f,d,_,r,i,n)}function md5_ii(d,_,m,f,r,i,n){return md5_cmn(m^(_|~f),d,_,r,i,n)}function safe_add(d,_){var m=(65535&d)+(65535&_);return(d>>16)+(_>>16)+(m>>16)<<16|65535&m}function bit_rol(d,_){return d<<_|d>>>32-_}
+
+    var [level, nonce] = $('#nonce').val().split(":");
+    level = Number(level);
+
+    var prefix = 0;
+    var found = false;
+
+    for (var prefix = 0; prefix < 4000000000; prefix++) {
+        var md5 = MD5( String(prefix) + nonce )
+        var isOk = true;
+        for (var i = 0; i < level; i++) {
+            if ( md5[i] != '0' ) {
+                isOk = false;
+                break;
+            }
+        }
+        if (isOk) {
+            found = true;
+            break;
+        }
+    }
+    if (found) {
+        $('#nonceprefix').val(prefix);
+
+        submit.show();
+    }
+} )( jQuery );

templates/controller/contact.html.ep

@@ -11,13 +11,21 @@
 </div>
 % }
 
-% if ( stash 'error' ) {
+% if ( flash 'error' ) {
 <div class="message">
-    <p class="error"><%= stash 'error' =%></p>
+    <p class="message messageSimple"><%= flash 'error' =%></p>
 </div>
 % }
 
-<form id="contact" method="post" action="<%= url_for 'current' %>">
+% if ( stash 'error' ) {
+<div class="message">
+    <p class="message messageSimple"><%= stash 'error' =%></p>
+</div>
+% }
+
+<form id="contact" method="post" action="<%= url_for 'contact_post' %>">
+    <input type="hidden" id='nonce' name="nonce" value="<%= stash 'nonce' %>"/>
+    <input type="hidden" id='nonceprefix' name="nonceprefix"/>
 
     <div class="fe fe-first fe_name">
         <label for="name">Your name</label>

templates/layouts/default.html.ep

@@ -8,19 +8,19 @@
         <link rel="stylesheet" href="<%= url_for '/' %>css/style.css" />
 
         <!--[if lt IE 9]>
-        <script>
+            <script>
 
             /* html5 elements */
             var elements = ( "abbr,article,aside,audio,cavnas,datalist,"
-                           + "details,figure,footer,header,hgroup,mark,"
+            + "details,figure,footer,header,hgroup,mark,"
-                           + "menu,meter,output,progress,section,video,"
+            + "menu,meter,output,progress,section,video,"
-                           + "time,nav" ).split( ',' );
+            + "time,nav" ).split( ',' );
 
             for ( var i = 0 ; i < elements.length ; i++ ) {
-                document.createElement( elements[ i ] );
+            document.createElement( elements[ i ] );
             }
 
-        </script>
+            </script>
         <![endif]-->
 
         <script src="<%= url_for '/' %>js/jquery-1.5.1.min.js"></script>
@@ -120,5 +120,10 @@
         </div>
         <!-- /wrapper -->
 
+% my $route = stash('route') || current_route;
+% if ( static_exists( "js/" . $route . ".js" ) ) {
+<script src="<%= url_for '/js/' . $route . '.js' %>"></script>
+% }
+
     </body>
 </html>