secretsharing.js

import React, { useState } from "react"
import sss from "sss-wasm"

export default function UpImage(props) {
  const [msg, setMsg] = useState('');
  const [shares, setShares] = useState('');
  const [amount, setAmount] = useState(5);
  const [threshold, setThreshold] = useState(4);

  function msgChanged(ev) {
    const v = ev.target.value;
    setMsg(v);
  } 

  function thrChanged(ev) { 
    const v = ev.target.value; 
    setThreshold(v);
  } 

  function amountChanged(ev) {
    const v = ev.target.value;
    setAmount(v); 
  } 

  function sharesChanged(ev) {
    const v = ev.target.value;
    setShares(v);
  }

  function atou8(v) {
    const sBinaryString = atob(v);
    const aBinaryView = new Uint8Array(sBinaryString.length);
    Array.prototype.forEach.call(aBinaryView, (el, idx, arr) => {
      arr[idx] = sBinaryString.charCodeAt(idx);
    });
    return aBinaryView;
  }

  function enc() {
    const data = new Uint8Array(64);
    const emsg = (new TextEncoder()).encode(msg);
    for (let i = 0; i < emsg.length; i++) {
      data[i] = emsg[i];
    }
    const sharesPromise = sss.createShares(data, amount, threshold);
    sharesPromise.then((x) => {
      const z = x.map((y) => {
        const b64 = btoa(String.fromCharCode.apply(null, y));
        return b64;
      });
      setShares(z.join('\n'));
    });
  }

  function dec() {
    const strs = shares.split('\n').filter(x => x.length > 0);
    const u8as = strs.map((x) => atou8(x));
    sss.combineShares(u8as)
      .then((x) => {
        let i = 0;
        for (; i < x.length; i++) {
          if (x[i] === 0) break;
        }
        const data = new Uint8Array(i);
        for (let j = 0; j < i; j++) {
          data[j] = x[j];
        }
        const str = (new TextDecoder()).decode(data);
        setMsg(str);
      }).catch((x) => {
        setMsg('error: ' + x);
      });
  }

  return (
    <>
      メッセージ(64バイト以内)
      <br />
      <input type="text" value={msg} onChange={msgChanged}
        style={{width: '100%'}} />
      <br />

      amount
      <br />
      <input type="text" defaultValue={amount} onChange={amountChanged} />
      <br />

      threshold
      <br />
      <input type="text" defaultValue={threshold} onChange={thrChanged} />
      <br />

      <button onClick={enc}>暗号化</button>
      <br />

      暗号文
      <br />
      <textarea rows="12" cols="120" value={shares} onChange={sharesChanged} />
      <br />

      <button onClick={dec}>復号化</button>
      <br />
    </>
  );
}