Of Stack

Implementation and technical analysis of verification code generated by js

  • 2020-03-30 03:58:06
  • OfStack

Share with you a section of js generated verification code and verify the code 


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>JS Generate verification code </title>
<style type="text/css">
.code {
background-image: url(code.jpg);
font-family: Arial;
font-style: italic;
color: Red;
border: 0;
padding: 2px 3px;
letter-spacing: 3px;
font-weight: bolder;
}
.unchanged {
border: 0;
}
</style>
<script language="javascript" type="text/javascript"> 
var code; //Define the captcha globally
function createCode() {
  code = "";
  var codeLength = 6;//Length of captcha
  var checkCode = document.getElementById("checkCode");
  var selectChar = new Array(0, 1, 2, 3, 4, 5, 6, 7, 8, 9,'A','B','C','D','E','F','G','H','I','J','K','L','M','N','O','P','Q','R','S','T','U','V','W','X','Y','Z');//All candidates for captcha characters, of course, can also be used in Chinese
 
  for (var i = 0; i < codeLength; i++) {
    var charIndex = Math.floor(Math.random() * 36);
    code += selectChar[charIndex];
  }
  //alert(code);
  if (checkCode) {
    checkCode.className = "code";
    checkCode.value = code;
  }
}
 
function validate() {
  var inputCode = document.getElementById("input1").value;
  if (inputCode.length <= 0) {
    alert(" Please enter verification code! ");
  } else if (inputCode != code) {
    alert(" Verification code input error! ");
  createCode();//Refresh verification code
  } else {
  alert("^-^ OK");
  }
}
</script>
</head>
<body onload="createCode()">
<form action="#">
  <input type="text" id="input1" /> <input type="text" onclick="createCode()" readonly="readonly" id="checkCode" class="unchanged" style="width: 80px" /><br />
  <input id="Button1" onclick="validate();" type="button" value=" determine " />
</form>
</body>
</html>

As we all know, js is the client side, so does it make sense to do all the validation on the client side? Or must the captcha generated from the server be secure? Is the verification code generated by the front end secure?

The captcha is dynamic, but must be recognized by the client and returned with the correct value to validate properly. This is a process problem, if js, that is in the client side of the verification, is basically equal to the same!! Preferably server generation, client side validation, server validation, normal browsing. Such a process is foolproof

Therefore, this article is only a technical discussion, do not use in actual production projects

Related articles: