设计JavaScript中的隐形斗篷

Steganography. The art of hiding something right under your nose. For as long as humans have been alive, we’ve been trying to hide things — whether it’s our last slice of pizza or the location of a buried treasure. Do you remember the cool invisible lemon ink trick, where we’d write the secret message with lemon and heat the paper to reveal the grand secret? Well, that is what Steganography is, in a nutshell, allowing us to easily conceal messages just by hiding their existence.

隐写术。 在鼻子下藏东西的艺术。 只要人类还活着，我们就一直试图隐藏事物-无论是我们的最后一块披萨还是埋藏的宝藏。 您还记得很酷的隐形柠檬墨水花样吗？我们会在其中用柠檬写秘密信息，然后加热纸张以揭示重要秘密？ 简而言之，隐秘术就是这样，它使我们可以通过隐藏消息的存在来轻松隐藏消息。

In the early 1900s, German spies infiltrated the citizens of France in the name of trade. Their motives, however, were to observe the details of the French defense system and to aid the Germans to invade France. The cleverly designed French defense system maintained utmost confidentiality even amongst each region, making it difficult for one spy to gather all the information. This required multiple spies to gather information from each region and together design their game plan. The meeting place must be communicated only on that very day for high security but how was it supposed to reach all the regions within a day? They chose the newspaper, fast but a very insecure public channel! But the Germans already thought of that.They published the secret meeting spot in the weather report for the day.

1900年代初期，德国间谍以贸易的名义渗透了法国公民。 但是，他们的目的是观察法国国防系统的细节，并帮助德国人入侵法国。 精心设计的法国国防系统甚至在每个地区都保持了最高的机密性，使一个间谍很难收集所有信息。 这需要多个间谍从每个区域收集信息并共同设计他们的游戏计划。 为了安全起见，必须在当天才与会场进行交流，但是会议如何在一天之内到达所有区域？ 他们选择了报纸，但速度很快，但公共渠道却很不安全！ 但是德国人已经想到了这一点，他们在当天的天气报告中发布了秘密聚会地点。

Taking the first letter of every word and what do we get - the meeting place

拿每个单词的第一个字母以及我们能得到什么-会议地点

“New Rue des Thermopyles Heil Hitler”!.

“ New Rue des Thermopyles Heil Hitler” ！。

那时是不可见墨水，现在是不可见字符。

Now in the age of information, the most important place for communication is the internet. Messaging apps like messenger, Whatsapp, iMessage, and Social media like Twitter, Facebook, Instagram. How can we apply the same problem here and solve it now? Well, we could start with zero-width ‌characters.

在当今的信息时代，最重要的交流场所是互联网。 诸如Messenger，Whatsapp，iMessage之类的消息传递应用程序，以及Twitter，Facebook，Instagram等社交媒体。 我们如何在这里应用相同的问题并立即解决？ 好吧，我们可以从零宽度的‌字符开始。

’Copy me‌‌‌‌‌‘- paste this quote in https://www.textmagic.com/free-tools/unicode-detector to see the ZWCs hiding right in front of you the whole time.

“复制我‌‌‌‌‌”-将此报价粘贴到https://www.textmagic.com/free-tools/unicode-detector中，以查看ZWC始终隐藏在您面前。

Zero Width Characters are non-printing characters, a part of the Unicode table. As the name suggests they don’t even show their presence. They are used to enable line wrapping in long words, joining emojis, combining two characters into a ligature, keeping them from joining, etc.

零宽度字符是非打印字符，是Unicode表的一部分。 顾名思义，他们甚至不展示自己的存在。 它们用于启用长行换行，连接表情符号，将两个字符组合成连字，防止它们联接等。

The characters zwj join the emoji’s but they are not visible

字符zwj加入了表情符号，但不可见

These characters have increasingly found their way in text-hiding, their complete invisibility being a remarkable selling point. They cannot be blocked as they are integral in multiple languages and emojis. And it also turns out that ZWCs aren’t the only characters which are invisible, eg. Invisible separator — U+2063.

这些角色越来越多地在文本隐藏中找到了自己的方式，它们的完全隐形性是一个了不起的卖点。 由于它们在多种语言和表情符号中不可或缺，因此无法阻止它们。 而且，事实证明，例如ZWC并不是唯一不可见的字符。 看不见的分隔符— U + 2063。

Table that contains mostly used invisible characters.

包含最常用的不可见字符的表。

One small problem with this table tho! Gmail blocks U+200B ( Zero width space ). Not to mention, Twitter is known for blacklisting unnecessary invisible characters, none of the characters in the table except U+200C, U+200D and U+180e works. So we now have three characters!

这个桌子有一个小问题 Gmail会阻止U + 200B(零宽度空格)。 更不用说，Twitter以将不必要的不​​可见字符列入黑名单而闻名，除U + 200C，U + 200D和U + 180e之外，表中的所有字符均不起作用。 现在我们有了三个字符！

