here is my html code
<!DOCTYPE html>
<html>
<head>
<title>CAPTCHA Challenge</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<style>
#captcha-container {
width: 250px;
height: 150px;
position: relative;
}
#captcha-text {
font-size: 60px;
font-weight: bold;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
#captcha-box {
width: 200px;
height: 50px;
position: absolute;
top: 80%;
left: 50%;
transform: translate(-50%, -50%);
border: 2px solid black;
}
#captcha-input {
width: 194px;
height: 46px;
border: none;
font-size: 24px;
text-align: center;
}
#captcha-submit {
width: 100px;
height: 30px;
margin-top: 10px;
border: none;
border-radius: 5px;
font-size: 16px;
background-color: #4CAF50;
color: white;
cursor: pointer;
}
</style>
</head>
<body>
<h1>CAPTCHA Challenge</h1>
<p>To prove that you are human, please solve the following challenge:</p>
<div id="captcha-container">
<div id="captcha-text"></div>
</div>
<form id="captcha-form" method="POST" action="{{ url_for('captcha') }}">
<div id="captcha-box">
<input id="captcha-input" type="text" placeholder="Enter code here" name="code">
<br>
<button id="captcha-submit" type="submit">Submit</button>
</div>
</form>
<br>
<p id="captcha-message"></p>
<script>
// Generate a random 4-digit code
var code = Math.floor(Math.random() * 9000) + 1000;
var colors = ['#FF4136', '#0074D9', '#2ECC40', '#FFDC00', '#FF851B', '#B10DC9'];
var colorIndex = Math.floor(Math.random() * colors.length);
var color = colors[colorIndex];
var captchaText = document.getElementById('captcha-text');
captchaText.innerText = code;
captchaText.style.color = color;
// Check if the user input matches the code
var captchaForm = document.getElementById('captcha-form');
captchaForm.addEventListener('submit', function(event) {
event.preventDefault();
var captchaInput = document.getElementById('captcha-input');
var message = document.getElementById('captcha-message');
if (captchaInput.value == code) {
// Submit the form
captchaForm.submit();
} else {
message.innerText = 'Sorry, that was incorrect. Please try again.';
message.style.color = 'red';
// Generate a new code and update the CAPTCHA
code = Math.floor(Math.random() * 9000) + 1000;
colorIndex = Math.floor(Math.random() * colors.length);
color = colors[colorIndex];
captchaText.innerText = code;
captchaText.style.color = color;
captchaInput.value = '';
}
});
</script>
</body>
</html>
and here is my flask main.py to handle but is not working please someone help
@app.route('/')
def index():
return render_template('captcha.html')
@app.route('/captcha', methods=['POST'])
def captcha():
code = request.form['code']
if code == session['captchaInput']:
return render_template('success.html')
else:
return render_template('captcha.html')
I want my Flask code to validate the captcha is correct and redirect to successful.html without the user bypassing the captcha I don't want to use JavaScript redirects because it will expose my redirect URL when viewed on the source code.