How to implement SHA-256 encryption in Angular2

Question

I need to encrypt my password in SHA256 before making API request . I am not able to find any implementation of SHA-256 in Angular2

SHA-256 is not an encryption but a message digest (hash).

Henry
– Henry

2017-05-10 13:28:06 +00:00
Commented May 10, 2017 at 13:28 — Henry
– Henry, Commented May 10, 2017 at 13:28

Dane Brouwer · Accepted Answer · 2021-08-03 13:04:45Z

20

I used sha.js for this purpose, it is so simple and does the trick!

First npm install --save sha.js

Import in your component, service, etc... :

import * as shajs from 'sha.js';

And then use it as the docs suggests:

shajs('sha256').update({stringToBeHashed}).digest('hex')

edited Aug 3, 2021 at 13:04

Dane Brouwer

2,9821 gold badge26 silver badges32 bronze badges

answered Sep 7, 2017 at 13:54

hmartos

9192 gold badges10 silver badges19 bronze badges

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

5 Comments

AfroChase Over a year ago

I use this approach and works well, but you have to omit the {} in the method "update". Example: shajs('sha256').update(stringToBeHashed).digest('hex');

apricity Over a year ago

When trying this answer in an angular6 project I get runtime error 'Uncaught ReferenceError: global is not defined' Looking at the stack, I think webpack has trouble importing it.

hmartos Over a year ago

@apricity I have a working example in StackBlitz (what uses webpack) adding @types/node module and using require to import sha.js module. Hope it helps!

hmartos Over a year ago

If you have importing issues I suggest to read this article about importing JavaScript libraries into TypeScript projects

YKJ Over a year ago

I was using it with Angular and for line "import * as shajs from 'sha.js';" I am getting error. To resolve it add line "const shajs = require('sha.js')" rest is same

TheGreatContini · Accepted Answer · 2017-05-10 21:37:53Z

6

Before I answer your question, you should understand that SHA256 should not be used for passwords. You should also be aware that client-side password hashing is not normally done, but there is a push for it from a number of researchers. The catch is that it is easy to do wrong. Guidance here and here.

Now to answer your question, rather than using Angular2, why not just pull in the Stanford JavaScript Crypto Library or Crypto-Js? APIs on SHA256 are documented on these links.

answered May 10, 2017 at 21:37

TheGreatContini

6,6892 gold badges29 silver badges37 bronze badges

1 Comment

Alex Po Over a year ago

You've provided excelent links

Sayan · Accepted Answer · 2017-05-10 16:05:27Z

1

SHA-256 & md5 both are provide hashing not encryption. SHA-256 not provide any angular2 support still now. If you want to hashstring/hashAsciiStr it's pretty simple in ts-md5....

ts-md5 npm link

Step to use ts-md5 :

npm install

npm install ts-md5
Import the class in your component where you want to use

import {Md5} from 'ts-md5/dist/md5';
Hash some things

Md5.hashStr('blah blah blah') => hex:string Md5.hashStr('blah blah blah', true) => raw:Int32Array(4) Md5.hashAsciiStr('blah blah blah') => hex:string Md5.hashAsciiStr('blah blah blah', true) => raw:Int32Array(4)

hopefully it helps you

answered May 10, 2017 at 16:05

Sayan

5325 silver badges12 bronze badges

4 Comments

Henry Over a year ago

It is 2017, MD5 should really no longer be used, because it was broken some time ago (en.wikipedia.org/wiki/MD5#Security).

TheGreatContini Over a year ago

Actually both MD5 and SHA256 are inappropriate for password hashing. This is #4 in my Top 10 Developer Crypto Mistakes.

Sayan Over a year ago

I agree MD5 should not be used for storing passwords. Its hashing algorithm and was compromised . I recommend using PBKDF2 [link] (en.wikipedia.org/wiki/PBKDF2) for storing passwords

Jiri Kralovec Over a year ago

It really depends on what are you using it for. Would I use it for passwords? No, absolutely not. Would I use it for simple hashing for, say, logging API when if you dig really deep, you will figure out what is happening and how to send you own request? Yes. There is a real chance you will get to that scenario because spending countless hours on security solution for development logs is something that is unlikely to happen in any workplace :)

Ashique Razak · Accepted Answer · 2023-02-17 00:43:15Z

1

Angular 14:

I had to use js-sha256 for the purpose with the latest version.

Simply import in the component

import { sha256 } from 'js-sha256';

and use like

console.log(sha256.update("secretPass").hex());

answered Feb 17, 2023 at 0:43

Ashique Razak

6957 silver badges12 bronze badges

Comments

firasKoubaa · Accepted Answer · 2021-08-03 13:01:08Z

0

you shoud import shajs directly fom sha.js

import shajs from 'sha.js';

and then reuse it :

export class AppComponent  {
  hash = shajs('sha256').update('Abc123$').digest('hex');
}

answered Aug 3, 2021 at 13:01

firasKoubaa

6,92531 gold badges89 silver badges165 bronze badges

4 Comments

Dane Brouwer Over a year ago

Is this any different to the currently accepted answer?

firasKoubaa Over a year ago

@DaneBrouwer the import itslef ->this wouldn't work : import * as shajs from 'sha.js';

Dane Brouwer Over a year ago

Seems like that should be added to the original answer as a comment rather than a new answer, but that's obviously up to you. :-)

firasKoubaa Over a year ago

i m not who gived the first answer

Collectives™ on Stack Overflow

How to implement SHA-256 encryption in Angular2

5 Answers 5

5 Comments

1 Comment

4 Comments

Comments

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

5 Comments

1 Comment

4 Comments

Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related