0

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?
Improve this question
5
  • I don't know about reactJS but are you sure client-side JS encryption is the right answer to what you are trying to achieve ? When using HTTPS, TLS already protects what you're sending to the server. Could you elaborate a bit more on your goal ? Commented Feb 19, 2021 at 15:06
  • Hey @ShellCode Sure. So we have a passcode on the client side that we want to encrypt. We'll be keeping the passcode on the client side for sometime once the user logs in. so We're planing to keep it in an encrypted form as it's only going to be used by the server (where it can be decrypted). So to hold it safely as long as it's kept on the client side, we wanted to encrypt it. Commented Feb 19, 2021 at 15:26
  • You want to protect it from what exactly ? If you send this encrypted passcode to the server, an attacker who steals this encrypted passcode could do it as well, even if he has no idea what's inside. In the end, stealing the encrypted-passcode or stealing the passcode itself is identical from an attacker POV. If what matters to you is to hide the value of the passcode, then using a hash (with a salt) would be more appropriate, no need to use RSA for that ! Commented Feb 19, 2021 at 16:17
  • Thanks @ShellCode . Got it :) Commented Feb 19, 2021 at 17:37
  • You're saying the client does not need access to this passcode, only the server. In that case the client should never have the passcode in the first place. Wherever the client gets it from should already encrypt it, and the client could then pass it to the server that could decrypt as necessary. (Also consider related attacks like replay in this case.) Even better if it doesn't go through the client at all if possible, but the question is missing all the relevant details to be answered. Commented Feb 19, 2021 at 19:55

2 Answers 2

Reset to default
3

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

enter image description here

  1. 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.

  2. 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]);
  1. In same component add below code to encrypt data
const encrypt = (message, publicKey) => {
const jsEncrypt = new JSEncrypt();
jsEncrypt.setPublicKey(publicKey);
return jsEncrypt.encrypt(message); }
  1. 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.

enter image description here

enter image description here

Improve this answer
Sign up to request clarification or add additional context in comments.

5 Comments

I'm seeing you're calling jsEncrypt.encrypt without passing any configurations. Is there a way to encrypt in jsEncrypt by settings the padding as padding:crypto.constants.RSA_PKCS1_OAEP_PADDING and OAEP as oaepHash:'sha256', with a public key length of 4096?
Hi @D.Rattansingh, JsEncrypt uses "RSA/ECB/PKCS1Padding" bydefault. I am not able to find a way to pass customize padding. Please refer: aviyel.com/post/444/… And rsa-encryption-with-oaep-between-java-and-javascript
I got it working, I used crypto.constants.RSA_PKCS1_PADDING. Do you know if JSEncrypt could generate or encrypt with keys that has a passphase?
I'm sorry, haven't done any research on this. I had requirement to just encrypt and decrypt data using RSA.
Instead of adding JsEncrypt to HTML, just install it using "npm i jsencrypt"
0

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.

Improve this answer

2 Comments

I'm also referring to that article but whenever I'm trying to copy the function encryptMessage in my component it shows me that "'JSEncrypt' is not defined", can you help me?
Having the same problem, haven't found a solution yet tho...

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.