ThemeKings Custom Web Design
"Old School Web Design Community Forum"

Author Topic: Anti-Bot for Shoutbox  (Read 3883 times)

Offline Swift

  • Administrator
  • Newbie
  • *****
  • Posts: 24
  • Web Developer
    • View Profile
    • ThemeKings
Anti-Bot for Shoutbox
« on: February 02, 2022, 01:25:34 PM »
The Demo Page for Z3 was getting hit with a lot of bot post with hyperlinks in them so I created a walk around for this by adding a Google Captcha to the "Shout" button. Basically it's making sure a human is hitting the shout button and not a script activating it.
Here's how to add one to your Z3 shoutbox as well:
----------------
1st -  Go to google and create a RECAPTCHA using version V3 to get a Site Code and Secret Key code for the next step.

2nd - Add this code just above the <!DOCTYPE line of your HTML code:
Code: [Select]
<?php define('SITE_KEY', 'YOUR SITE KEY GOES HERE');define('SECRET_KEY', 'YOUR SECRET KEY GOES HERE');if($_POST){    function getCaptcha($SecretKey){        $Response = file_get_contents("https://www.google.com/recaptcha/api/siteverify?secret=".SECRET_KEY."&response={$SecretKey}");        $Return = json_decode($Response);        return $Return;    }    $Return = getCaptcha($_POST['g-recaptcha-response']);    //var_dump($Return);    if($Return->success == true && $Return->score > 0.5){        echo "Success!";    }else{        echo "Robot Alert!!";    }}?>




3rd - Open your shoutbox.css file and delete everything in it, and replace with this: (Be aware this will change any customizing you may had done to the original css file I included for this in the free download)

Code: [Select]
#shoutbox {    padding: 0px;    margin: 0px auto 0px auto;
    width: 330px;
    position: relative;
    overflow: hidden;
    background-image: url('../theme/shoutbox.jpg');
    background-repeat: no-repeat;
    background-position: center top;
    height: 350px;
}
#sb-level-1 {
    padding: 0px;
    margin: 0px;
    width: 330px;
    height: 50px;
    position: relative;
    overflow: hidden;
}
#sb-level-1a {
    padding: 0px;
    margin: 0px;
    width: 165px;
    height: 50px;
    position: relative;
    float: left;
    overflow: hidden;
}
#sb-light-l {
    background-image: url('../theme/blue-light-l.gif');
    background-repeat: no-repeat;
    background-position: center top;
    padding: 0px;
    margin: 30px 0px 0px 46px;
    position: relative;
    width: 20px;
    height: 20px;
    overflow: hidden;
}
#sb-light-r {
    background-image: url('../theme/blue-light-r.gif');
    background-repeat: no-repeat;
    background-position: center top;
    padding: 0px;
    margin: 30px 0px 0px 99px;
    position: relative;
    width: 20px;
    height: 20px;
    overflow: hidden;
}
#sb-level-1b {
    padding: 0px;
    margin: 0px;
    width: 165px;
    height: 50px;
    position: relative;
    float: right;
    overflow: hidden;
}
#sb-level-2 {
    padding: 0px;
    margin: 0px;
    width: 330px;
    height: 142px;
    position: relative;
    overflow: hidden;
}
#sb-level-3 {
    padding: 0px;
    margin: 0px;
    width: 330px;
    height: 80px;
    position: relative;
    overflow: hidden;
}
#sb-level-3a {
    padding: 0px;
    margin: 0px;
    width: 230px;
    height: 80px;
    position: relative;
    overflow: hidden;
    float: left;
}
#sb-line-1 {
    padding: 0px;
    margin: 4px 0px 0px 60px;
    width: 170px;
    height: 14px;
    position: relative;
    overflow: hidden;
}
#sb-line-2 {
    padding: 0px;
    margin: 4px 0px 0px 60px;
    width: 170px;
    height: 50px;
    position: relative;
    overflow: hidden;
}
#sb-level-3b {
    padding: 5px 0px 0px 0px;
    margin: 0px 50px 0px 0px;
    width: 50px;
    height: 80px;
    position: relative;
    overflow: hidden;
    float: right;
}
#sb-level-4 {
    padding: 0px;
    margin: 0px 0px 0px 0px;
    width: 330px;
    height: 95px;
    position: relative;
    overflow: visible;
}
#shout-error {
    padding: 0px;
    margin: 20px auto 0px auto;
    width: 330px;
    height: 15px;
    position: relative;
    text-align: center;
}
#shouts {
    width: 202px;
    height: 126px;
    position: relative;
    padding: 0px;
    margin: 5px auto 0px auto;
}
#shouts {
    overflow-y: scroll;
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none;  /* IE 10+ */
}
#shouts::-webkit-scrollbar { /* WebKit */
    width: 0;
    height: 0;
}
.shout {
    margin: 0px;
    position: relative;
    overflow: hidden;
    padding: 2px;
    text-align: left;
    list-style-type: none;
    color: #0E1B25;
    border-bottom-style: dotted;
    border-bottom-width: 1px;
    border-bottom-color: #0E1B25;
}
.shout span {
    color: #96E0FC;
    text-align: left;
    list-style-type: none;
}
.shoutbutn {
    padding: 0px;
    margin: 0px;
    color: #018BAD;
    text-decoration: none;
    font-weight: normal;
    background: url('../theme/shout-butn.png') no-repeat center top;
    position: relative;
    font-size: 90%;
    text-align: center;
}
.shoutbutn:hover {
    color: #01BDEB;
}
#shouts-scroll {
    padding: 0px;
    margin: 0px 0px 0px 0px;
    width: 48px;
    height: 20px;
    position: relative;
}
#scrollUp {
    padding: 0px;
    margin: 0px 2px 0px 2px;
    width: 20px;
    height: 20px;
    position: relative;
    float: left;
}
#scrollDown {
    padding: 0px;
    margin: 0px 2px 0px 2px;
    width: 20px;
    height: 20px;
    position: relative;
    float: right;
}
textarea:focus, input:focus{
    outline: none;
}
*:focus {
    outline: none;
}
.form-control:focus {
  border-color: inherit;
  -webkit-box-shadow: none;
  box-shadow: none;
}


