Decryption Loader
Decrypt assets with webpack
Why?
If your public repository includes files you can't share with the world, one solution is to encrypt them. Decryption-loader allows you to encrypt assets via CLI and decrypt them at build-time right in webpack.
Install
npm install decryption-loader
Encryption
npx decryption-loader example.txt
You will be prompted for a password and an encrypted file example.txt.enc
is created.
Decryption
webpack.config.js
moduleexports = // ... module: rules: test: /\.enc$/ loader: "decryption-loader" options: password: "password" // ...;
Be careful: Your webpack configuration file is probably not a safe place to keep passwords.
Options
password
(string) required: The password used to derive the encryption key
An Example
1: Encrypt
Say you have font.woff
, a commercial font that you want to include in your public repository, but can't because of licensing issues. Let's encrypt it to solve this problem:
npx decryption-loader font.woff
2: Store password
We need a save place to store the password. We'll put it in the environment variable PASSWORD
. We can use dotenv to set the variable in the context of our local repo:
npm install dotenv
.env
PASSWORD=password
Be sure to add the unencrypted font file and .env
to your .gitignore
to keep them out of the public repo:
.gitignore
font.woff.env
3: Decrypt
Now we have to decrypt the font at build time using webpack:
webpack.config.js
/* Read variables from .env If actual environment variables are set the values in .env are ignored */; moduleexports = // ... module: rules: test: /\.$/ use: loader: "file-loader" // Not including [ext] strips the .cast5 extension from the filename options: name: "[name]" loader: "decryption-loader" options: password: processenvPASSWORD // ...;
And we're done. The encrypted file is now decrypted and then processed by file-loader as font.woff
. You can reference the encrypted file font.woff.enc
in your CSS like a normal font file.