用webpack打包加密静态配置文件
webpack处理静态文件,如json、xml等配置文件,可以采用 copy-webpack-plugin 插件直接复制到打包后的文件夹下,但如果想采用一些手段隐藏一下这些配置文件的内容怎么办呢?
虽然对于前端来说,你的代码没有什么隐蔽性可言,但加密处理一下还是可以防止简单盗用的。
我采用的方法是利用 copy-webpack-plugin 中的 transform方法,以及CryptpJS加密库。
参考文档:
https://blog.zhengxianjun.com/2015/05/javascript-crypto-js/
https://github.com/webpack-contrib/copy-webpack-plugin
1、copy-webpack-plugin插件
查看copy-webpack-plugin的使用文档可以发现,参数中除了to和from参数外,还有一个transform参数,可以传入一个Function,第一个参数是文件内容,第二个参数文件路径
2、transform方法中加密
直接贴在webpack中的代码:
var CopyWebpackPlugin = require('copy-webpack-plugin');
var CryptoJS = require("crypto-js"); /**
* 对数据进行加密
* @param {String} content 加密
*/
function encrypt(content, path) {
var str = content.toString();
// 密钥 16 位
var key = '0123456789abcdef';
// 初始向量 initial vector 16 位
var iv = '0123456789abcdef';
// key 和 iv 可以一致 key = CryptoJS.enc.Utf8.parse(key);
iv = CryptoJS.enc.Utf8.parse(iv); var encrypted = CryptoJS.AES.encrypt(str, key, {
iv: iv,
mode: CryptoJS.mode.CBC,
padding: CryptoJS.pad.Pkcs7
}); // 转换为字符串
encrypted = encrypted.toString(); // mode 支持 CBC、CFB、CTR、ECB、OFB, 默认 CBC
// padding 支持 Pkcs7、AnsiX923、Iso10126
// 、NoPadding、ZeroPadding, 默认 Pkcs7, 即 Pkcs5 return encrypted;
} module.exports = { plugins: [
new CopyWebpackPlugin([
{
from: './jsons',
to: 'jsons',
transform (content, path) {
return encrypt(content, path)
}
}
])
]
}
这样就把json文件中的配置加密了,
{
"id": 1,
"layer_name": "水利"
}
// 加密后成这样了
3、解析
加密了之后,在浏览器运行时,还是得把从服务器down下来的加密文件解密,才能使用,可以根据自己的情况截获加密文件的请求,然后对其进行解密操作
function decrypt(content) {
var key = '0123456789abcdef';
var iv = '0123456789abcdef'; key = Crypto.enc.Utf8.parse(key);
iv = Crypto.enc.Utf8.parse(iv); // DES 解密
var decrypted = Crypto.AES.decrypt(content, key, {
iv: iv,
mode: Crypto.mode.CBC,
padding: Crypto.pad.Pkcs7
}); // 转换为 utf8 字符串
decrypted = Crypto.enc.Utf8.stringify(decrypted);
return decrypted;
}
至此,配置文件打包加密就操作完毕了!
用webpack打包加密静态配置文件的更多相关文章
- vue项目webpack打包后修改配置文件
从webpack打包结构中我们知道,vue中有一个存放外部资源的文件夹static,它里面的文件是不会被打包编译的,所以我们就可以利用外部引入js的方式将我们的想要的数据在index.html中以js ...
- Less与TypeScript的简单理解与应用,并使用WebPack打包静态页面
既然选择了远方,便只顾风雨兼程 __ HANS许 系列:零基础搭建前后端分离项目 系列:零基础搭建前后端分离项目 创建空项目 使用Less 使用TypeScript 使用WebPack 开始写项目 总 ...
- 16.如何做到webpack打包vue项目后,可以修改配置文件
问题描述: 前端需要修改restful API的url,但是打包之后,配置文件找不到了,如果在npm run build 生成dist后,这个配置也被写死了,传到运行的前端服务器上后,假设某次,api ...
- WebStorm 使用webpack打包(build) Vue 静态资源无法访问(路径不对)问题
在WebStorm中使用webpack打包 (命令npm run build) 后生成在项目的dist目录下,在浏览器打开,静态资源js.css等无法加载.因为打包时,资源使用了绝对路径. 解决: 打 ...
- vue项目之webpack打包静态资源路径不准确
摘自:https://blog.csdn.net/viewyu12345/article/details/83187815 问题 将打包好的项目部署到服务器,发现报错说图片找不到. 静态资源如js访问 ...
- webpack中打包拷贝静态文件CopyWebpackPlugin插件
copyWebpackPlugin: 作用:用于webpack打包时拷贝文件的插件包 安装:npm install copyWebpackPlugin@版本号 使用:// copy custom st ...
- Webpack打包进阶
说在前面 由于使用了React直出,页面各项性能指标使人悦目.本篇将深入探讨目前PC部落所采用webpack打包优化策略,以及探讨PC部落并未使用的 webpack Code Splitting 代码 ...
- vue-cli+webpack打包配置
vue-cli+webpack打包配置 一: 目录结构: ├── README.md ├── build │ ├── build.js │ ├── check-versions.js │ ├── ut ...
- vue webpack打包
webpack构建流程 从启动webpack构建到输出结果经历了一系列过程,它们是: 解析webpack配置参数,合并从shell传入和webpack.config.js文件里配置的参数,生产最后的配 ...
随机推荐
- zepto与jquery冲突的解决
一般是不会把zepto和jquery一起来用的.但有时候要引入一些插件,可能就会遇到这样的问题. jquery noConflict() jquery有一个方法叫noConflict() ,可以把jq ...
- 关于scrollTop获取卷曲距离的三种方式- --兼容代码如下
对于不同浏览器而言--获取卷曲距离方式可能有所不一样---下面提供三种方式--- scrollTop1 = window.pageYoffset || document.documentElement ...
- Git漏洞允许任意代码执行(CVE-2018-17456)复现
Git漏洞允许任意代码执行(CVE-2018-17456) 国外安全研究员 joernchen 在 9 月 23 日向 git 官方报告了漏洞的相关细节.10月5日,Git项目披露了一个漏洞,编号为C ...
- Redis面试题
1.谈谈Redis的主从复制流程 有几个重点:主节点负责写,从节点负责读,slave node 主要用来进行横向扩容,做读写分离,扩容的 slave node 可以提高读的吞吐量.必须开启 maste ...
- Linux篇---Vi的使用
一.前述 Vi类似记事本,所以用好记事本对编程效率有很大得影响,有着事半功倍的效率. 二.具体操作 1.打开文件vim /path/to/somefilevim +# :打开文件,并定位于第#行 v ...
- 「造个轮子」——cicada(轻量级 WEB 框架)
前言 俗话说 「不要重复造轮子」,关于是否有必要不再本次讨论范围. 创建这个项目的主要目的还是提升自己,看看和知名类开源项目的差距以及学习优秀的开源方式. 好了,现在着重来谈谈 cicada 这个项目 ...
- mockjs,json-server一起搭建前端通用的数据模拟框架
无论是在工作,还是在业余时间做前端开发的时候,难免出现后端团队还没完成接口的开发,而前端团队却需要实现对应的功能,不要问为什么,这是肯定存在的.本篇文章就是基于此原因而产出的.希望对有这方面的需求的同 ...
- oracle常用命令收集
1.查看监听状态 lsnrctl status 2.启动监听 lsnrctl start 3.关闭监听 lsnrctl stop 4.以数据库管理员登录 sqlplus / as sysdba 5.手 ...
- 说一说MVC的过滤器(一)
在MVC项目中过滤器,最好把这些过滤器类放到一个文件夹中(Filters),然后过滤器文件的名称也是有规定的,格式应该为xxxAttribute,否则在控制器或控制器的方法中是无法进行调用过滤器的, ...
- 仓储模式Repository的选择与设计
首次接触仓储的概念来自Eric Evans 的经典著作<领域驱动设计-软件核心复杂性应对之道>,但书中没有具体实现.如何实现仓储模式,在我这几年的使用过程中也积累了一些具体的实施经验.根据 ...