robinmoisson / staticrypt Goto Github PK

Very nice project!

Wanting to use in classroom but users will be 10-12 years old and need to use editor for instructions area.

I have successfully added but submit button is not saving the content from CKEditor. Have failed in many attempts to get working and in hopes you could provide some insight?

This is added in head tags:
<script src="https://cdn.ckeditor.com/4.7.0/standard/ckeditor.js"></script>

The textarea looks like this:
<textarea name="editor1" class="form-control" id="instructions" placeholder="Default: nothing."></textarea>

With this in footer:

<script>
CKEDITOR.replace( 'editor1' );
</script>

Any input greatly appreciated.

Susan

Hi,

I use https://robinmoisson.github.io/staticrypt/ to crypt some links for my one-page html app.

I'm changing these links every year.

The problem is that I can decrypt the links created last year, but when creating a new link with the same password the decrypt function doesn't decrypt it.

	encryptedHMAC = encryptedMsg.substring(0, 64);
	encryptedHTML = encryptedMsg.substring(64);
	decryptedHMAC = CryptoJS.HmacSHA256(encryptedHTML, CryptoJS.SHA256(passphrase).toString()).toString();

For old links encryptedHMAC/decryptedHMAC are equal, but for the newly created links they differ.

function decrypt (encryptedMsg, pass) {
		var keySize = 256;
		var iterations = 1000;
		var salt = CryptoJS.enc.Hex.parse(encryptedMsg.substr(0, 32));
		var iv = CryptoJS.enc.Hex.parse(encryptedMsg.substr(32, 32))
		var encrypted = encryptedMsg.substring(64);
		var key = CryptoJS.PBKDF2(pass, salt, {
				keySize: keySize/32,
				iterations: iterations
		});
		var decrypted = CryptoJS.AES.decrypt(encrypted, key, {
				iv: iv,
				padding: CryptoJS.pad.Pkcs7,
				mode: CryptoJS.mode.CBC
		}).toString(CryptoJS.enc.Utf8);
		return decrypted;
}

Are there any recent changes on staticrypt resulting in this issue? Please contact me at [email protected] if you need a detailed example and old and new encrypted strings for a test.

Happy New Year!
Sergey

It will be useful to add a visual representation of the mysite.com?staticrypt_logout option when Default: "0", no expiration was selected (the default case).

When checked, the clearLocalStorage() function will be executed on form submission.

Please, ignore this, my custom template always shows logon part, even when there is remembered password.

I'm using this to encrypt a Hugo made static site.

I get a consistent FOUC when navigating through the site pages.

Are there any proposed solutions to this?

When I click the download button in MSIE 11, I get a new tab with a bunch of content in the address bar. But, no file download happens.

This is the content that lands in the address bar (sic)

data:attachment/text,%3C!doctype%20html%3E%0A%3Chtml%20class%3D%22staticrypt-html%22%3E%0A%3Chead%3E%0A%20%20%20%20%3Cmeta%20charset%3D%22utf-8%22%3E%0A%20%20%20%20%3Ctitle%3EProtected%20Page%3C%2Ftitle%3E%0A%20%20%20%20%3Cmeta%20name%3D%22viewport%22%20content%3D%22width%3Ddevice-width%2C%20initial-scale%3D1%22%3E%0A%0A%20%20%20%20%3C!--%20do%20not%20cache%20this%20page%20--%3E%0A%20%20%20%20%3Cmeta%20http-equiv%3D%22cache-control%22%20content%3D%22max-age%3D0%22%2F%3E%0A%20%20%20%20%3Cmeta%20http-equiv%3D%22cache-control%22%20content%3D%22no-cache%22%2F%3E%0A%20%20%20%20%3Cmeta%20http-equiv%3D%22expires%22%20content%3D%220%22%2F%3E%0A%20%20%20%20%3Cmeta%20http-equiv%3D%22expires%22%20content%3D%22Tue%2C%2001%20Jan%201980%201%3A00%3A00%20GMT%22%2F%3E%0A%20%20%20%20%3Cmeta%20http-equiv%3D%22pragma%22%20content%3D%22no-cache%22%2F%3E%0A%0A%20%20%20%20%3Cstyle%3E%0A%20%20%20%20%20%20%20%20.staticrypt-hr%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20margin-top%3A%2020px%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20margin-bottom%3A%2020px%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20border%3A%200%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20border-top%3A%201px%20solid%20%23eee%3B%0A%20%20%20%20%20%20%20%20%7D%0A%0A%20%20%20%20%20%20%20%20.staticrypt-page%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20width%3A%20360px%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20padding%3A%208%25%200%200%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20margin%3A%20auto%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20box-sizing%3A%20border-box%3B%0A%20%20%20%20%20%20%20%20%7D%0A%0A%20%20%20%20%20%20%20%20.staticrypt-form%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20position%3A%20relative%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20z-index%3A%201%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20background%3A%20%23FFFFFF%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20max-width%3A%20360px%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20margin%3A%200%20auto%20100px%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20padding%3A%2045px%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20text-align%3A%20center%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20box-sha

