環境

Frontend

react@18.2.0
typescript@5.3.3
vite@5.0.12

Backend

あんまり関係ないので略

その他環境など

http で通信

あざらし

やりたかったこと

前提

DBにはIDとパスワードを保存するテーブルがある
→パスワードは SHA-256 に変換して登録する

なので

ユーザーがIDとパスワードを入力して何某かのボタンを押下すると、
フロントエンド側が、ID・ハッシュ化したパスワードをバックエンド側にリクエストし、
バックエンド側でなんやかんや…としていきたい

そのため、今回は フロントエンド側で値をハッシュ化したい！ というのが目標

あざらし

検討-1 crypto モジュールを使う（不可）

node に標準モジュールとしてあるのが「crypto」

簡単に書けそうだったのでトライ！
パスワード空の場合ははじきたいので下記のようなカンジで…

import {createHash} from 'crypto'

const loginEvent = (event: React.FormEvent<HTMLFormElement>) => {
  event.preventDefault();
  const data = new FormData(event.currentTarget);
  
  const loginPassword = data.get("password")?.toString();

  if (loginPassword != "" && loginPassword) {
    const hashPassword = createHash("sha256")
      .update(loginPassword)
      .digest("hex");
  }

～略～
};

エラー発生

これでヨシと思ったら、エラーが出てしまいました。
内容は下記

Uncaught Error: Module "crypto" has been externalized for browser compatibility. 
Cannot access "crypto.createHash" in client code.  
See https://vitejs.dev/guide/troubleshooting.html#module-externalized-for-browser-compatibility for more details.

ちゃっぴーに聞いたり、よく調べると、ブラウザだけでは機能できないモジュールだった　ぬ

あざらし

検討-2 hash 関数を使う

ゴリゴリに書いてやらァ！！！ということで、JSのハッシュ関数にて書いてみる
使ったのは SubtleCrypto: digest() 関数とやら

const loginEvent = (event: React.FormEvent<HTMLFormElement>) => {
  event.preventDefault();
  const data = new FormData(event.currentTarget);
  
  const loginPassword = data.get("password")?.toString();

  if (loginPassword != "" && loginPassword) {
    const encoder = new TextEncoder();
    const buffer = encoder.encode(loginPassword);
    const hashBuffer = await crypto.subtle.digest('SHA-256', buffer);
    const hashArray = Array.from(new Uint8Array(hashBuffer));
    const hashHex = hashArray.map(byte => byte.toString(16).padStart(2, '0')).join('');
  }
  
  ～略～ 
};

これで無事、はっしゅどぽてとに出来ました。

このスクラップは2024/02/20にクローズされました