资讯频道 → Web前端
阅读更多

9顶
8踩

Web前端

原创新闻 Chroma Hash：密码输入也能变的很有趣

2009-07-30 15:45 by 副主编 zly06 评论(22) 有12014人浏览
jQuery 安全

声明：ITeye资讯文章的版权属于ITeye网站所有，严禁任何网站转载本文，否则必将追究法律责任！

Matt Thompson创造了一个很有趣的jQuery插件，Chroma-Hash：“使用炫彩条，动态可视化安全文本字段的值”。

密码的输入很让人烦恼，特别是使用很长或很困难的密码，由于使用“.”来掩盖，别人无法读取到它，但是同样你也不能保证输入的正确性，只有当你点击“提交”之后才能知道密码的正确与否。但是使用Chroma-Hash，如果您的密码正确，Password和Confirm Password栏显示出的彩条颜色应该是相同的，不然你就知道自己输入错误。 

$(this).css({position:   'absolute',
                           left:       position.left + width - 2,
                           top:        position.top,
                           height:     height + "px",
                           width:      8 + "px",
                           margin:     5 + "px",
                           marginLeft: -8 * (i + 1) + "px"
                          }
                    );
              });
         
              var id     = $(this).attr('id');
              var md5    = hex_md5($(this).val());
              var colors = md5.match(/([\dABCDEF]{6})/ig);
              $(".chroma-hash").stop();
 
              chromaHashesForElement(this).each(function(i) {
                $(this).animate({backgroundColor:"#" + colors[i]});
              });


你还可以自定义彩条条数（一般为3）：
$("input:password").chromaHash({number: 3});

Github上的网页：http://github.com/mattt/Chroma-Hash/tree/master

点击查看详情：Matt Thompson]http://mattt.me/2009/07/chroma-hash-a-belated-introduction/]Matt Thompson
来自: ajaxian
9
顶
8
踩
评论 共 22 条 请登录后发表评论
2 楼 fangwei 2009-07-30 16:44
眼睛都晃花了，不知道干什么
1 楼 hetylei 2009-07-30 15:55
。。。我是色盲
。。。我X色弱
。。。我显示器不行
。。。。

发表评论

您还没有登录,请您登录后再发表评论

