How to add RSA encryption to my ReactJS application?

Question

We're trying to encrypt some details on the client side ReactJS app using the RSA public key (to send it to the backend securely). However, We're just not able to find a suitable library that directly encrypts the message with the key using RSA.

We have been referring this article, But we're just not able to follow this.

Questions:

1. Are there any simplified libraries to use RSA in reactJS?
2. As per the article, we're trying to use EncryptJS. so, it says add the jsencrypt.min.js (minified) file in the static folder. (I hope this is the static folder after creating the build). How will we be able to use this ?
3. The post says, "Add it as a script using script tag in your react component". What does this mean? Do I have to add it in the index.html as a script? or somewhere in the component?

Answer 1

Probably I am replying late but it may help others regarding encryption in React.

Just follow the steps:

1. create a JS file(jsencrypt.min.js) in public folder

2. Copy data from "https://github.com/travist/jsencrypt/blob/master/bin/jsencrypt.min.js" to the js file (jsencrypt.min.js) created in step 1.

3. add below code in encryption component to load jsencrypt.min.js

useEffect(() => {
const script = document.createElement("script");
script.src = "/asset/js/jsencrypt.min.js";
script.async = true;
document.body.appendChild(script); }, [1]);

4. In same component add below code to encrypt data

const encrypt = (message, publicKey) => {
const jsEncrypt = new JSEncrypt();
jsEncrypt.setPublicKey(publicKey);
return jsEncrypt.encrypt(message); }

5. you are done. Just call "encrypt" method created in step 4.

PS: Public key must be a string as mentioned below.

const publicKey = "MIIBIjANBgkqhkiG9w0BAQEFAAOCAQ8AMIIBCgKCAQEAsHJ95yqz7YDX7rdfgGx+fndwisu/6SeGkO0GtgiMCVBM8vGXf4MThAB7EI0FmEcfmg+c6QHIAW1IuAZzMQZg5kDBKw65v1gCM6JzeTaHhrqbY8HrSMhB86H2bNLAjIY2aIDG/6NMJmOMN57D2Ph8GfGOp3uYNdN0kSyMCcRekT4zjB++V5TRZNb4Gjg7EiDaU/cim3Fr/uX1EwO08Hn/EL8+ItjhfOvDi94kS3NOOHkJhvolxocyqCN2JP8H71G5CAlFhgvr/Go2aONyoO9NUKvRf0RDphZG671+tOAOuPT4H0Eoz3VTSJUFZqML/VExDmS4H7Dq9EK7ObZlSiLIpwIDAQAB"

Note: If it says that 'JSEncrypt' is not defined no-undef then restart your react server.

Answer 2

I also faced the same issue. Just importing JSEncrypt from jsencrypt was throwing JSEncrypt is not a constructor error in browser. In the end I followed the same article you're referring to, and now I'm able to encrypt the data.

What we need to do here is just create a new file named jsencrypt.min.js at any location, and copy the contents from git repository.

Now all you need to do is add a script tag in your index.html file and refer to this file in the tag.

<script src="/your_file_location"></script>

Then just restart the application. And it should work.