Sensitive Information Mask

Say your API has some Sensitive Personal Information like this:

{
  "name": "@rower_activist_422",
  "phone": "(534) 118-8539",
  "card": "1234 5678 0023 4215"
}

And you don't want to expose the SPI to the client, so you mask it like this:

{
  "name": "@rower_activist_422",
  "phone": "(***) ***-8539",
  "card": "1234 **** **** 4215"
}

But there's still needs of exposing the SPI to certain user. For example, a salesman who have to follow the business lead.
However, you don't want to expose the SPI to whoever calling the API so that they can retrieve the SPI in batch.
What more can you do?
With integration of SIMask you can mask the SPI on the server side, and:

unmask it via a confirmation api call replay.
expose only piece of SPI user really need
ensure the replay request only happens in browser under assigned host name

Here is a demo

Notice how the real value being masked, and the masked value being unmasked.

the request replayed provice only the true value for the masked field. not the whole json object.
the request replayed only happens in browser under assigned host name (restricted via wasm).
asymmetric encrypted signature header added in replay request (enabled via wasm).
the eye component is generated by SIMask.
developers needs only import SIMask and instantiate it globally once.
provide a state to SIMask so that it can update the state when the request replayed.

here are some snippet from the demo:


            'use client'
            import React, { useState, useEffect } from "react";
            import axios from "axios";
            import Kynareth from "fe-enigma-kynareth";

            export default function Page() {

              const [name, setName] = useState('hello')
              const [phone, setPhone] = useState('')
              const [card, setCard] = useState('')
              const [eState, setEState] = useState(null)

              if (typeof window !== 'undefined') {
                global.__use_react__ = true
                const kynareth = new Kynareth()
                kynareth.setAdapter(axios)
                kynareth.setStateSetter(setEState)
              }

              useEffect(() => {
                axios.get('/api')
                  .then(res => res.data)
                  .then(data => {
                    setName(data.name)
                    setPhone(data.phone)
                    setCard(data.card)
                  })
              }, [])

              useEffect(() => {
                console.log(phone, eState)
              }, [eState])

              return (
                <div className="card card-side bg-base-100 shadow-xl mb-10">
                  <figure><img src="/avatar.png" alt="Movie" /></figure>
                  <div className="card-body">
                    <h2 className="card-title">Key Account</h2>
                    <p>Very important account</p>
                    <p>Now at stage 2</p>
                    <div className="flex">
                      <div className="w-20">name:</div>
                      <div>{name.toString()}</div>
                    </div>
                    <div className="flex">
                      <div className="w-20">phone:</div>
                      <div>{phone.toString()}</div>
                    </div>
                    <div className="flex">
                      <div className="w-20">card no.:</div>
                      <div>{card.toString()}</div>
                    </div>
                  </div>
                </div>
              )
            }