2

I have a Laravel 5.7 application which encrypts an object and returns the encrypted object to my VueJS application.

PLEASE NOTE the below code is for explanation purposes and I am not using in this way, however, the concept is.

Laravel Function triggered by a route

public function license() {
  var data = [{id: 1}, {expiry_date: '2019-02-25T10:47:12+00:00'}];
  $encrypted = \Crypt::encrypt(JSON.stringify(data));
  return $encrypted;
}

Vue JS Method for Retrieving Object

checkLicense() {
      this.$http.get(LARAVEL_ROUTE).then(res => {
        var key = 'LARAVEL_APP_KEY'; // NOT REAL
        var bytes = CryptoJS.AES.decrypt(res.data, 'LARAVEL_APP_KEY');
        var plaintext = bytes.toString(CryptoJS.enc.Utf8);
      });
}

The above produces the following:

Uncaught (in promise) Error: Malformed UTF-8 data

Things I've tried:

  • I have checked the LARAVEL_APP_KEY and I can see that it is prefixed with 'base64:' so I have tried removing this from my VueJS method where I declare the key but this made no difference.

  • I have also removed the object and tried encrypting a string which produces the same result as above.

Additional question:

I'd also like to encrypt the string / object with something other than the LARAVEL_APP_KEY as I don't want to store that value in my VueJS application. The key doesn't need to be super secure however I would rather not use the LARAVEL_APP_KEY

Improve this question
4
  • 1
    Just have a look here Commented Feb 25, 2019 at 11:06
  • Thanks that worked! just need to figure out how to encrypt with a different key than the LARAVEL_APP_KEY now. - Thanks! Commented Feb 25, 2019 at 11:43
  • Be aware that the client will receive the encryption key when you do this meaning all encrypted strings with the same key will be decryptable by any user who receives that key. If you want to do this then generate a random encryption key for each user and store it in the database. Commented Feb 25, 2019 at 11:52
  • Thanks @apokryfos Commented Feb 25, 2019 at 12:01

2 Answers 2

Reset to default
4

From my experience, I would suggest the following.

Firstly, I'm not sure why you are wanting to encrypt data on the server and then decrypt on the client. The only benefit that I could see for that is to prevent MITM attacks, in which case you should be using SSL.

Secondly, I'm fairly sure that the encryption key is the base64 encoded value after the prefix base64:. So you will need to remove this and then base64 encode the remaining string in VueJS before trying to decrypt with the key.

In answer to your question about encrypting/decrypting with anything other than the APP_KEY, you can't have multiple keys that will decrypt the same value. Cryptography only works when you have the correct key.

I would really not recommend decrypting data on the client, anybody can then obtain your encryption key and if there was a vulnerability elsewhere and were able to access your database, they could decrypt any data that they like.

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

4 Comments

Thank you for your reply, to give some clarity. I have a VueJS application which is compiled to a desktop app using ElectronJS. This application is an offline application and I wanted a quick way to produce a license which expires after 12 months of use. The idea is that in the client (complied to an .exe) the license is decrypted and a check is done on the date. Again this is a super simple way of doing this however It's nothing too secure.
I should also add, I didn't want to store a raw date in the local database which can easily be edited.
Perhaps instead you could have the date, but to ensure it doesn't get edited you could also store a signature? That way as long as the signature is valid you know that the date hasn't been modified.
I'd love to know more on the concept? Do you have a link to some context? I'll have a Google - thanks
0

this is an example to crypt from Laravel and decrypt with vueJS

Laravel

use Illuminate\Support\Facades\Crypt;

public function encrypting(){

$string = 'This is example text';
$user = User::get();
// for simple string
$encrypted = Crypt::encryptString($string);
 
// for array , object
$encrypted2 = Crypt::encryptString(json_encode($user));

$response = [
    'user' => $user,
    'encrypted' => $encrypted,
    'encrypted2' => $encrypted2
];
}

Action front server

npm install crypto-js

VueJS

the key is the APP_KEY in .env (laravel) but remove 'Base64' text :

import CryptoJS from "crypto-js";

   Decrypting() {
   axios.get('http://back.domain.com/encrypting').then(response => {
    this.user = response.data.user;
    this.stringEncrypte = response.data.encrypted;
    this.userEncrypte = response.data.encrypted2;
    
    var key = 'xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx='
    var encrypted_json = JSON.parse(atob(this.userEncrypte));
    var decrypted = CryptoJS.AES.decrypt(encrypted_json.value, CryptoJS.enc.Base64.parse(key), {
      iv: CryptoJS.enc.Base64.parse(encrypted_json.iv)
    });
    // Decrypt in string format
    this.stringDecrypted = decrypted.toString(CryptoJS.enc.Utf8);

    // Decrypt in Array, Object format
    this.userDecrypted = JSON.parse(decrypted.toString(CryptoJS.enc.Utf8));


  })
},
Improve this answer

2 Comments

You shouldn't make your app key public.
As @max said app key should not be made public. Instead of using Crypt that uses app key you should use new \Illuminate\Encryption\Encrypter($key) where $key needs to be 16 characters for AES-128-CBC and 32 characters for AES-256-CBC. You can then use this key in vue

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.