DEV Community: Hiep Bao Le

Hide secret message with zero-width characters

Hiep Bao Le — Thu, 04 Jun 2020 18:26:06 +0000

Originally posted on my blog.

Zero-width characters are non-printing characters that are not displayed by most applications, which leads to the name "zero-width." They are Unicode characters, typically used to mark possible line break or join/separate characters in writing systems that use ligatures.

As they are "invisible," anyone can use them to co‎‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‏nceal messages or information within plain text. Don’t believe me? I left a secret message in the first sentence. Read this post to know how it's possible.

Available zero-width characters

So far I’ve found 9 zero-width characters in the Unicode characters table.

Character	Unicode
Zero-width space	U+200B
Zero-width non-joiner	U+200C
Zero-width joiner	U+200D
Left-To-Right Mark	U+200E
Right-To-Left Mark	U+200F
Left-To-Right Embedding	U+202A
Right-To-Left Embedding	U+202B
Word joiner	U+2060
Zero-width no-break space	U+FEFF

There may be more, but nine is more than enough. In theory, only two different zero-width characters are enough to insert any type of data. Though binary representation is usually large, we can make use of every zero-width characters to effectively reduce the length of encoded data.

Fingerprinting

Zero-width characters can be used to fingerprint text. For example, someone within your team is leaking confidential information but you don’t know who. Just send each member a classified text with their name encoded in it. Wait for it to be leaked, then extract the name, and do whatever you like with them.

Unlike other steganography techniques (such as utilizing noises in images, videos, sound as the container), zero-width characters are not removed if the text is formatted, copied, pasted. It’s really hard to detect them without special tools, as most text editors don’t render them. In addition, we’re not limited in the amount of data that can be encoded. However, editors do count zero-width characters, so encoding too much data within a short text makes it more suspicious.

Tool

To demonstrate the ability to hide secret messages with zero-width characters, I created a tool here.

How does it work?

Use TextEncoder to the secret message from String to Uint8Array, which is an array of 8-bit unsigned integers.
Convert each integer to 8 bits, then convert each bit to zero-width characters:
- Bit value 0 is encoded as Zero-width space (U+200B)
- Bit value 1 is encoded as Zero-width non-joiner (U+200C)
Hide the encoded string in the middle of the carrier message.

In addition, two other zero-width characters are used to mark the beginning and ending of the encoded string:

Left-To-Right Mark (U+200E) marks the beginning
Right-To-Left Mark (U+200F) marks the end

This makes it easier to detect the position of the encoded string when decoding it.

Please refer to source code for more details.

Detect zero-width characters

Use any text editor that supports rendering of zero-width characters.

For quick test, you can use Chrome Developer Tools console:

This Chrome extension will convert any zero-width characters to emojis.

References

Be careful what you copy: Invisibly inserting usernames into text with Zero-Width Characters

Get a free domain with Freenom and Cloudflare

Hiep Bao Le — Sun, 24 May 2020 07:55:36 +0000

Originally posted on my blog.

Freenom is a domain registrar that provides unlimited free domains that last for one year. The only limit is that you can only get domains ending in .tk, .ml, .ga, .cf, or .gq.

In this post, I’ll show you how to register a domain at Freenom step-by-step. Then I’ll show you how to replace Freenom’s default nameservers (which are pretty bad) with Cloudflare’s to have better control of your domains.

Register domain at Freenom

Step 1: Go to https://www.freenom.com and get yourself an account.

Step 2: Go to the homepage. Type the domain you would like to register in the Find a new FREE domain field. Then click Check Availability.

Step 3: If the domain name is available click Get it now! and then click Checkout.

Step 4: Set the period to 12 months. Then click Continue.

Step 5: Check I have read and agree to the Terms & Conditions. Then click Complete Order.

Step 6: You’ve successfully registered your free domains. But we’re not done yet. Let’s move to the Cloudflare part.

Add your domains to Cloudflare

Step 1: Go to https://www.cloudflare.com and get yourself an account.

Step 2: Click Add a site in Account Dashboard.

Step 3: Type in your domain and click Add site.

Step 4: Select plan Free and click Confirm plan.

Step 5: Cloudflare will scan for existing DNS records. Wait until it finishes, and click Continue.

Step 6: Cloudflare will give you two nameservers that you need to set in Freenom.

Step 7: Go back to Freenom. Click Services > My Domains. You should see all domains you’ve registered. Click Manage Domain on the domain that you’re configuring.

Step 8: Click Management Tools > Nameservers > Use custom nameservers (enter below). Now enter the nameservers provided by Cloudflare, and click Change Nameservers.

