WestCoastProjects
WestCoastProjects

Reputation: 63231

How to import crypto.js in either a vanilla javascript or node based javascript project

I have (succesfully) done an

 npm install --save crypto-js

in the current project. It shows up in package.json:

$grep crypto package.json
  "crypto-js": "^4.0.0",

Then in a local project javascript file I am trying to use it and have not figured it out. The following has been attempted:

var CryptoJS = require("crypto-js");

I have also tried to use the import approach after downloading the aes.js to the same local directory:

 <script type="text/javascript" src="aes.js"></script>

This results in:

Uncaught ReferenceError: require is not defined at my-project-worker.js:1

Uncaught ReferenceError: CryptoJS is not defined
    at encrypt (audio-clips-worker.js:168)
    at audio-clips-worker.js:235
    at Set.forEach (<anonymous>)
    at onmessage (audio-clips-worker.js:229)

Finally I tried leaving an absolute url:

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/crypto-js/3.1.2/rollups/aes.js"></script>

That gave the same "CryptoJS is not defined" error. What are working options here - and what steps are missing or need to be done differently?

Upvotes: 4

Views: 54491

Answers (3)

krish
krish

Reputation: 257

For any rookies out there you've to declare the Crypto JS url above the project JS file for it to work, like this:

  <!-- JavaScript and other scripts here -->
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/crypto-js/4.0.0/crypto-js.min.js"></script>
    <script src="script.js"></script>

if you declare it in below way you'll get an error caught ReferenceError: CryptoJS is not defined.

    <!-- JavaScript and other scripts here -->
    <script src="script.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/crypto-js/4.0.0/crypto-js.min.js"></script>

Upvotes: 2

jed
jed

Reputation: 86

"require is not defined" would mean you're not running it in a nodejs context. To run in vanilla environ you just need to include the script with absolute path and change your js to not use 'require' but use 'CryptoJS' like so:

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/crypto-js/3.1.2/rollups/aes.js"></script>
<script>
console.log('whats up!')
console.log('encrypted', CryptoJS.AES.encrypt('themessage', 'thekey'))
</script>

Upvotes: 2

user120242
user120242

Reputation: 15268

Works for me. Maybe your package inclusion isn't correct:

https://jsfiddle.net/rLt7haxc/6/

var message = "café";
var key = "something";

var encrypted = CryptoJS.AES.encrypt(message, key);
//equivalent to CryptoJS.AES.encrypt(CryptoJS.enc.Utf8.parse(message), key);
var decrypted = CryptoJS.AES.decrypt(encrypted, key);

$('#1').text("Encrypted: "+encrypted);
$('#2').text("Decrypted: "+decrypted.toString(CryptoJS.enc.Utf8));
<script src="https://cdnjs.cloudflare.com/ajax/libs/crypto-js/4.0.0/crypto-js.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="1"></div>
<div id="2"></div>

CodeSandbox demo of npm project:
https://codesandbox.io/s/prod-glade-6j2rw

var CryptoJS = require("crypto-js/core");
CryptoJS.AES = require("crypto-js/aes");
var encrypted = CryptoJS.AES.encrypt(message, key);
var decrypted = CryptoJS.AES.decrypt(encrypted, key);
console.log(encrypted, decrypted);

There's a CryptoES project that is more conformant to module standards.

Upvotes: 10

Related Questions