Submit button not checking for hCaptcha verification

hellohelloju · February 9, 2022

Im making this website that makes you keep doing captchas forever, but I cant seem to get the button to only work when the captcha has been done, I've tried everything I know how to and I still cant figure out how (if the solve is very easy i apologize im dumb)

below is the code


<html>
  <head>
    <title>Waste-time</title>

    <script src="https://js.hcaptcha.com/1/api.js" async defer></script>
  </head>
  <body>


    <form action="" method="POST">
      <h1>Waste time</h1>
      <div class="h-captcha" data-sitekey="3b3e860d-4d9f-4149-84f4-b19e2c4af546"></div>
      <br/>
      <input onClick="one();" type="Submit" value="Again" />
    
  </form>
<script>
function one()
  if (success = 'true') {
history.go(0);
} 
else {
  alert('Do ur captcha cheater');
}
</script>

<script>

  SECRET_KEY = "XXXXXX (I know what to put here) "    # replace with your secret key
VERIFY_URL = "https://hcaptcha.com/siteverify"

# Retrieve token from post data with key 'h-captcha-response'.
token = request.POST_DATA['h-captcha-response']

# Build payload with secret key and token.
data = { 'secret': SECRET_KEY, 'response': token }

# Make POST request with data payload to hCaptcha API endpoint.
response = http.post(url=VERIFY_URL, data=data)

# Parse JSON from response. Check for success or error codes.
response_json = JSON.parse(response.content)
success = response_json['success']

</script>
<table height="10" style="border-collapse: collapse; width: 75%;" border="1">
<tbody>
<tr>
<td height="10" style="width: 33.3333%;">
<h2>Everyone combined has done</h2>
</td>
<td height="10" style="width: 33.3333%;"> <a
 href='https://dissertation-writingservice.com/'>Loading...</a> <script type='text/javascript' src='https://www.freevisitorcounters.com/auth.php?id=2c7bc93845d15dbac3123dd9c611d9d4ee36465f'></script>
<script type="text/javascript" src="https://www.freevisitorcounters.com/en/home/counter/917627/t/3"></script></td>
<td height="10" style="width: 33.3333%;">
<h2>Captchas</h2>
</td>
</tr>
</tbody>
</table>



 </body>
</html>

Eww · February 9, 2022

Reading through the developer guide for hcaptcha, it seems like it does add a hidden token to the form it's placed in to verify that a captcha has been successfully solved. This is good and means there may be a way to validate a correct response without submitting your form. The only way I could think of disabling a button without submitted the form would have to have some jQuery monitor your form for when that token is placed. See https://janjones.me/posts/detect-html-form-changes/ for detecting changes in forms with jQuery.

After you detect your change, you could enable your button like the following:

document.getElementById("mySubmit").disabled = false;

Also, please tell me this is not going on the internet or anywhere besides your computer in its current state. Your secret key should NEVER be stored in a script on the client side. This makes it accessible to anyone and everyone who visits this document. Secret keys should be used on the server side ONLY.

hellohelloju · February 9, 2022

6 hours ago, Eww said:
Reading through the developer guide for hcaptcha, it seems like it does add a hidden token to the form it's placed in to verify that a captcha has been successfully solved. This is good and means there may be a way to validate a correct response without submitting your form. The only way I could think of disabling a button without submitted the form would have to have some jQuery monitor your form for when that token is placed. See https://janjones.me/posts/detect-html-form-changes/ for detecting changes in forms with jQuery.

After you detect your change, you could enable your button like the following:
document.getElementById("mySubmit").disabled = false;
Also, please tell me this is not going on the internet or anywhere besides your computer in its current state. Your secret key should NEVER be stored in a script on the client side. This makes it accessible to anyone and everyone who visits this document. Secret keys should be used on the server side ONLY.

"server side ONLY." I'm sorry for being such and idiot but, how do i make it server side only?

hellohelloju · February 9, 2022

6 hours ago, Eww said:
Reading through the developer guide for hcaptcha, it seems like it does add a hidden token to the form it's placed in to verify that a captcha has been successfully solved. This is good and means there may be a way to validate a correct response without submitting your form. The only way I could think of disabling a button without submitted the form would have to have some jQuery monitor your form for when that token is placed. See https://janjones.me/posts/detect-html-form-changes/ for detecting changes in forms with jQuery.

After you detect your change, you could enable your button like the following:
document.getElementById("mySubmit").disabled = false;
Also, please tell me this is not going on the internet or anywhere besides your computer in its current state. Your secret key should NEVER be stored in a script on the client side. This makes it accessible to anyone and everyone who visits this document. Secret keys should be used on the server side ONLY.

also I have like the smallest amount of javascript knowlage you can imagine, I just decided to make this website for fun and I havve no idea how to use jQuery, could you possibly link a tutorial?

Eww · February 9, 2022

4 hours ago, hellohelloju said:

"server side ONLY." I'm sorry for being such and idiot but, how do i make it server side only?

Everyone starts somewhere, no need to apologize. First you need a web server that serves your website. Here's a really basic overview of what a server is:

Quote

A web server is a computer that runs websites. It's a computer program that distributes web pages as they are requisitioned. The basic objective of the web server is to store, process and deliver web pages to the users. This intercommunication is done using Hypertext Transfer Protocol (HTTP). These web pages are mostly static content that includes HTML documents, images, style sheets, test etc.

Since you're already learning Javascript, it would make sense to use something like NodeJS (https://nodejs.dev/learn, https://nodejs.org/en/) which can run Javascript on the both the service in the client. NodeJS and servers are a big topic that I can't do justice in a forum post, but you should be able to create a basic one fairly easy with guides, documentation, and youtube tutorials.

5 hours ago, hellohelloju said:

also I have like the smallest amount of javascript knowlage you can imagine, I just decided to make this website for fun and I havve no idea how to use jQuery, could you possibly link a tutorial?

jQuery is a JavaScript library that is known for allowing you to manipulate elements on an HTML page on the fly. w3schools always has very good tutorials on web standards so I would start there. They also have a NodeJS tutorial as well. Once you're done with those, you can check the first link I sent on manipulating HTML elements with jQuery and it should make more sense.