Oh, wait, U+180e is not invisible and renders weirdly on iOS devices. We are now down to only 2 characters.

哦，等等，U + 180e不是不可见的，并且在iOS设备上呈现异常。 现在我们只有2个字符。

Tearing apart the Unicode table, testing each possible Invisible character for its cross-platform / web invisibility, we are able to add 4 more characters to our arsenal, a total of 6 invisible characters that we can now use to hide our secrets in strings.

撕开Unicode表，测试每个可能的不可见字符的跨平台/网络不可见性，我们可以向我们的军械库中再添加4个字符，现在总共可以使用6个不可见字符将我们的秘密隐藏在字符串中。

const zwc = ['‌', '‍', '⁠', '⁢', '⁣', '⁤'] // 200c,200d,2060,2062,2063,2064 The digital equivalent invisible ink

Now to use the invisible ink, all we have to do is given a secret ‘hi’ we need to represent it in binary, i.e., 01101000 011010001. Then take 4ZWCs and map them to a two-bit truth table i.e, 00-200c,01-200d,10-2060,2062-11.Use the truth table to convert the binary to an invisible stream and embed it in any cover message anywhere.

现在要使用不可见墨水，我们需要做的是给我们一个秘密的“ hi”，我们需要用二进制表示它，即01101000011010001。然后取4ZWC并将它们映射到两位真值表，即00-200c ，01-200d，10-2060,2062-11。使用真值表将二进制文件转换为不可见的流，并将其嵌入任何地方的任何封面消息中。

加密隐藏内容

What if the intruder somehow detects the presence of the hidden characters and tries to brute force the truth table to crack the secret out.

如果入侵者以某种方式检测到隐藏字符的存在并试图强行迫使真相表破解秘密，该怎么办？

This is where Kerckhoff’s principle comes in:

这是Kerckhoff的原理所在：

An ideal cryptosystem should be secure even if everything about the system is exposed to the public except the secret key.

理想的密码系统应该是安全的，即使除了秘密密钥以外，系统中的所有内容都向公众公开。

Therefore we need some sort of a key to lock our secrets. For this a password-based key generation function can be used to yield a strong key which in turn is used to encrypt our messages. AES-CTR stream cipher with a random IV and salt can be used to encrypt the hidden secret as it has an added advantage of not requiring padding unlike block ciphers as it increases the length of the message.

因此，我们需要某种密钥来锁定我们的秘密。 为此，可以使用基于密码的密钥生成功能来生成一个强大的密钥，然后再将其用于加密我们的消息。 具有随机IV和盐值的AES-CTR流密码可用于加密隐藏的秘密，因为它具有不像块密码那样不需要填充的附加优点，因为它增加了消息的长度。

压缩

Now given we're doing so much with encryption, we definitely need the maximum compression possible.

既然我们在加密方面做了大量工作，我们肯定需要最大的压缩率。

As you can see, even though we had six ZWC characters only 4 were used as 6 is not a power of 2.The two extra characters (U+2063, U+2064) could be used to do an additional layer of abstracted Huffman compression reducing redundancy. After the secret has been converted to ZWCs, the two most repeating ZWCs in the stream are determined, say U+200D and U+2060. Now every two consecutive occurrences of U+200Ds and U+2060s could be replaced with one U+2063 or U+2064. This saves a lot as redundancy was frequently observed.

如您所见，即使我们有六个ZWC字符，也仅使用了4个字符，因为6不是2的幂。两个额外的字符(U + 2063，U + 2064)可以用来做一层额外的抽象霍夫曼压缩减少冗余。 将机密转换为ZWC之后，将确定流中两个重复最多的ZWC，例如U + 200D和U + 2060。 现在，每两个连续出现的U + 200D和U + 2060可以替换为一个U + 2063或U + 2064。 由于经常观察到冗余，因此可以节省很多。

We now have two layers of compression making the best use of the 6 invisible characters! Awesome!

现在，我们有两个压缩层，可以充分利用6个不可见字符！ 太棒了！

So combining all of these, two of my friends and I built StegCloak, a pure JavaScript steganography module designed in a functional programming style to achieve what is said above.

因此，结合所有这些，我的两个朋友和我构建了StegCloak，这是一个纯JavaScript隐写模块，以功能编程风格设计，以实现上述目的。

Here’s a quick demo of it :

这是它的快速演示：

演示地址

We hope you enjoy it as much as we did building it!

我们希望您像我们建造它一样喜欢它！

Checkout StegCloak in Github or visit https://stegcloak.surge.sh.

在Github上检查StegCloak或访问https://stegcloak.surge.sh 。

翻译自: https://davidwalsh.name/javascript-steganography