pagecrypt icon indicating copy to clipboard operation
pagecrypt copied to clipboard

Add support for custom decryption HTML templates

Open Greenheart opened this issue 2 years ago • 3 comments

Add option to use a custom HTML template, and use the JS decryption code together with any html template that provides the right elements like a password form.

Or export the decryption helpers and let users create custom templates with more control.

If anyone wants this feature, feel free to submit a PR implementing this! 😊


Notes from initial research:

  • To allow custom HTML templates to be provided, they need to contain a few key elements used by pagecrypt (like the <pre> element for writing/reading the encrypted data), and a script tag to handle the decryption logic.
  • The core decrypt library need to be updated to support custom HTML templates, as well as adding test coverage.
  • Ideally, this should be possible to accomplish without breaking changes to other use cases, but we'll see.
  • An interesting approach might be to move decrypt functionality to the core pagecrypt library. This could then be reusable utility functions that could be imported into custom templates as well as the official HTML template. This would need to be documented in the README to be easy to use.
  • By moving the core encryption and decryption logic into the same library, we would be able to reuse the critical config and make it easier to keep them in sync.
  • The core decryption functionality is really just decryptFile({ salt, iv, ciphertext }, password) which would expose a simple API. Or perhaps even better decryptFile(encryptedBase64Data, password), and letting the core decrypt function take care of base64 conversion, parsing the raw bytes, and then decrypting. This would be a nice separation between presentation and decryption logic.
  • A question is what to do with magic link support (a core feature) and sessionStorage support for caching keys during the same session. Perhaps there is a way to allow users to implement these features for their custom templates in some way.
  • Based on https://github.com/frehner/modern-guide-to-packaging-js-library, maybe we don't have to ship custom HTML but only custom CSS could be enough. Though it might be nice with full control of the HTML and CSS

Greenheart avatar Jun 01 '22 21:06 Greenheart

I currently have a website that i want the pagecrypt on but i would like it to look more like my site, this is how my website looks: https://prnt.sc/AChehinQfhXX so i would like it to look more like that. Is that possible? And how can i do that. I have forked the project.

quintenbuijs2006 avatar Jun 05 '22 13:06 quintenbuijs2006

I used the command npx pagecrypt index.html encrypted-index.html mypassword

quintenbuijs2006 avatar Jun 09 '22 20:06 quintenbuijs2006

?

quintenbuijs2006 avatar Jun 23 '22 21:06 quintenbuijs2006