怎样用HTML制作验证码

在网页开发中,验证码（CAPTCHA）是防止机器人滥用（如批量注册、暴力登录）的关键工具，HTML本身无法独立实现完整验证码功能，需结合CSS、JavaScript和后端语言（如PHP/Python），以下是主流实现方案及详细步骤：

验证码的核心原理

1. 服务端生成：后端创建随机文本/图像，存储答案（如Session或数据库）。
2. 客户端展示：前端通过HTML/CSS渲染验证码区域。
3. 用户验证：提交表单时，后端比对用户输入与存储的答案。

主流实现方案及代码示例

方案1：图片验证码（基础版）

<!-- HTML部分 -->
<form action="/validate" method="POST">
  <label>验证码：</label>
  <img src="captcha.php" id="captcha-img"> <!-- 后端生成图片 -->
  <button type="button" onclick="refreshCaptcha()">刷新</button>
  <input type="text" name="captcha" required>
  <input type="submit" value="提交">
</form>
<script>
function refreshCaptcha() {
  document.getElementById('captcha-img').src = 'captcha.php?t=' + Date.now();
}
</script>

后端生成（PHP示例）：

// captcha.php
session_start();
$code = substr(md5(rand()), 0, 6); // 6位随机码
$_SESSION['captcha'] = $code;      // 存储到Session
// 创建图片
$image = imagecreatetruecolor(120, 40);
$bg_color = imagecolorallocate($image, 255, 255, 255);
$text_color = imagecolorallocate($image, 0, 0, 0);
imagefill($image, 0, 0, $bg_color);
imagettftext($image, 20, 0, 10, 30, $text_color, 'font.ttf', $code);
header('Content-Type: image/png');
imagepng($image);
imagedestroy($image);

方案2：逻辑验证码（无需图片）

<!-- 前端显示数学题 -->
<div id="math-captcha">
  请计算：<span id="num1">5</span> + <span id="num2">3</span> = 
  <input type="number" name="captcha_answer">
  <input type="hidden" name="expected" value="8"> <!-- 后端预传答案 -->
</div>

优势：对无障碍访问友好，但安全性较低。

方案3：第三方服务（推荐）

Google reCAPTCHA v3示例：

<script src="https://www.google.com/recaptcha/api.js"></script>
<form action="/submit" method="POST">
  <input type="text" name="email">
  <!-- reCAPTCHA令牌 -->
  <input type="hidden" name="g-recaptcha-response" id="recaptchaResponse">
  <button class="g-recaptcha" data-sitekey="YOUR_SITE_KEY" data-action='submit'>提交</button>
</form>
<script>
  // 自动提交令牌到后端
  grecaptcha.ready(() => {
    grecaptcha.execute('YOUR_SITE_KEY', { action: 'submit' })
      .then(token => document.getElementById('recaptchaResponse').value = token);
  });
</script>

优势：Google提供行为分析，用户无感知，安全性高。

关键安全措施

1. 一次性使用：验证码仅生效一次，验证后立即销毁。
2. 防暴力破解：
   • 限制单IP请求频率（后端实现）。
   • 混淆图片内容（扭曲文字、干扰线）。
3. 时效性：设置5-10分钟过期时间，安全**：
   • 避免使用敏感数据（如密码片段）。
   • 禁用已被破解的简单验证码（如纯数字）。

选择建议

注意事项

1. 无障碍访问：提供音频验证码或备用方案。
2. 移动端适配：触控区域大于40×40px。
3. 用户体验：
   • 明确刷新按钮
   • 错误提示友好（如“验证码错误，请重试”）
4. HTTPS强制：防止中间人攻击。

引用说明

• Google reCAPTCHA文档：developers.google.com/recaptcha
• OWASP验证码指南：owasp.org/www-community/controls/Captcha
• PHP GD库图像处理：php.net/manual/en/book.image.php

提示：自建验证码需持续更新防御策略（如对抗OCR），高安全场景务必使用reCAPTCHA或hCaptcha等专业服务。