7

GitHub - HC200ok/manual-data-masking: A lightweight javascript library for manua...

 2 years ago
source link: https://github.com/HC200ok/manual-data-masking
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
neoserver,ios ssh client

miss-mallard.png

A lightweight javascript library for manual data masking.

Manual data masking?

Manual data masking is a kind of operation that labels and hides sensitive data, creates new text that hides (masks) sensitive information.

Imagine that there is a customer comment including sensitive data like swear word, person name, home address...

Damn it, The phone I just bought last week has been broken 😠, I need refund
right now, Call me on this phone number: 080808080.

By using manual-data-masking you can do a manual data masking job like this:

Online preview

At the same time, data masked and text after data masking will be generated by manual-data-masking.

Data masked:

[
  {
    content: "Damn it",
    category: "Swear word",
    start: 0, // start index in text string
    end: 7, // start index in text string
  },
  {
    content: "080808080",
    category: "Phone Number",
    start: 120,
    end: 129,
  },
];

Data masked can be used to build a labeled data set for training data masking related AI model.

Text after data masking:

*******, The phone I just bought last week has been broken 😠, I need refund
right now, Call me on this phone number: *********.

How to use

ES modules

npm install manual-data-masking
import { create as createManualDataMasking } from "manual-data-masking";

const dataMasked = [
  {
    "content": "Damn it",
    "category": "Swear word",
    "start": 0,
    "end": 7
  }
]

const categories = [
  {
    "value": "Person Name",
    "color": "#b6656c"
  },
  {
    "value": "Swear Word",
    "color": "#577eba"
  },
  {
    "value": "Phone Number",
    "color": "#3e6146"
  }
]

const text = "Damn it, The phone i just bought last week has been broken 😠, \n I need refund right now, Call me on this phone number: 080808080."

const $manualDataMasking = createManualDataMasking({
  container: document.getElementById("demo"),
  text,
  dataMasked,
  categories,
  replaceCharactor: "*",
  dataMaskingCharactor: "X",
  maxHeight: 100
})

$manualDataMasking.on("afterDataMasking", (dataMasked, textAfterDataMasking) => {
  console.log(JSON.stringify(dataMasked));
  console.log(textAfterDataMasking);
})
</script>

Script tag:

<script src="https://unpkg.com/manual-data-masking"></script>

<script>
  const dataMasked = [
    {
      content: "Damn it",
      category: "Swear word",
      start: 0,
      end: 7,
    },
  ];

  const categories = [
    {
      value: "Person Name",
      color: "#b6656c",
    },
    {
      value: "Swear Word",
      color: "#577eba",
    },
    {
      value: "Phone Number",
      color: "#3e6146",
    },
  ];

  const text =
    "Damn it, The phone i just bought last week has been broken 😠, \n I need refund right now, Call me on this phone number: 080808080.";

  const $manualDataMasking = manualDataMasking.create({
    container: document.getElementById("demo"),
    text,
    dataMasked,
    categories,
    replaceCharactor: "*",
    dataMaskingCharactor: "X",
    maxHeight: 100,
  });

  $manualDataMasking.on(
    "afterdataMasking",
    (dataMasked, textAfterDataMasking) => {
      console.log(JSON.stringify(dataMasked));
      console.log(textAfterDataMasking);
    }
  );
</script>

Options

Property Description Type Required Default
categories Categories of sensitive data.
e.g.
[{
  value: "Person Name",
  color: "#3e6146"
},
{
  value: "Bad word"
}]
Notice: if you don't set color property, the default color will be #577eba
array true null
container Container dom element. Dom Element Object true null
dataMasked Sensitive data been masked.
e.g.
[{
  content: "Damn it",
  category: "Person Name",
  start: 0, // start index in text string
  end: 7, // end index in text string
 }]
array false []
dataMaskingCharactor Charactor in data masking entity string false '●'
maxHeight Max height of container, you can scroll the content if the height of container is over max height. number false null
replaceCharactor Charactor be used to replace the sensitive data string false "*"
text Origin text content.
Attention: please use \n in where you want to wrap a new line
string true null

Instance functions

Name Description
getDataMasked Get sensitive data been masked
$manualDataMasking.getDataMasked()
getTextAfterDataMasking Get text after data masking
$manualDataMasking.getTextAfterDataMasking()

Events

Event Name Description
afterDataMasking Registered callback functions will be triggered when new sensitive data been masked. Value of text after masking and data msked can be used inside of the callback function.

$manualDataMasking.on( "afterdataMasking", (dataMasked, textAfterDataMasking) => {
  console.log(JSON.stringify(dataMasked));
  console.log(textAfterDataMasking);
});

star Stargazers

Stargazers repo roster for @HC200ok/manual-data-masking

Vue2 version

manual-data-masking has another version made with Vue.js 2.x: https://github.com/HC200ok/vue2-text-annotation

Build Setup

# install dependencies
npm install
# serve with hot reload at localhost:8080
npm run dev
# build for production with minification
npm run build

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK