了解预防垃圾邮件中心及其在预防垃圾邮件方面的作用

CAPTCHA(完成自动公共图灵测试告诉计算机和人类Apart)已经成为保护网络形式免遭自动化滥用的重要工具. Spambot和恶意脚本经常针对接触表,登录页和评论部分提交不想要的内容或发动攻击. CAPTCHA的精心设计迫使bot失败一个大多数人类能够快速完成的挑战,在不干扰真实用户的情况下有效过滤出自动化流量.

现代 CAPTCHA 执行已经超越了曾经定义技术的扭曲文本图像。 随着JavaScript的广泛采用,开发者现在可以制造交互挑战 — — 如数学问题、图像谜题或拖放任务 — — 既方便用户,又难于被bots绕过。 本文探讨了如何使用香草JavaScript 执行 CAPTCHA , 整合额外的垃圾邮件预防技术,以及决定何时使用 reCAPTCHA 等第三方服务。

从剪贴板创建 JavaScript CAPTCHA

使用 JavaScript 创建自定义 CAPTCHA , 使您完全控制用户的经验和安全逻辑。 下面我们涵盖三种常见的方法:数学问题、滑动器和图像识别。 每个方法都可以使用 Plain HTML、 CSS 和 JavaScript 执行, 并随后整合到服务器侧验证流程中。

方法1:数学问题

最简单的 CAPTCHA 呈现用户必须解决的随机算术操作。 这对低风险形式很有效, 但无法抵御高级的bot, 它可以解析 HTML 或使用光学字符识别( OCR) 。

HTML结构].

<form id="contactForm">
 <div id="captchaContainer">
 <p id="captchaQuestion">Loading...</p>
 <input type="number" id="captchaAnswer" placeholder="Your answer" required />
 </div>
 <button type="submit">Submit</button>
</form>

贾瓦脚本逻辑 ].

let captchaAnswer = 0;

function generateMathCaptcha() {
 const num1 = Math.floor(Math.random() * 20) + 1;
 const num2 = Math.floor(Math.random() * 10) + 1;
 const operator = ['+', '-', '*'][Math.floor(Math.random() * 3)];
 let expression = `${num1} ${operator} ${num2}`;
 captchaAnswer = eval(expression);
 document.getElementById('captchaQuestion').textContent = `What is ${expression}?`;
}

document.getElementById('contactForm').addEventListener('submit', (e) => {
 e.preventDefault();
 const userAnswer = parseInt(document.getElementById('captchaAnswer').value, 10);
 if (userAnswer === captchaAnswer) {
 // Proceed with form submission
 console.log('CAPTCHA passed');
 } else {
 alert('Incorrect answer. Please try again.');
 generateMathCaptcha();
 document.getElementById('captchaAnswer').value = '';
 }
});

window.addEventListener('load', generateMathCaptcha);

限制:[] Math CAPTCHAs容易被执行JavaScript和计算答案的bots所伤害,为了提高安全性,将其与服务器侧验证(稍后讨论)相结合,并考虑混淆所产生的挑战,这样使脚本更难提取正确的答案.

方法2:滑动器 CAPTCHA

滑动挑战需要用户将一个按钮沿着一个轨道拖到特定的位置。这一技术依赖于检测像人类一样的鼠标运动和时间,使得简单的bots更难模仿。然而,高级bots可以模拟拖动事件。

基本执行

<div id="sliderCaptcha">
 <div id="sliderTrack">
 <div id="sliderThumb">→</div>
 </div>
 <p id="sliderStatus">Slide to verify</p>
</div>

添加事件倾听器用于 , ,以及 (或触摸等效 ) 。 跟踪拇指的偏移并把它与目标位置比较。 一个常见的技巧是随机设定每个页面负载上的目标位置,然后验证最终位置和运动模式。

安全注释:[ 由于bots可以程序上触发鼠标事件,滑动式CAPTCHAs应该与记录运动速度,总持续时间和最终位置的服务器侧检查对齐. Bots常常无法生成自然加速和减速配置.

方法3:图像选择 CAPTCHA

基于图像的 CAPTCHA 要求用户选择所有匹配特定类别的图像(例如"选择所有带有交通灯的方块"),虽然比扭曲文本更方便用户,但是它们从头到尾执行起来很复杂,因为它们需要服务器侧存储图像和答案,考虑为此方法使用第三方服务,但可以通过预先存储的图像和一个随机化的正确集来完成.

]简化示例:]

<div id="imageGrid">
 <img src="cat.jpg" class="captcha-image" data-kind="animal">
 <img src="car.jpg" class="captcha-image" data-kind="vehicle">
 <img src="dog.jpg" class="captcha-image" data-kind="animal">
 <img src="tree.jpg" class="captcha-image" data-kind="plant">
</div>
<p>Select all images that show an animal.</p>

JavaScript 将收集选中的图像,并在提交时验证其 属性。为了防止 bots 简单地读取 HTML, 属性值应该从服务器加密或动态生成 。

