无验证码支持下AMP表单防机器人特定文本验证方案咨询

嘿，这个需求很实际！单纯靠pattern属性确实太容易被机器人破解了——毕竟爬虫能直接读取HTML里的规则，甚至能自动匹配pattern。下面给你几个更隐蔽的AMP表单实现方案，既能满足「特定文本验证」的需求，又能大幅提升机器人破解的难度：

1. 用amp-script藏起验证逻辑（最推荐） #

AMP允许通过amp-script运行有限的自定义JS，我们可以把验证逻辑和正确答案都藏在脚本里，避免直接暴露在HTML属性中。甚至可以对答案做简单编码，让机器人无法从静态源码里直接拿到明文。

示例代码：

<form method="POST" action-xhr="/your-submit-endpoint" target="_top">
  <label>什么动物会发出哞哞声？</label>
  <input type="text" name="animal" id="animal-input" required>
  <input type="submit" value="提交">
  
  <amp-script layout="container" script="custom-validation">
  </amp-script>
</form>

<!-- 脚本内容用text/plain类型，避免被爬虫直接解析 -->
<script id="custom-validation" type="text/plain" target="amp-script">
  const form = document.querySelector('form');
  const input = document.getElementById('animal-input');
  
  // 用Unicode编码存储正确答案，避免明文暴露
  const correctAnswer = String.fromCharCode(29275); // 对应汉字“牛”
  
  form.addEventListener('submit', (e) => {
    if (input.value.trim() !== correctAnswer) {
      e.preventDefault();
      alert('答案不对哦，请再想想！');
    }
  });
</script>

2. 用amp-bind动态控制验证规则 #

利用AMP的amp-bind状态管理，把正确答案存在动态状态里，提交时再做对比。这种方式的验证规则不会出现在初始HTML的静态属性中，机器人很难直接抓取。

示例代码：

<!-- 用amp-state存储编码后的答案 -->
<amp-state id="validationState">
  <script type="application/json">
    {
      "correctAnswer": "\u725b" // Unicode编码的“牛”
    }
  </script>
</amp-state>

<form method="POST" action-xhr="/your-submit-endpoint" target="_top">
  <label>什么动物会发出哞哞声？</label>
  <input type="text" name="animal" id="animal-input" required
    on="input-debounced:AMP.setState({userInput: event.value})">
  
  <!-- 动态显示错误提示 -->
  <div class="error-message" hidden [hidden]="userInput === validationState.correctAnswer">
    请输入正确的答案哦！
  </div>
  
  <!-- 动态禁用提交按钮 -->
  <input type="submit" value="提交" [disabled]="userInput !== validationState.correctAnswer">
</form>

3. 结合行为验证增加门槛 #

可以要求用户先完成一个简单的交互（比如点击问题）才会显示输入框，机器人如果只爬静态HTML，甚至找不到输入框的存在。

示例代码：

<amp-state id="formState">
  <script type="application/json">
    {
      "showInput": false,
      "correctAnswer": "\u725b"
    }
  </script>
</amp-state>

<!-- 点击后才显示表单 -->
<p class="question-trigger" on="tap:AMP.setState({showInput: true})">
  点击这里查看问题并回答
</p>

<form method="POST" action-xhr="/your-submit-endpoint" target="_top" hidden [hidden]="!showInput">
  <label>什么动物会发出哞哞声？</label>
  <input type="text" name="animal" required
    on="input-debounced:AMP.setState({userInput: event.value})">
  <input type="submit" value="提交" [disabled]="userInput !== formState.correctAnswer">
</form>

额外小贴士 #

• 搭配「蜜罐字段」：在表单里加一个隐藏的输入框（比如<input type="text" name="honeypot" style="display: none;">），后端检查这个字段是否为空——机器人会自动填充所有字段，人类看不到这个输入框，所以为空才是正常提交。
• 不要用简单的明文答案：哪怕是把答案拆成字符拼接（比如const answer = '午' + '牛'.slice(1)），都比直接写明文更安全。

内容的提问来源于stack exchange，提问作者benjamin