::-webkit-input-placeholder {
    color:#018BAD;
}
::-moz-placeholder {
    color:#018BAD;
}
::-ms-placeholder {
    color:#018BAD;
}
::placeholder {
    color:#018BAD;
}
#noscroll-message {
    overflow-y: scroll;
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none;  /* IE 10+ */
}
#noscroll-message::-webkit-scrollbar { /* WebKit */
    width: 0;
    height: 0;
}
#cap-wrapper {
    padding: 0px;
    margin: 46px 0px 0px 0px;
    position: relative;
    width: 266px;
    height: 22px;
}

#cap-1 {
    padding: 0px;
    margin: 0px;
    width: 266px;
    height: 14px;
    position: relative;
    text-align: center;
}
#cap-2 {
    padding: 0px;
    margin: 0px;
    width: 266px;
    height:14px;
    position: relative;
    text-align: center;
}
#cap-3 {
    padding: 0px;
    margin: 0px;
    width: 266px;
    height: 14px;
    position: relative;
    text-align: center;   
}
#submitButton {
    padding: 0px;
    margin: 0px;
    color: #018BAD;
    text-decoration: none;
    font-weight: normal;
    background: url('../theme/shout-butn.png') no-repeat center top;
    position: relative;
    font-size: 90%;
    text-align: center;
}


4th - Add this script just above the /HEAD section (Be sure to add your site key where noted)
Code: [Select]
<script src="https://www.google.com/recaptcha/api.js?render=YOUR SITE KEY GOES HERE"></script>

5th - Rather than going through and making several little changes to the html, lets just do one big one. Find the entire container that your ShoutBox is wrapped in (i.e. the mid-S-box div) and replace it with this:
Code: [Select]
<div class="mid-S-box">                <div class="mid-S-head"></div>                <div class="mid-S-filler">
                    <div class="mid-S-info">
                       
                       
                       
                        <div id="shoutbox">
                       
                            <div id="sb-level-1">
                                <div id="sb-level-1a">
                                    <div id="sb-light-l"></div>
                                </div>
                                <div id="sb-level-1b">
                                    <div id="sb-light-r"></div>
                                </div>
                            </div>
                           
                           
                            <div id="sb-level-2">
                                <div id="shouts">
                                    <ul style="margin:0px; padding:0px">
                                       