Step 9: Go back to Cloudflare, click Done, check nameservers. It will take a while, so please be patient.

Step 10: Enjoy your free domain!

Final Thoughts

These domains are not suitable for professional usage, but if you can’t afford to buy a domain or just want to find one to test your project, Freenom + Cloudflare is a perfect choice. Personally, I use it for a lot of my projects.

I hope you’ll find this post helpful!

A better way to copy text to Clipboard in JavaScript

Hiep Bao Le — Sun, 24 May 2020 06:46:50 +0000

Originally posted on my blog.

The problem

Typically, this is how copying text is done (taken from here):

Create a <textarea> element to be appended to the document. Set its value to the string that we want to copy to the clipboard.
Append said <textarea> element to the current HTML document.
Use HTMLInputElement.select() to select the contents of the <textarea> element.
Use document.execCommand('copy') to copy the contents of the <textarea> to the clipboard.
Remove the <textarea> element from the document.

The code looks like this:

function copyToClipboard(text) {
  const el = document.createElement('textarea');
  el.value = text;
  document.body.appendChild(el);
  el.select();
  document.execCommand('copy');
  document.body.removeChild(el);
};

There are two problems with this approach:

There may be some flashing due to the temporary element.
It will unselect whatever the user is selecting.

We can work around both, but the function will become much longer.

Solution

When the user initiates a copy action, the user agent fires a clipboard event name copy.

W3C Specification

Use addEventListener to attach our custom event handler, which will override the current data with our text.
Use document.execCommand('copy') to trigger the copy action.
Use removeEventListener to remove our event handler.

function copyToClipboard(text) {
  const listener = function(ev) {
    ev.preventDefault();
    ev.clipboardData.setData('text/plain', text);
  };
  document.addEventListener('copy', listener);
  document.execCommand('copy');
  document.removeEventListener('copy', listener);
}

Bonus

You can even copy rich text!

function copyRichText(text) {
  const listener = function(ev) {
    ev.preventDefault();
    ev.clipboardData.setData('text/html', text);
    ev.clipboardData.setData('text/plain', text);
  };
  document.addEventListener('copy', listener);
  document.execCommand('copy');
  document.removeEventListener('copy', listener);
}
copyRichText('<i>Markup</i> <b>text</b>. Paste me into a rich text editor.');

Browser compatibility

According to MDN Web Docs, this should work on all major browsers except Internet Explorer.

How I cloned Chatible for my school

Hiep Bao Le — Sat, 23 May 2020 14:40:27 +0000

If you don't know what Chatible is, it's a Messenger bot that allows you to chat with someone random. I love its idea, but I don't want to chat with a total stranger. It would be great if we have something in common. Studying at the same school sounds good, so I cloned Chatible for my school, which I call PTNK Chatible (PTNK stands for my school name).

Demo

PTNK Chatible

Currently only Vietnamese is supported. English will be added soon.

Source code

ptnkchat / ptnkchat

PTNK Chatible source code

PTNK Chatible

Chatible clone written in TypeScript, based on Node, Express and Mongo

Demo: https://m.me/ptnkchat

Basic instruction

Deploy to Heroku using the deploy button.
Create a cluster on MongoDB Atlas. Whitelist IP addresses.
Create an app on Facebook. Install Webhook. Get app secret and tokens.
Set Heroku's Config Vars. Check here to know which variables you need to set.
Enjoy!

Features

Admin dashboard (code)
Pair by gender (e.g. male with female)
Send cute dog/cat pictures
Customizable message templates
Cache database in memory to increase performance
Developed with performance in mind

Planned features

Allow editing profile via Messenger Webview
Limiting rate of requests sent out to avoid being converted to high-MPS page

License

This project is licensed under the MIT License - see the LICENSE.md file for details

Credit

Nguyen Xuan Son (a.k.a Nui or @ngxson) for Chatbot CHN on which this project was originally based
Le…

View on GitHub

How I built it

PTNK Chatible is written in TypeScript, run on Node.js.

express is used to handle webhook events from Facebook.

phin is used to send messages to Facebook. I have tried many HTTP clients and found that phin suits me best. It's lightweight, fast, and supports async/await.

The database is the most interesting thing. Data is stored in MongoDB Atlas. mongoose is used to interact with MongoDB Atlas. However, MongoDB Atlas is slow. To work around this, I store the entire database in megahash, a super-fast C++ hash table with wrappers for Node.js.

I have plan to switch to a proper cache module. I'm considering node-cache.

For deployment, I use Heroku Hobby Dyno from GitHub Student Pack.

Final Thoughts

I want to express my gratitude to GitHub and Heroku. This project will be much harder to complete without them.