If I may be of assistance by testing something and reporting the results, please let me know.

The Download html file with password prompt button works even when disabled.

Chrome Version 59.0.3071.86 (Official Build) (64-bit)

This would be useful for sending out a private link to friends that could automatically log them in because the password is a url parameter! Is this possible?

Can this feature be implemented?
Adding multiple passphrases to decrypt successfully.
I'm still wondering if I can open a unique link instead of html when page is successfully decrypted?
If yes, how?

Pro/Cons that I see:

Pros

• no dependencies at all
• smaller output (not a big issue I think, minified crypto-js is quite lean already)
• no need to update the lib, always as up to date as the browser

Cons

• at encryption time: I see it as going from using the crypto implementation of a single library that can be audited to leaving it to each user's browser, so the responsability of checking that their browser is up to date/bugfree on that point falls on each user.

  Makes sense ? Is there any data on the crypto implementation of that API in browsers ?

• it might be nice to have a cli tool that can be inserted into one's workflow to update the encrypted files automatically. We can't use the browser API for that, crypto-js as a node library could also be used. Though the website and cli could use different tools.

• probably wider support (for now) for crypto-js but that'd need to be checked and by how much :)

Keeping in mind that it would be possible to use different solutions for encrypting/decrypting: encrypting needs to be the safest option, decrypting the most convenient one.

Hi,

I tried to use the "Remember me" checkbox in order to decrypt pages with the same password, without needing to retype it several times.

But it doesn't seem to work as expected:

• When entering the password on the first page, this page is decrypted. All good.
• When I try to access a second page, I get a password prompt again instead of the decrypted page.

From what I experienced, the password seems to be remembered only for the single page on which I click the checkbox.

For testing and trying to set up the feature on my site, I tried first with 2 very basic html files, encrypted with the classic command:
staticrypt a.html test
staticrypt b.html test
Then I tried to access a_encrypted.html and b_encrypted.html by typing the password "test" only once.
My website is made with Hugo, I tried both on my localhost server and deployed on my github pages hosting without success.

Am I doing something wrong?

Thanks,
Sébastien.

I would like to have some pages in my website made with hugo.

how can i?

Best regards
ArchGalileu

Hi,
Not sure if staticrypt works in Github Actions.
I like to use staticrypt to encrypt my Jekyll _site dir (or html files)

by default it does not create the .staticrypt.json file (pushed a blank one)
but when running the below command it shares an error

sudo npx staticrypt /home/runner/work/example.github.io/example.github.io/_site/index.html password123

Idea is to let github actions build the Jekyll _site first, then install the npm module and run the encryption, but no luck.
and tips on how to run this in Github Pages?

Run sudo npx staticrypt /home/runner/work/example.github.io/example.github.io/_site/index.html password123
sudo npx staticrypt /home/runner/work/example.github.io/example.github.io/_site/index.html password123