<?php while($row = mysqli_fetch_assoc($shouts)) : ?>

                                            <li class="shout"><span>
<?php echo $row['time'] ?>
- </span><strong>
<?php echo $row['user'] ?>
:</strong>
<?php echo $row['message'] ?>
</li>
                                       
<?php endwhile; ?>

                                    </ul>
                                </div>
                            </div>
                           
                           
                            <div id="sb-level-3" style="left: 0px; top: 0px">
                                <form style="width:330px; margin:0px; padding:0px" method="post" action="process.php">
                                    <div id="sb-level-3a">
                                        <div style="padding:0px; margin:0px" id="input">
                                       
                                            <div id="sb-line-1">
                                                <input style="margin:0px; width:160px; height:14px; background-color:transparent; border:0px; padding:0px; color: #018BAD; font-size:95%" type="text" name="user" placeholder="Enter Your Name" />
                                            </div>
                                                                                       
                                            <div id="sb-line-2">
                                                <input style="margin:0px; width:160px; height:50px; background-color:transparent; border:0px; padding:0px; color: #018BAD; font-size:95%" type="text" name="message" placeholder="Enter Message Here"/>
                                            </div>
                                       
                                        </div>
                                    </div>
                                           
                                    <div id="sb-level-3b">
                                        <div id="shouts-scroll">
                                            <div id="scrollUp">
                                                 <a href="#" id="scroll-up"><img style="margin:0px; padding:0px; height:20px; width:20px; border:0px; cursor:pointer" src="theme/up.jpg" />[/url]
                                            </div>
                                            <div id="scrollDown">
                                                <a href="#" id="scroll-down"><img style="margin:0px; padding:0px; height:20px; width:20px; border:0px; cursor:pointer" src="theme/down.jpg" />[/url]
                                            </div>
                                        </div>                               
                                       
                                        <input style="border:0px; width:50px; height:22px; padding:0px 0px 4px 0px; margin:2px 0px 0px 0px; cursor:pointer" id="submitButton" type="submit" name="submit" value="SHOUT"/>
                                        <input style="border:0px; width:50px; height:22px; padding:0px 0px 4px 0px; margin:0px 0px 0px 0px; cursor:pointer" class="shoutbutn" type="reset" value="CLEAR"/>
                                        <input style="height:14px" type="hidden" id="g-recaptcha-response" name="g-recaptcha-response" />
                                    </div>
                                </form>
                               
                                <script>
                                grecaptcha.ready(function() {
                                grecaptcha.execute('
<?php echo SITE_KEY; ?>
', {action: 'homepage'})
                                .then(function(token) {
                                    //console.log(token);
                                    document.getElementById('g-recaptcha-response').value=token;
                                });
                                });
                                </script>
                                   
                            </div>                           
                           
                           
                            <div id="sb-level-4">
                           
                                <div id="cap-wrapper">   
                               
                           
                                    <div id="cap-1"></div>                       
                                   
                                   
                                    <div id="cap-2"></div>

                                </div>

                                 
                            </div>
                       
                        </div>
                       
                    </div>
                </div>
                <div class="mid-S-footer">
                    <div id="shout-error">
                       
<?php if (isset($_GET['error'])) : ?>

                            <div>
<?php echo $_GET['error']; ?>
</div>
                       
<?php endif; ?>
                           
                    </div>               
                </div>           
            </div>

And that's it. Once you plug in your site and secret codes you got from Google you wont have to worry about getting a spam post every few minutes in your shoutbox. Here is the video I referenced to do this:
INSTALL GOOGLE RECAPTCHA

Credit to: Vicode Media
« Last Edit: February 02, 2022, 01:56:07 PM by Swift »
Todd Swift
Web Developer