以其他技术加强安全

没有客户端 CAPTCHA 是防伪的; bots 可以逆向引擎 JavaScript, 运行无头浏览器, 或使用高级AI 。 因此, 将您的前端 CAPTCHA 与这些服务器端和客户端端的增强合并 。

蜜壶球场

蜂蜜壶是人类不会看到或填充的隐藏形式字段, 但 bots 经常自动完成。 添加一个带有样式的字段, 如 [[FLT: 8] 或 [[FLT: 9]] 。 在服务器上, 拒绝蜂蜜壶不是空的提交 。

<input type="text" name="website" style="display:none" autocomplete="off">

时间验证

博茨可以以毫秒的形式提交表格,而人类则需要数秒的时间来读取和响应. 使用 JavaScript(])记录表单生成时间,并随提交一起发送. 在服务器上,拒绝到达速度快于合理阈值的提交(例如简单形式2秒,CAPTCHA5秒).

const FORM_GENERATED = Date.now();
// On submit:
const submissionTime = Date.now() - FORM_GENERATED;
// Include in form data and validate server-side

服务器- 系统验证

永远不要单独信任客户端验证. 总是在服务器上重新测试 CAPTCHA 答案。 如果您生成了挑战客户端, 您也必须将挑战参数( 如数字和操作员) 发送到服务器并重算预期的答案。 更好的是, 生成服务器上的挑战, 发送到客户端, 并验证响应服务器侧。 这样可以防止恶意用户修改 JavaScript 来总是通过 CAPTCHA 。

数学 CAPTCHA 的服务器侧流示例 :

  1. 服务器生成两个随机数字和操作员,将预期的答案存储在会话中(或加密).
  2. 服务器将问题发送给客户端.
  3. 用户提交答案 。
  4. 服务器检索存储的答案并进行比较;如果匹配,则处理形式.

与外部服务机构共同实施《亚太人道主义援助中心》

对于生产站点,考虑使用完善的CAPTCHA服务,提供强大的保护,防止自动化攻击,包括基于机器学习的图像识别. Google reCAPTCHA[和h Captcha[],它们通过JavaScript库既提供免费的层次,又提供方便的集成.

reCAPTCHA v3 例:

<script src="https://www.google.com/recaptcha/api.js?render=YOUR_SITE_KEY"></script>
<script>
 document.getElementById('contactForm').addEventListener('submit', (e) => {
 e.preventDefault();
 grecaptcha.ready(() => {
 grecaptcha.execute('YOUR_SITE_KEY', {action: 'submit'}).then((token) => {
 // Append token to form and submit
 document.getElementById('recaptchaToken').value = token;
 document.getElementById('contactForm').submit();
 });
 });
 });
</script>

这些服务处理所有的举重:机器人检测、适应挑战和无障碍。它们也提供了一个监控流量和调整阈值的仪表板。然而,它们需要连接到服务服务器的互联网,并可能引起隐私问题(特别是reCAPTCHA的饼干使用问题 ) 。 评估权衡是否为您的观众所接受。

关于实用的集成指南,见Google reCAPTCHA开发者文档.

CAPTCHA 一体化的最佳做法

  • 可访问性:确保残疾人用户可使用CAPTCHA替代方案,由屏幕阅读器处理的音频挑战或基于文本的问题对于遵守世界教育咨询小组的准则至关重要。
  • 进步增强: 从简单的HTML形式开始,然后为 CAPTCHA 添加 JavaScript. 如果 JavaScript 被禁用,则返回到服务器生成的图像 CAPTCHA 或通过隐藏字段发送的简单数学查询.
  • 限制: 即使与CAPTCHA,也要对服务器应用限制速率(例如,限制每个IP地址每小时提交),这阻止了确定的攻击者手动突破CAPTCHA.
  • 记录和监测: Log CAPTCHA 失败和异常提交模式。这些数据有助于您微调阈值并识别新的攻击矢量。
  • Obfuscate JavaScript:[] 轻化和混淆你的CAPTCHA逻辑,使bots更难理解挑战生成。虽然不是防伪的,但它提高了逆向引擎所需的努力。
  • Combine Multions: 使用分层方法. 蜂蜜壶,时间检查,滑动器,服务器侧双检查一起提供比任何单一方法更好的保护.

结论

使用 JavaScript 执行 CAPTCHA , 使您有灵活性创建交互的、方便用户的反垃圾邮件措施。 从简单的数学谜题到滑动挑战,这些技术可以阻止许多自动攻击 — — 特别是当与服务器侧验证、蜂窝和基于时间的检查相结合时。 对于高流量或敏感形式,请考虑整合一个专业服务,如 reCAPTCHA 或 hCaptcha , 以受益于当前对机器人检测的改进。

记住安全是军备竞赛:随着CAPTCHA方法的改进,bots也一样。 定期检查您的执行,监测威胁模式,并相应更新防御。 通过采取主动、多层次的方法,你可以保持表格垃圾邮件的无阻性,而不会牺牲用户的经验。