前端Javascript/HTML实现哈希(MD5/SHA1/SHA256等)算法

2021-05-05 121点热度 0人点赞 0条评论

前面的文章介绍了Java下进行哈希算法的实现:https://blog.terrynow.com/2021/04/29/java-hash-tool-md5-sha1-sha256/

本篇介绍前端Javascript下实现包括MD5、SHA1、SHA256等算法。

用到的是github上开源的类库:crypto-js

引入JS库

Github上介绍的是使用npm方式直接引入,还有一些项目使用的单纯的Html引入JS的方式,我们先介绍这种方式:

  • 到release页面:https://github.com/brix/crypto-js/releases,下载最新的zip包,文件目录和说明如下:
    crypto-js.js    包含全部加密方式的js,可以只引入这个js,其他的都不需要引入了
    core.js    如果只需要某一种加密方式,可以先引入core.js核心包,再引入相应的加密名称的js,如下面的md5.js
    md5.js    和加密名称相同名字的js包
  • 全部加密方式script引入:
    <script src="crypto-js-4.0.0/crypto-js.js"></script>
  • 个别加密方式引入(md5为例):
    <script src="crypto-js-4.0.0/core.js"></script>
    <script src="crypto-js-4.0.0/md5.js"></script>

npm引入方式:

npm install crypto-js

然后代码中调用(md5为例):

import CryptoJS from 'crypto-js/md5'

or:

var CryptoJS = require("crypto-js");

使用举例

纯Html引入JS的方式如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <title>CryptoJS Test</title>
        <script src="crypto-js-4.0.0/crypto-js.js"></script>
        <!-- 只使用某一种算法的时候,可引入core.js外加单独的js(如md5.js) -->
        <!-- <script src="crypto-js-4.0.0/core.js"></script> -->
        <!-- <script src="crypto-js-4.0.0/md5.js"></script> -->
        <script>
        var str = '123456';
        console.log("123456哈希Hash后:")
        console.log("MD5:"+CryptoJS.MD5(str));
        console.log("SHA1:"+CryptoJS.SHA1(str));
        console.log("SHA256:"+CryptoJS.SHA256(str));
        console.log("SHA512:"+CryptoJS.SHA512(str));
        </script>
    </head>

    <body>
    </body>
</html>

如果是npm引入:

var CryptoJS = require("crypto-js");

var str = '123456';
console.log("123456哈希Hash后:")
console.log("MD5:"+CryptoJS.MD5(str));
console.log("SHA1:"+CryptoJS.SHA1(str));
console.log("SHA256:"+CryptoJS.SHA256(str));
console.log("SHA512:"+CryptoJS.SHA512(str));

其他加密算法的示例,详见:https://cryptojs.gitbook.io/docs/

admin

这个人很懒,什么都没留下

文章评论

*

code