shell: /usr/bin/bash -e {0}
undefined:2
SyntaxError: Unexpected end of JSON input
at JSON.parse ()
at Object. (/usr/local/lib/node_modules/staticrypt/index.js:177:19)
at Module._compile (node:internal/modules/cjs/loader:1105:14)
at Object.Module._extensions..js (node:internal/modules/cjs/loader:1159:10)
at Module.load (node:internal/modules/cjs/loader:981:32)
at Function.Module._load (node:internal/modules/cjs/loader:822:12)
at Function.executeUserEntryPoint [as runMain] (node:internal/modules/run_main:[7]
at node:internal/main/run_main_module:17:47
Error: Process completed with exit code 1.

I don't get any messages in the javascript console when I click 'generate' nor 'download'. But, the downloaded document is truncated, less than 700 bytes.

If you give me instructions, I'll perform them to test this issue.

If I am right, you are not setting any specific encryption mode thanks to that is used default CBC mode which can escalate into output vulnerabilities and certain attacks ... did you consider to use some more proper modes? For example Galois-Counter Mode???

My Yarn project encrypts an HTML after building with Eleventy and SASS with this command:

"build:encrypt": "find ./_site/wip -type f -name '*.html' -exec staticrypt {} morpho -o {} -f ./password.html \\;"

Though, it mysteriously started printing this message when I moved from npm to Yarn:

Syntax Error: Expected "$", "$'", "$(", "$((", "${", "&", "&&", "'", ";", "<", "<&", "<<<", ">", ">&", ">>", "\"", "\"\"", "\\", "|", "|&", "||", [ \t], [0-9], or end of input but "{" found (line 1, column 58).

Column 58 in this command corresponds to the first opening curly brace {.

It used to work fine a couple months prior and I can’t find much info on this error.

When I click the Download button in Edge, I get a new blank tab with no content in the address bar. That's it.

Let me know if I can help by following troubleshooting instructions you provide!

Demo Not working on Mozzila firefox 54.0 (32-bit)

the web version can't generate the file now

Is there a way to decrypt (in the opposite way)?

After get my web page with passphrase, I cant see my local files by links. This was posible with the extension "Enable local file links" for Chrome, but now I cant.

Thanks for help!

Found a nice edge case for ya 🗡

Opening:

<link href="https://fonts.googleapis.com/css?family=Lilita+One" rel="stylesheet">

<style>
  html {
    background-color: #f1f1f1;
    font-family: 'Lilita One', cursive;
    animation-duration: 5000ms;
    animation-fill-mode: both;
    animation-iteration-count: infinite;
    backface-visibility: visible;
    animation-name: colors;
    animation-timing-function: linear;
  }

  @keyframes colors {
    0% {
      transform: rotate3d(0deg);
      background-color: #f10a75;
      color: #fed024;
    }
    50% {
      background-color: #fed024;
      color: #f10a75;
    }
    100% {
      transform: rotateY(360deg);
      background-color: #f10a75;
      color: #fed024;
    }
  }

  body {
    margin: 0;
    text-align: center;
    line-height: 100vh;
  }

  body:after {
    content: "Coming Soon";
    font-size: 5vh;
  }
</style>

will display a spinning loading message, while after it has been ran through staticrypt it will not due to no default body tag being generated.

When I open the URL file:///path/to/repo/index.html in my Chrome or Firefox browser, and fill out the form, the Download-HTML-File button does not get enabled, even after adding a config to disable-cross-domain-policy.

How to work with this from a file URL?

npx staticrypt index.html test -o index.html throws the following error:

Native crypto module could not be used to get secure random number.

A quick fix could be to use a previous version of crypto-js:

• brix/crypto-js#256 (comment)

So I am trying to create this content that can be accessed after entering the password. Currently whatever I place shows up with the passport prompt screen.

Building on #135, automating the example_encrypted.html flow would help me contribute faster.

Starting with an issue rather than I PR 'cause I noticed and appreciate that this package currently has very few dependencies. We'd need to add a dev dependency on something like puppeteer to set this up.

Concerns? Safe to assume we'd prefer Node's baked-in test harness vs something like Jest?

I was trying to make a CLI shell script that does the generation side of staticrypt, and I can't seem to manage to reproduce the same HMAC with openssl dgst.

It seems that this line:
https://github.com/robinmoisson/staticrypt/blob/gh-pages/index.html#L200

var hmac = CryptoJS.HmacSHA256(encrypted.toString(), CryptoJS.SHA256(passphrase)).toString();

is doing something maybe weird, or that I don't understand (?)

These two calls are doing something different:

var hmac1 = CryptoJS.HmacSHA256("hello", CryptoJS.SHA256("key")).toString();
var hmac2 = CryptoJS.HmacSHA256("hello", CryptoJS.SHA256("key").toString()).toString();

gives:

hmac1: f1083d8619b5a4067c55eb2b718eca4a5340d7b297be894063893e596285d74e
hmac2: 613a0711a03eabab03c7a66d6e3d4debeef0926fcdab7666e1611a894ef40ed9

Would it be possible to make a CLI version of staticrypt that could be scripted into for automatic deployment?

I have several scripts that pull data and build html report pages. I'm imagining generating those pages as I do now, then running them through the staticrypt CLI to generate encrypted html pages I can then upload to my hosting service.

Really enjoying Staticrypt!

I have experienced an issue when styles like this in page:

a:link {color: #339999; text-decoration: none}

The "{color: #339999; text-decoration: none}" is totally stripped from page which results in layout issues.

When possible, we call the css file from server but in our case final page used on school network and need all css in the final page.

Have looked at:

var renderTemplate = function (tpl, data) {
        return tpl.replace(/{(.*?)}/g, function (_, key) {
            return data && data[key] || '';
        });

Is it possible to use double {{}} brackets? attempted to change like this but no work:

var renderTemplate = function (tpl, data) {
        return tpl.replace(/{{(.*?)}}/g, function (_, key) {
            return data && data[key] || '';
        });

Any input greatly appreciated.

Website encryption (https://robinmoisson.github.io/staticrypt) will work for all characters, CLI won't.
Result from CLI encryption (which worked with website):

¿Cómo está usted? --> �C�mo est� usted?

My standard build script:

bundle exec jekyll build && npx staticrypt _site/thisfile.html myuniquepassword --salt 9872346ef723ab374 -o _site/thisfile.html -f "_includes/extensions/password_template.html"

fails with error message

fs.readFileSync(...).replaceAll is not a function

This is the first time it has failed after the best part of a year of regular use. Has something changed?

I've got this running on a Gatsby site hosted on Netlify as well as Vercel to rule out anything weird on the Netlify end. The problem I have is that I can inconsistently access protected pages without a password. Sometimes it asks me for a password, other times it does not. A hard refresh almost always triggers the password prompt on the URL.

• Site:
  (Netlify): https://631a21da30bc1d007183e00d--transcendent-bonbon-26c472.netlify.app/
  (Vercel): https://my-gatsby-site-eight.vercel.app/

• Protected page:
  (Netlify): https://631a21da30bc1d007183e00d--transcendent-bonbon-26c472.netlify.app/protected/secret
  (Vercel): https://my-gatsby-site-eight.vercel.app/protected/secret

Everything is configured in my package.json file located at https://github.com/waylonrobert/my-gatsby-site/blob/main/package.json.

Essentially Netlify and Vercel runs these two commands at deploy, in order:

npm run build, which is an alias for the gatsby build command that generates the static pages (in this case the secret page located in public/protected).

npm run _encrypt, which runs this command
"find ./public/protected -type f -name '*.html' -exec staticrypt {} password -o {} \\;" (and yes I know storing this in a public repo is bad practice, as is using password as the password, but this is just for troubleshooting right now)

Any thoughts on why this is inconsistency is happening? @robinmoisson

Hello! I’m loving this package and I’m using it in several private repos; though, it would be great if I could implement it in public projects without giving away the security through package.json.

Would it be possible to encrypt using passphrases stored in the .env file or Netlify’s environment variables?

In one of my site I need to hide the real code from visitors, I think this can be done with this script. But I dont need passphrase for this. I need to hide the links of my videos. How to achieve this? In this script the real source code is hiding, right?

Staticrypt is great! I extended it a bit so that it could be used to encrypt an entire website. Here are my steps:

1. Change the template so that it stores the password in localStorage once entered.
2. Run staticrypt on all html files.
3. Now we have a website where the user can log in once and then navigate to other pages without entering in their password for each page. (demo at https://epicfaace.github.io/ghpages-private-test/, password is "password")

@robinmoisson would you be willing to accept PRs to modify staticrypt so that it can work with these kinds of workflows more easily? Essentially, staticrypt could then work out-of-the-box to let people easily deploy a password-protected github pages website (or, really, any static website).

I'm thinking of updating the staticrypt CLI options with the following parameters:

Usage: staticrypt <filename or directory> <passphrase> [options]

Options:
  --help               Show help                                       [boolean]
  --version            Show version number                             [boolean]
  -e, --embed          Whether or not to embed crypto-js in the page (or use an
                       external CDN)                   [boolean] [default: true]
  -o, --output         File name / path for generated encrypted file
                                                        [string] [default: null]
  -t, --title          Title for output HTML page
                                            [string] [default: "Protected Page"]
  -i, --instructions   Special instructions to display to the user.
                                                        [string] [default: null]
  -f, --file-template  Path to custom HTML template with password prompt.
                          [string] [default: "[...]/cli/password_template.html"]
  -i, --in-place   Whether to modify input file(s) in place.
  -p, --persist-type   Whether to persist the password in the user's browser.
                            Can be set to "localStorage", "sessionStorage", or "cookie".
                            [string] [default: null]

Then, generating a static site and deploying it to GitHub Pages might be as easy as doing the following:

npm run build # generates files in `dist`
staticrypt dist -i -p localStorage
gh-pages -d dist

Some potential improvements:

1. It would be good to have an option such as --logout-url that allows a logout page to be generated; the user can then link to this logout page on the static site which should clear the password from the user's localStorage / cookies.
2. It seems okay, but not ideal, to store the plain password in the user's localStorage / cookies. Could we make the stored password automatically expire (if there's some cryptographic way to make a token valid only for a particular amount of time, that would be great -- otherwise, we could just maybe delete a cookie after a certain period of time)?
3. Allowing provisioning of multiple users and passwords.

Related to #110, #114.

I'm using Firefox 56.0a1.

After I decrypt a page (short text string, not HTML), the spinner on the tab keeps going until I hit the escape key.

The error is:

/home/adminy/project_test/node_modules/crypto-js/hmac.js:58
                    key.clamp();
                        ^

TypeError: key.clamp is not a function
    at Object.init (/home/adminy/project_test/node_modules/crypto-js/hmac.js:58:18)
    at subtype.init (/home/adminy/project_test/node_modules/crypto-js/core.js:86:46)
    at Object.create (/home/adminy/project_test/node_modules/crypto-js/core.js:113:32)
    at Object.compute (/home/adminy/project_test/node_modules/crypto-js/pbkdf2.js:75:30)
    at C.PBKDF2 (/home/adminy/project_test/node_modules/crypto-js/pbkdf2.js:138:36)
    at Object.hashPassphrase (/home/adminy/project_test/node_modules/staticrypt/lib/cryptoEngine/cryptojsEngine.js:50:35)
    at encode (/home/adminy/project_test/node_modules/staticrypt/lib/codec.js:19:43)
    at Object.<anonymous> (/home/adminy/project_test/node_modules/staticrypt/cli/index.js:170:26)
    at Module._compile (node:internal/modules/cjs/loader:1119:14)
    at Module._extensions..js (node:internal/modules/cjs/loader:1173:10)

I literally just installed the library and then tried to run it on a blank compiled solidjs project:

npx degit solidjs/templates/js project_test
cd project_test
npm i https://github.com/robinmoisson/staticrypt
npm run build
npx staticrypt dist/index.html

Running this on node version v18.9.0 and on a macos Ventura 13.0.1.

decryptAndReplaceHtml() working ->
it decrypts HTML. but not showing HTML javascript body
its just a blank page.

Plain text rocks.

Hi,

I tried cryptojs with a bit larger files (~140 Meg) and it results in uncaught exception: out of memory. I even modified the code to open the file, read the content and pass it to the encryptor.

Any chance on fixing this?

Thanks.
Behdad.

I have to turn off VS code formatting to edit the template file.
You can take a look a the file by VS code default formatter.
pwd_template_after_formatted_by_VSCode.zip

How does one encrypt multiple pages in a website?

I mean, entering the password on one page decrypts all other pages at once.

And all routes are protected as well.

This is a neat project, but it would be nice to be able to not depend on external sources; maybe add a checkbox that says "embed external sources"?

When using the embed option (-e flag) the cli outputs Failure: embed file does not exist! because crypto-js file is looked for inside working directory instead of __dirname.

I have a Hugo website, using Netlify, and would like to know how to not require all pages on the site to ask for the password if it has already been entered on another page. Any help would be greatly appreciated. The following is my Netlify build command
hugo && npm install && find public -type f -name '*.html' -exec staticrypt {} ****** \\;
Thanks,
Eli

It would be neat if you pass a custom error message right from the CLI arguments.

Something like --error-message 'Try again!' that could be referenced in the HTML template as {error_message}.

Hi! I am the writer of a very similar project:

https://github.com/MaxLaumeister/clientside-html-password

I just wanted to drop by to say: please consider using key derivation and salting in your crypto, so that users are less exposed to brute-force and rainbow table attacks.

You can read more here about why it's a good idea:

https://en.wikipedia.org/wiki/Key_(cryptography)#Key_vs_password

Per English convention, there shouldn't be a space before an exclamation point

Great tool! Suggestion: can the CLI allow the user to pass a custom template HTML file with --template-file / -f argument?

I recently checked that staticrypt is using cryptojs whcih in not being maintained since 2016 when it was last updated

• so please can you replace cryptojs with some other javascript module which is using latest techniques for protection
  Thnks