相关推荐

  • VC6.0编译问题 (转)

    VC6.0编译问题 (转)[@more@]VC6.0编译问题问：我用自己设计的类编了一个程序。当我在编译项中设置为debug编译时，程序运行一切正常，当为release时程序却出了问题.怎么会这样? 答:1)为什么你既建立线程...

  • VC6.0编译问题

    VC6.0编译问题问：我用自己设计的类编了一个程序。当我在编译项中设置为debug编译时，程序运行一切正常，当为release时程序却出了问题.怎么会这样?答:1)为什么你既建立线程又将一个类成员作为线程处理?这样的话谁来调用你的析构函数?你不能试图将文档视窗类中的成员作为线程,象这样: Ccapi::SomeFunction() { AfxBeginThread(static_cast&l...

  • m_hWnd 和 this指针

    m_hWnd   ① m_hWnd这个成员变量，最早是定义在类CWnd中，而且是类CWnd的第一个数据成员，   先看一下MSDN的解析：    The handle of the Windows window attached to this CWnd. The m_hWnd data member is a   public variable o

  • 高性能Linux服务器 第6章 ext3文件系统反删除利器ext3grep extundelete工具恢复rm -rf 误删除的文件...

    高性能Linux服务器 第6章 ext3文件系统反删除利器ext3grep extundelete工具恢复rm -rf 误删除的文件   只能用于ext3文件系统！！！！！！！高俊峰（高性能Linux服务器构建实战：运维监控、性能调优与集群应用...

  • 码农翻身讲操作系统3：硬盘与键盘的故事

    扯了这么多，是时候看一看全局了， 在你们程序员的眼中， 其实我是长这个样子的（拿你们崇拜的Linux ext2为例）：   （点击看大图） 我这个硬盘主要由MBR(Master Boot Record)和各个磁盘分区组成。 ...

  • SQL Server Storage

    我们是不是可以看到.mdf到底存储了什么? select name ,recovery_model_desc ,is_auto_create_stats_on ,is_auto_create_stats_incremental_on ,is_auto_update_stats_on ,is_auto_update_stats_async_on ...

  • Linux有时候执行了 rm -rf 等操作误删了文件绝对是一件可怕的事情，好在有一些解决的办法可以临时救急。这时我们就要用到一款叫做extundelete的工具了。

    Linux有时候执行了 rm -rf 等操作误删了文件绝对是一件可怕的事情，好在有一些解决的办法可以临时救急。这时我们就要用到一款叫做extundelete的工具了。 目录[-] 依赖 安装 查找要恢复的驱动器名 运行恢复 ...

  • java基础面试题

    **这个时候，I/O 多路复用模型 就上场了。 ​ I/O 多路复用模型中，线程首先发起 select 调用，询问内核数据是否准备就绪，等内核把数据准备好了，用户线程再发起 read 调用。read 调用的过程（数据从内核空间->用户...

  • PHP之 直播开发后端需要做什么——表设计及相关逻辑

    是不是也在拉流域名的详情页的“拉流配置”呢，你要这么想，就又错了。是的，没有。其实，推流的示例代码，也可以用来生成拉流地址，只不过，你要先确认拉流地址的播放格式，这个在“拉流配置”有，这里，我选择的是...

  • zimbra xxe+ssrf 导致 getshell

    前言 2019年３月13号，国外一名安全研究员在他的博客上公布了zimbra的这起漏洞，但是其中并未提到一些漏洞的... 8.7.1 攻击者可以在无需登录的情况下，实现getshell Zimbra<8.8.11 在服务端使用Memcached做缓存

  • 八个commit让你学会爬取京东商品信息

    当有了源码之后，按照前面介绍的逻辑，就是寻找对应的元素了，而这个时候就是BeautifulSoup包上场的时候了，把得到的源码字符串作为参数传给BeautifulSoup库，你就会得到一个强大的方便解析的BeautifulSoup对象。...

  • JAVA反射机制与动态代理

    Eclipse可以自动弹出对象的方法及属性，就是利用了反射的原理。 java动态代理可以在不改变被调用对象源码的前提下，在被调用方法前后增加自己的操作，极大地降低了模块之间的耦合性，Java的动态代理就是利用了反射的...

  • 洋桃电子STM32F407单片机入门教程笔记五：外部中断功能

    1.1 GPIO端口与中断通道的关系 外部电平从右下角的GPIO端口的“输入线”输入到单片机内部中断处理电路，输入电路首先通过“边沿检测电路”判断是否有上升沿和下降沿出现，具体判断是上升、下降还是高低电平触发由...

  • mysql_pconnect的水挺深,apache下的数据库长连接

    持久化连接背后的思想是客户端进程和数据库之间的连接可以通过一个客户端进程来保持重用， 而不是多次的创建和销毁。这降低了每次需要创建一个新连接的开销，未使用的连接被缓存起来并且准备随时被重用。 ...

  • 常用的python标准库_python学习笔记系列----（八）python常用的标准库

    这部分内容主要就是介绍了一些基础的常用的基础库，可以大概了解下，在以后真正使用的时候也能想起来再拿出来用。8.1 操作系统接口模块：OSOS模块提供了很多与操作系统进行交互的函数，比如常见的使用函数有获取当前...

  • 字节面试杂谈——MySQL、Redis

    此外， 还可以通过 sql_cache 和 sql_no_cache 来控制某个查询语句是否需要缓存。 四、事务及其四大特性、MySQL中事务提交的过程 事务是逻辑上的一组操作，要么都执行，要么都不执行。 事务最经典也经常被拿出来说例...

  • Linux进阶篇--文件系统

    上场了！ 1.1 文件系统的概念： 文件系统是操作系统用于明确磁盘或者分区上相关文件的方法和数据结构，就是在磁盘上组织文件的方法。 剖析：利用一定的规则把文件记录在磁盘上。 1.2 文件系统的...

  • 2023年最新前端面试题（vue相关4）

    lazyload ②导入插件 main.js 中 导入 import VueLazyload from 'vue-lazyload' ③注册插件 Vue.use(VueLazyload) ④使用插件 这样图片会在进入视口后加载图片 图片懒加载原理: img标签的src不放真正的地址(可以放...

  • Zimbra xxe+ssrf导致getshell

    还需要得到真正的admin　token,所以我们只需要利用刚刚的到的token发送一个admin soap AuthRequest,就可以在响应中得到真正的admin token了，接着再利用这个token来构造文件上传的请求，就可以得到一个webshell了。...

Global site tag (gtag.js) - Google Analytics