How to encrypt mock data in angular?

Question

Referring to angular hero tutorial (https://angular.io/tutorial), I would like to encrypt mock-hero.ts. May I know how can I encrypt this file? Purpose of this encryption is that if anyone download the project, they cant view the content in mock file.

Answer 1

If the idea is to protect project source files against theft or for protection you would need to implement a way to encrypt the files during build process. There are scramblers out there that will basically obfuscate your files to non-readable form for humans (e.g Jscrambler) but you can't really encrypt entirety of the file, that's because the frontend code will need to be executable by your browser. The JS bundles that it will consumed at the end of the day must be executable by the browser. More on this in detail: https://stackoverflow.com/a/52344195/15439733

A more common way to secure sensitive data is not to include it in the source files (for everyone to see) in the first place. Store the file on a server, or the data in database. Use actual encryption techniques using crypto-js https://stackoverflow.com/a/53478984/15439733 and secure the app using authentication (e.g JWT) https://stackoverflow.com/a/48063529/15439733

It is possible to encrypt localized portions of data using cryptoJS. You encrypt contents of a data structure before pushing to the server. Running app must then require to decrypt the data before use. After that need to figure out how you are going to pass a key/password for decryption. Input? Fetch from a server? Authentication? Sky's the limit.