基于CANVAS与MD5的客户端生成验证码
好久没写东西,工作太忙了!不想服务端请求太多,搞了个这玩意儿,不过项目中并不会用上,还是使用服务端生成的机制(会安全多少呢?);我就想问个问题,除了图像识别来破解这样的简单验证码外,针对我这种例子,可以侦听到我的验证码吗?How?好吧,最简单的莫过于开发个浏览器插件,在页面注入脚本,修改我的所谓“md5的密码”的值。ヽ(*。>Д<)o゜
在线demo:verificationcod
<!DOCTYPE html><html lang="en">
<head><meta charset="UTF-8"><title>Document</title> </head> <body><input type="text" id="verificationCodeValue" /><button id="verificationCodeBtn">验证</button><script type="text/javascript" src="md5.min.js"></script><script type="text/javascript">var verificationCode="";function createVerificationCode (w,h){ var codeLength = 4;var code=[];var random = 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');for(var i = 0; i < codeLength; i++) {var index = Math.floor(Math.random()*36); code.push(random[index]); }verificationCode = md5(code.join(""));console.log(verificationCode);var colors = ["red","green","brown","blue","orange","purple","black"]; var codeCanvas = document.createElement("canvas");codeCanvas.width = w;codeCanvas.height= h;var ctx = codeCanvas.getContext("2d");ctx.font = "18px Arial";var cx = (w-20-codeLength*4)/(codeLength-1),cy = h/2+18/2;var deg,cos,sin,dg;for(var j=0;j<codeLength;j++){ctx.fillStyle =colors[Math.floor(Math.random()*colors.length)];//产生一个正负30度以内的角度值以及一个用于变形的dg值 dg = Math.random()*4.5/10; deg = Math.floor(Math.random()*60);deg = deg>30?(30-deg):deg;cos = Math.cos(deg*Math.PI/180); sin = Math.sin(deg*Math.PI/180); ctx.setTransform(cos,sin+dg,-sin+dg,cos,(j?cx:10)*j+10,cy);ctx.fillText(code[j], 0,0);console.log(sin);}var img = document.getElementById("verificationCodeImg");if(!img){img = new Image();img.id="verificationCodeImg";img.onload= function(){document.body.appendChild(img);}}img.src=codeCanvas.toDataURL("image/png");}window.onload=function(){createVerificationCode(120,40);document.getElementById("verificationCodeBtn").onclick=function(){var vlu = document.getElementById("verificationCodeValue").value;if(vlu.length!=4){alert("请输入正确的验证码");}else if(md5(vlu.toUpperCase())===verificationCode){alert("正确的验证码!");}else{alert("错误的验证码!");createVerificationCode(120,40);}}}</script> </body> </html>
本文原创,转载注明出处...博客园 哥德
转载于:https://www.cnblogs.com/gradolabs/p/verificationcode.html
基于CANVAS与MD5的客户端生成验证码相关推荐
- 前端js——验证码登录(canvas画布),随机生成验证码,判断正确性
1.html canvas画布: 元素用于图形的绘制,canvas 元素本身是没有绘图能力的,通过脚本 (通常是JavaScript)来完成. 标签通常需要指定一个id属性 (脚本中经常引用), wi ...
- Jquery 客户端生成验证码
验证码的作用: 1.有效防止这种问题对某一个特定注册用户用特定程序暴力破解方式进行不断的登陆尝试,实际上是用验证码是现在很多网站通行的方式(比如招商银行的网上个人银行,腾讯的QQ社区),我们利用比较简 ...
- h5基于canvas的凹凸拼图碎片生成
文章目录 前言 一.如何将图片切割成凹凸形状 二.完整代码 总结 前言 最近接到了一个web的拼图游戏需求,要求在前端生成凹凸碎片样式.在github逛了逛,发现基本都是切割成方块,不满足需求:要么是 ...
- captcha.js一个生成验证码的插件,使用js和canvas生成
一.captcha`captcha.js`是一个生成验证码的插件,使用js和canvas生成的,确保后端服务被暴力攻击,简单判断人机以及系统的安全性,体积小,功能多,支持配置. 验证码插件内容,包含1 ...
- html验证码功能如何实现原理,基于JS实现一个随机生成验证码功能
效果展示 实现原理 1. html:一般就是一个div: 2. JS:1)将所有的验证码所用的字符放在一个字符串中 2)在这个字符串的字符个数以内,随机生成索引号 3)根据索引号查找对应字符,拼接成验 ...
- 浙大python读者验证码_Python实现简单生成验证码功能【基于random模块】
本文实例讲述了Python实现简单生成验证码功能.分享给大家供大家参考,具体如下: 验证码一般用来验证登陆.交易等行为,减少对端为机器操作的概率,python中可以使用random模块,char()内 ...
- 用python写一个程序来验证每个数字的生成概率是否相同_Python实现简单生成验证码功能【基于random模块】...
本文实例讲述了Python实现简单生成验证码功能.分享给大家供大家参考,具体如下: 验证码一般用来验证登陆.交易等行为,减少对端为机器操作的概率,python中可以使用random模块,char()内 ...
- C# 生成验证码 方法一
注意命名空间的引用 在项目中新建Validcode.aspx <%@ Page Language="C#" AutoEventWireup="true" ...
- 7个华丽的基于Canvas的HTML5动画
说起HTML5,可能让你印象更深的是其基于Canvas的动画特效,虽然Canvas在HTML5中的应用并不全都是动画制作,但其动画效果确实让人震惊.本文收集了7个最让人难忘的HTML5 Canvas动 ...
最新文章
- 使用coreData
- php页面调用时间戳,php--------获取当前时间、时间戳
- PTAV:实时高精度目标追踪框架 | ICCV 2017论文解读
- linux下生成key
- Redis 的 4 大法宝,2018 必学中间件
- 基于webpack的react脚手架
- [2013.8.29]对于多线程编程的几点个人见解
- 【手势识别】基于matlab k-means聚类手势识别【含Matlab源码 386期】
- 执行引擎(Execution Engine)总结
- 华为rh5885服务器oid_高性能全冗余 华为RH5885 V3服务器解析
- 一篇想要获取积分的博
- 人工智能——国家人工智能战略行动抓手
- 艾司博讯:拼多多一件代发操作步骤
- 用python让excel飞起来 pdf_讯飞会议宝S8体验:以后开会请速记的钱,可以省了
- JupyterLab教程:程序员的笔记本神器v2.0
- 【Unity】雷达 + 照片墙效果
- 【代码质量】-阿里巴巴java开发手册(代码质量提升神器)学习笔记
- 在Docker安装Calibre-web搭建网上书城
- 【AI应用】理解GPU的浮点计算能力
- 全球与中国汽车点火线圈市场深度研究分析报告
热门文章
- [PAT乙级]1025 反转链表 (思路+精简代码)
- mysql联合索引排序_对mysql联合索引中的字段进行合理排序
- 【日常】如何处理“火星文”乱码
- SpringBoot定时任务说明
- 【实用代码】选项卡切换——带标题底纹样式
- Happens-Before原则
- 拯救中国传统文化教育
- 【C语言】算法学习·种类并查集
- Java毕业设计、课程设计、实战项目之[含源码等]基于SSM+Vue的SSM学业预警平台信息管理系统[包运行成功]
- python文件输出exe文件反汇编_python 反编译exe文件为py文件的实例代码