行走在陽光下的那些不可見字符

行走在陽光下的那些不可見字符

假設咱們已經知道Unicode字符集，若是不清楚也可閱讀本文，而後等待下一篇主要介紹Unicode的文章。

背景

今天咱們主要來聊聊這些行走在陽光下的不可見字符。不可見字符在計算機科學和通訊學中被稱爲控制字符或非打印字符，是字符集中的一個碼位（code point），不是一個書面符號，也就是在通常的書面呈現環境中它是不可見字符。

在前端的世界裏，咱們翻看MDN的文檔就能看到相關信息，好比String的 轉義字符（Escape Notation）模塊就有介紹，

咱們能夠嘗試，在這些轉義字符中，如 '\f'， '\b'等咱們去新建一個這樣的字符串變量而後console出來是看不見的，可是咱們去看該字符串的長度卻不等於0。

咱們能夠在ECMAScript標準中找到相關介紹

A string literal is zero or more characters enclosed in single or double quotes. Each character may be represented by an escape sequence. All characters may appear literally in a string literal except for the closing quote character, backslash, carriage return, line separator, paragraph separator, and line feed. Any character may appear in the form of an escape sequence.

就是除了"closing quote character, backslash, carriage return, line separator, paragraph separator, and line feed" 都能在字符串中逐字的出現。

工具

總的來講不可見字符最大的做用就是不可見性，咱們能夠利用這個生成一些帶有不可見字符的信息展現在某些地方。那麼，怎麼去生成這一整套工具呢？讓咱們來作一下任務拆解，

1. 將特定的信息生成不可見字符，即隱形加密
2. 將不可見字符與須要顯示的信息也就是明文信息組合生成最後的展現文本信息，即明文與密文的組合
3. 可以將上一步生成的展現文本信息解析獲得原始的可見的特定信息，即反隱形加密

根據以上任務步驟，就能進行功能開發了，

隱形加密

const zeroWidthSpace = '\u200B'
    const zeroWidthJoiner = '\u200D'
    const zeroWidthNonJoiner = '\u200C'
    const zeroWidthNonBreakSpace = '\uFEFF'

    function createEncryptionText(text) {
    if (!text || typeof text !== 'string') {
      throw new Error('invalid param, param must be string')
    }

    const binaryText = textToBinary(text)
    return binaryText
      .split('')
      .map(b => {
        const num = parseInt(b, 10)
        if (num === 1) {
          return zeroWidthSpace
        }

        if (num === 0) {
          return zeroWidthNonJoiner
        }

        return zeroWidthJoiner
      })
      .join(zeroWidthNonBreakSpace)
  }

    function charToBinary(char) {
        return char.charCodeAt(0).toString(2)
    }

    function textToBinary(text) {
        return text
         .split('')
         .map(item => padStar(charToBinary(item)))
         .join(' ')
     }

     function padStar(text, length = 8, chars = '0') {
      if (typeof text !== 'string') {
        throw new Error('invalid params. text must be string')
      }

      return (
        Array(length)
          .fill(chars)
          .slice(text.length) + text
      )
    }

    console.log(createEncryptionText('wfsovereign')) // ""
    console.log(createEncryptionText('wfsovereign').length) // 195

這裏首先準備了一些隱形的Unicode字符用於對要加密文本（後面稱之爲簽名）的替換，而後定義好替換的規則，將簽名先轉換成二進制而後逐位進行替換。上面咱們能夠看到加密後的文本輸出好似一個空字符串，然而咱們看到該字符串的長度倒是195，由此證實咱們成功的將簽名轉化爲了隱形文本。

對於二、3點這裏咱們就不展開詳說了，我將整個加解密以及隱形碼位的提取抽成了一個_ZeroWidthCharacterEncryptionManager_ 類，而後將代碼放到了個人GitHub，感興趣的同窗能夠移步查閱。其中須要的注意的兩點這裏我提一下，一個是反隱形加密的時候要按照加密的規則一一對應，這樣才能獲得原始簽名；另外一個是提取一段文本內容的時候，我採用的是正則，這個正則如何寫是根據咱們採起的一些隱形的碼位來定的，好比上面我選擇的zeroWIdthSpace等，對應的正則就應該是*/[\u200B-\u200C\uFEFF]+/* 。

應用

根據上面的工具類，咱們看到的一個應用場景就是在一段文本中加上隱形簽名或者水印，這樣咱們生成的文本內容若是被他人傳播的話，就能經過隱形簽名來檢測是不是從咱們這裏傳播出去的，感受還能保護版權啥的，和在一些網站copy內容會自動帶上出處的作法有殊途同歸之妙啊~

那麼，此外還有沒有其餘做用？這就要看聰明的你的奇思妙想咯 ：）

及時總結，靜心沉澱；如風少年，砥礪前行。

歡迎關注個人公衆號 — 和F君一塊兒xx

參考資料：

1. Control Character
2. String MDN
3. Be careful what you copy: Invisible inserting usernames into text width zero width characters
4. Zero width non joiner
5. Zero width space