国产sm2，sm3，sm4加解密兼容ie问题

之前有个文章是写国产sm2，sm3，sm4加解密的，但是在IE浏览器中会出现如下报错：

找问题找了许久终于终于找到了。原因是在sm2，sm3，sm4的加密算法中用到了一个叫jsbn这个依赖。然而这个依赖并没有被webpack转化并编译称ES5的语法，大家都到IE的兼容性不怎么好，特别是对新语法的支持程度一直都不好。所有必须针对IE进行处理，借鉴这位博主文章具体处理如下：
1、看sm2，sm3，sm4文件中的源码不难发现，每个文件中都有const {BigInteger} = require('jsbn')这一段代码，那么我们需要手动安装jsbn，在命令行执行npm install --save jsbn。
2、从node_modules中找到sm-crypto包，并把src中所有内容copy到我们项目中，我这里把它放到了/src/shujudata/sm-crypto中，如下图：

3、在babel.config.js修改为：

module.exports = {presets: [['@vue/app', {useBuiltIns: 'entry'}]],
}

4、下载core-js依赖用来转意ES6npm install --save core-js
5、main.js中引入import 'core-js'
6、使用加密的地方引入

// const sm2 = require("sm-crypto").sm2;不在使用原有的sm2
import { sm2 } from '@/shujudata/sm-crypto'

至此SM2已经可以支持IE了，但是IE中还有两个属性不支持既dataset和requestAnimationFrame

现在兼容IE中的dataset和requestAnimationFrame
1、新建文件ie.js，将新建的ie.js放在/src/shujudata下，代码如下：

/* eslint-disable */
export default function compat_ie() {/**
*作用：兼容dataset
*问题：[Vue warn]: Error in directive transfer-dom inserted hook: "TypeError: 无法获取未定义或 null 引用的属性“transfer”"
*说明：ie10及以下不支持dataset，以下代码处理兼容
* */if (window.HTMLElement) {if (Object.getOwnPropertyNames(HTMLElement.prototype).indexOf('dataset') === -1) {Object.defineProperty(HTMLElement.prototype, 'dataset', {get: function () {var attributes = this.attributes; // 获取节点的所有属性var name = [];var value = []; // 定义两个数组保存属性名和属性值var obj = {}; // 定义一个空对象for (var i = 0; i < attributes.length; i++) { // 遍历节点的所有属性if (attributes[i].nodeName.slice(0, 5) === 'data-') { // 如果属性名的前面5个字符符合"data-"// 取出属性名的"data-"的后面的字符串放入name数组中name.push(attributes[i].nodeName.slice(5));// 取出对应的属性值放入value数组中value.push(attributes[i].nodeValue);}}for (var j = 0; j < name.length; j++) { // 遍历name和value数组obj[name[j]] = value[j]; // 将属性名和属性值保存到obj中}return obj; // 返回对象},});}}/***作用：兼容requestAnimationFrame（ie9）*问题：*说明：ie9是不支持requestAnimationFrame的，以下代码处理兼容* */(function () {var lastTime = 0;var vendors = ['ms', 'moz', 'webkit', 'o'];for (var x = 0; x < vendors.length && !window.requestAnimationFrame; ++x) {window.requestAnimationFrame = window[vendors[x] + 'RequestAnimationFrame'];window.cancelAnimationFrame = window[vendors[x] + 'CancelAnimationFrame'] ||window[vendors[x] + 'CancelRequestAnimationFrame'];}if (!window.requestAnimationFrame) {window.requestAnimationFrame = function (callback, element) {var currTime = new Date().getTime();var timeToCall = Math.max(0, 16 - (currTime - lastTime));var id = window.setTimeout(function () { callback(currTime + timeToCall); },timeToCall);lastTime = currTime + timeToCall;return id;};}if (!window.cancelAnimationFrame) {window.cancelAnimationFrame = function (id) {clearTimeout(id);};}}());/***作用：兼容classList（ie9）*错误信息： 无法获取未定义或 null 引用的属性“add”/  无法获取未定义或 null 引用的属性“remove”*说明：ie9以下代码处理兼容* */if (!('classList' in document.documentElement)) {Object.defineProperty(HTMLElement.prototype, 'classList', {get: function () {var self = this;function update(fn) {return function (value) {var classes = self.className.split(/s+/g);var index = classes.indexOf(value);fn(classes, index, value);self.className = classes.join(' ');};}return {add: update(function (classes, index, value) {if (!~index) classes.push(value);}),remove: update(function (classes, index) {if (~index) classes.splice(index, 1);}),toggle: update(function (classes, index, value) {if (~index) { classes.splice(index, 1); } else { classes.push(value); }}),contains: function (value) {return !!~self.className.split(/s+/g).indexOf(value);},item: function (i) {return self.className.split(/s+/g)[i] || null;},};},});}
}

2、在main.js中新增

// 这个方法里包含了一些对IE的特殊处理, 具体代码见下面
import compat_ie from 'ie.js的文件'
compat_ie()

到这里项目就可以兼容到IE9（含IE9）以上的浏览器了，在向下兼容的话那痛苦无比

国产sm2，sm3，sm4加解密兼容ie问题相关推荐

国产sm2，sm3，sm4加解密
有个为国家做的项目,其中需求是必须要用国产的加密,最后经项目组讨论后决定用国产sm2加密本人用vue开发前端所以一下实在vue中用的方法, 国密相关介绍国密算法是国家密码局制定标准的一系列算法,主 ...
iOS 使用 SM2 SM4 加解密，SM2 签名验签及 SM3 签名
前言对于开发人员,开发中加解密是经常用到的,常见的密码算法 MD5.SHA.AES.DES,RSA 等等,这些无一例外都是国外的加密算法.基于安全和宏观战略考虑,我国从 2010 年先后推出了 SM ...
国密SM2,SM3,SM4的前后台（js和java）加解密写法
目录 SM2加解密 js java SM3加密 js java sm3前后台(js/java)加密不一致原因 SM4加解密 js java 之前做一个项目的时候需要用到国密SM2,SM3,SM4的加解 ...
国密SM4加解密SM2签名验签COM组件DLL
提供给第三方软件,调用COM组件DLL方式进行实现,如delphi.PB等. 基于C#编写的COM组件DLL,可实现SM2签名验签,SM4加解密,100%适用于黑龙江省国家医保接口中进行应用. 功能包 ...
国家医保移动支付国密算法SM2签名验签、SM4加解密DLL
国家医保移动支付国密算法SM2签名验签.SM4加解密DLL 支持医保移动支付(国家统一版), 已知省份有广西.贵州.安徽.河北.黑龙江.湖南.吉林.江苏.四川.新疆等各地方. DLL,非.net开发, ...
SM? SM1? SM2? SM3? SM4?
最近看了一个项目的代码,用到了SM2,SM3,SM4,瞬间懵逼,一会用SM2,一会用SM3,一会又用SM4,SM??? 简单来说,SM2,SM3,SM4 是国家密码局认定的国产密码算法,当然除了这几个 ...
国密SM1\ SM2\ SM3\ SM4\ SSF33算法和国际RSA算法的对应关系
转载自https://blog.csdn.net/hcnetbee/article/details/53692579,部分内容和排版稍作修改. 国密算法由国家密码局发布,包含SM1\ SM2\ SM3 ...
国密 sm2,sm3,sm4 算法纯 JavaScript 实现
2014 年国务院办公厅就颁发了<国务院办公厅转发密码局等部门关于金融领域密码应用指导意见>,指出在我国涉及到金融领域信息安全的产品和系统要自主可控,在金融领域使用国产加密标准是机构走向合 ...
php gmssl,支持国密SM2/SM3/SM4/SM9/ZUC/SSL的密码工具箱GmSSL
GmSSL概述 GmSSL是一个开源的密码工具箱,支持SM2/SM3/SM4/SM9/ZUC等国密(国家商用密码)算法.SM2国密数字证书及基于SM2证书的SSL/TLS安全通信协议,支持国密硬件密码 ...

国产sm2，sm3，sm4加解密兼容ie问题

国产sm2，sm3，sm4加解密兼容ie问题相关推荐

最新文章

热门文章