How to prevent visitors or bots submitting a certain message that contain a certain string?

user_4480164 0
Viewed 30

I have a message box at the bottom of my site. I don't know how these messages manage to slip through my validations.

These are the spam messages, that somehow able to submit to my database.

JS validation:

$('#send-contact').click(function(e) {
    e.preventDefault()

    //Gather inputs objects
    var $inputs = {}
    $inputs.name = $('#contact-form #name')
        .val()
        .trim()
    $inputs.email = $('#contact-form #email')
        .val()
        .trim()
    $inputs.message = $('#contact-form #message')
        .val()
        .trim()

    console.log($inputs)
    // console.log($inputs.email.indexOf('*'));

    if ($inputs.name.length === 0 || $inputs.email.length === 0 || $inputs.message.length === 0) {
        alert('1 or more input(s) is empty! ‼️ \n\nYour message: \n\n --empty--')
        return false
    }

    if ($inputs.message.indexOf('http') > -1) {
        alert('Link is not allow in message!  \n\nYour message: \n\n' + $inputs.message)
        return false
    }

    if ($inputs.email.indexOf('@') == -1) {
        alert('Check your email format!  \n\nYour message: \n\n' + $inputs.email)
        return false
    }

    if ($inputs.email.indexOf('.') == -1) {
        alert('Check your email format!  \n\nYour message: \n\n' + $inputs.email)
        return false
    }

    $('#send-contact').empty()
    $('#send-contact').append('<img src="/assets/fe/img/svg/default.svg" alt="Loading" style="width: 20px; float: right; padding-top: 5px; ">')

    var data = {}
    $.ajax({
        method: 'POST',
        url: '/y',
        crossDomain: true,
        contentType: false,
        headers: {
            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('value'),
            Accept: 'application/json',
            'Content-Type': 'application/x-www-form-urlencoded',
            'Cache-Control': 'no-cache'
        },
        data: $inputs,
        success: function(response) {
            console.log(response)

            var audio = `<audio id="audio2" controls="controls" hidden="hidden">
            <source src="/assets/music/alert.mp3" type="audio/ogg">
            <source src="/assets/music/alert.mp3" type="audio/mpeg">
            Your browser does not support the audio element.
            </audio>`

            $('#thankModal').append(audio)
            $('#send-contact').remove('img')

            $('#audio2')
                .get(0)
                .play()
            $('.loading').addClass('hidden')
            $('#thankModal').modal('show')

            $('#thankModal #text1').removeClass('hidden')
            $('#thankModal #text1')
                .text('Thank-you for your note. !')
                .slideDown('slow')

            setTimeout(function() {
                $('#thankModal #text1').fadeOut()

                $('#thankModal #text2').removeClass('hidden')
                $('#thankModal #text2')
                    .text('Message sent. !')
                    .slideDown('slow')

                setTimeout(function() {
                    $('#thankModal #text2').fadeOut()

                    $('#thankModal #text3').removeClass('hidden')
                    $('#thankModal #text3')
                        .text('Site will redirect. !')
                        .slideDown('slow')

                    $('#thankModal').modal('hide')
                    $('#reset').click()
                    $('label.error').hide()
                    $('label.valid').hide()

                    $('#send-contact').empty()
                    $('#send-contact').text('SEND')

                    window.open('/thank-you', '_blank')
                }, 1000)
            }, 1000)
        },
        error: function(jqXHR, textStatus, errorThrown) {
            console.log(JSON.stringify(jqXHR))
            console.log('AJAX error: ' + textStatus + ' : ' + errorThrown)

            alert(textStatus)
            // window.open("/thank-you", "_blank");
            location.reload()
        }
    })
})

enter image description here

What happened to this check?

 if ($inputs.message.indexOf('http') > -1) {
        alert('Link is not allow in message!  \n\nYour message: \n\n' + $inputs.message)
        return false
    }

I tested my message box by pasting the same exact text

We always struggled to pack before a trip. What to bring, how many or how much of it, etc... So we have created this Foldable Travel Bag. It's Just So Versatile! . Easy to Fold and Unfold . Large Storage Space . Portable + Waterproof 60% OFF for the next 24 Hours ONLY + FREE Worldwide Shipping for a LIMITED time! Buy now: https://ifashiononline.shop Many Thanks, Shanel

It got stopped by the validation, which is what I expected.

enter image description here

How can these messages still slip through and be able to submit my form? Is this a bot that can bypass JS validation?

jquery javascript
1 Answers

No matter what code you put on the frontend, if an endpoint is visible to the client (for example, if it exists in the source code), it'll be possible for any client to send any information they want to that endpoint. Setting up client-side JavaScript validation is useful to improve the UI, but it doesn't improve the security of what's allowed to be submitted at all.

A good rule of thumb is: nothing that runs on the client is really secure, because the client can run any JavaScript code they want (and perhaps with a bot).

If you want to stop certain messages, you'll have to put the logic that tests for the submission's validity on the back-end, not only on the front-end - then only insert into the database if the back-end test passes.

user_95152070
Related