npm Actions Status

Decrypt assets with webpack

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.

npm install decryption-loader

npx decryption-loader example.txt

You will be prompted for a password and an encrypted file example.txt.enc is created.

webpack.config.js

module.exports = {
 // ...
 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.

• password (string) required: The password used to derive the encryption key

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

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

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 */
require("dotenv").config();
module.exports = {
 // ...
 module: {
 rules: [
 {
 test: /\.(enc)$/,
 use: [
 {
 loader: "file-loader",
 // Not including [ext] strips the .cast5 extension from the filename
 options: { name: "[name]" },
 },
 {
 loader: "decryption-loader",
 options: { password: process.env.PASSWORD },
 },
 ],
 },
 ],
 },
 // ...
};

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.