-
Notifications
You must be signed in to change notification settings - Fork 1
/
index.html
143 lines (143 loc) · 7.66 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
<!DOCTYPE html>
<html>
<head>
<meta charset='UTF-8'>
<title>Doublespeak</title>
<meta name='viewport' content='width=device-width, initial-scale=1'>
<meta name='description' content='Encodes/decodes messages as zero-width Unicode characters in text, as a casual form of steganography. Optimized for real time chat.'>
<meta name='theme-color' content='#222'>
<meta property='og:title' content='Doublespeak'>
<meta property='og:type' content='website'>
<meta property='og:url' content='https://dblspk.io/'>
<meta property='og:image' content='https://dblspk.io/images/icon-192.png'>
<meta name='twitter:card' content='summary'>
<meta name='twitter:site' content='@joshuaptfan'>
<meta name='twitter:title' content='Doublespeak'>
<meta name='twitter:description' content='Encodes/decodes messages as zero-width Unicode characters in text, as a casual form of steganography. Optimized for real time chat.'>
<meta name='twitter:image' content='https://dblspk.io/images/icon-192.png'>
<link rel='icon' sizes='16x16 32x32 48x48' type='image/icon' href='favicon.ico'>
<link rel='icon' sizes='192x192' type='image/png' href='images/icon-192.png'>
<link rel='icon' sizes='any' type='image/svg+xml' href='images/icon.svg'>
<link rel='stylesheet' type='text/css' href='index.css'>
<link rel='manifest' href='manifest.json'>
<script src='https://cdnjs.cloudflare.com/ajax/libs/autolinker/1.4.3/Autolinker.min.js' defer></script>
<script src='lib/doublespeak.min.js' defer></script>
<script src='index.js' defer></script>
</head>
<body>
<div id='warn-ES6'>Please <a href='http://outdatedbrowser.com/' target='_blank' rel='noopener'>update your browser</a> to use this site.</div>
<noscript id='noscript'>Please enable JavaScript to use this site.</noscript>
<nav>
<label for='nav-main' class='selected' onclick='clickNav(this)'>Doublespeak</label>
<a href='https://github.com/dblspk/web-app' target='_blank' rel='noopener' tabindex='-1'>GitHub</a>
<label for='nav-faq' onclick='clickNav(this)'>FAQ</label>
</nav>
<input type='radio' name='nav' id='nav-main' checked>
<input type='radio' name='nav' id='nav-faq'>
<section id='main'>
<h1>ENCODE<label for='encode-options-button'>☰</label></h1>
<input type='checkbox' id='encode-options-button'>
<div id='encode-options'>
<div class='row'>
<textarea id='out-prepend' placeholder='Prepend' title='Add signature (e.g. name) before secret messages' tabindex='-1'></textarea>
<textarea id='out-append' placeholder='Append' title='Add signature (e.g. name) after secret messages' tabindex='-1'></textarea>
<input type='file' multiple id='files' onchange='readFiles(this.files)'>
<label for='files' title='Upload files'></label>
</div>
</div>
<div class='row'>
<textarea id='out-plain' placeholder='Type secret message' required autofocus></textarea>
<button class='button clear' onclick='clearOutPlain()' title='Clear' tabindex='-1'></button>
</div>
<div class='row'>
<div id='warn-size'>
<p>
<b>LARGE MESSAGE (<span id='warn-size-kb'></span> KB)</b><br>
May take a long time to paste, freezing or crashing applications.
</p>
</div>
</div>
<div class='row'>
<textarea id='out-cover' placeholder='Type cover message' required></textarea>
<button class='button clear' onclick='clearOut()' title='Clear' tabindex='-1'></button>
</div>
<div class='row'>
<textarea id='out-cipher' placeholder='Copy [Ctrl+C] encoded message' readonly></textarea>
<button class='button copy' id='copy-out' onclick='copyText()' title='Copy to clipboard' tabindex='-1'></button>
<div class='notify copied-div'>COPIED</div>
</div>
<h1>DECODE</h1>
<div class='row'>
<textarea id='in-cipher' maxlength='0' placeholder='Paste [Ctrl+V] to decode message' required></textarea>
<button class='button clear' onclick='clearIn()' title='Clear' tabindex='-1'></button>
</div>
<div class='row'>
<div id='in-plain'><div class='text-div' tabindex='-1'></div></div>
</div>
<div id='tip'>Press <span class='key'>Tab</span> to cycle through fields</div>
<div id='tab-loop'>
<button onfocus='textarea.outPlain.select()'></button>
</div>
</section>
<section id='faq'>
<h1>What is this?</h1>
<p>Hides/reveals secret messages in text. Optimized for instant messaging.</p>
<p>Messages are encoded as zero-width Unicode characters, as a casual form of <a href='https://en.wikipedia.org/wiki/Steganography' target='_blank' rel='noopener'>steganography</a>.</p>
<p>Install the <a href='https://chrome.google.com/webstore/detail/doublespeak/mochgllkkbafaoombocojfenmkbijhdb' target='_blank' rel='noopener'>Chrome extension</a> to automatically parse web pages for secret messages.</p>
<h1>Usage</h1>
<p><strong>Tab</strong> / <strong>Shift+Tab</strong> — cycle through fields</p>
<p>Drag and drop files onto page to encode.</p>
<h1>Possible uses</h1>
<p>What can be hidden:</p>
<ul>
<li>Text</li>
<li>URLs (similar use to <a href='https://en.wikipedia.org/wiki/QR_code' target='_blank' rel='noopener'>QR codes</a>)</li>
<li>Watermarks</li>
<li>Small files</li>
</ul>
<p>Possible places for storage:</p>
<ul>
<li>Chat messages</li>
<li>Social media posts</li>
<li>User profile information</li>
<li>Forums</li>
<li>HT︁︁︁ML</li>
<li>Emails</li>
<li>Digital documents</li>
<li>File names (very short messages only)</li>
</ul>
<h1>How does it work?</h1>
<p><a href='https://en.wikipedia.org/wiki/Unicode' target='_blank' rel='noopener'>Unicode</a> contains some zero-width, unprintable characters. We use 16 of them to encode any data in hexadecimal, using our
<a href='https://github.com/dblspk/web-app#how-it-works' target='_blank' rel='noopener'>arbitrary encoding scheme</a>.</p>
<p>The resulting string of invisible characters is then inserted at a random location in the cover text.</p>
<h1>Efficiency</h1>
<p>Each invisible character represents 4 bits, while taking 3 bytes (24 bits) to store. Thus, the hidden data consumes 6 times
as much memory as the original data, not including header data and cover text.</p>
<h1>Comparison to other steganography techniques</h1>
<p>Pros</p>
<ul>
<li>Produces no visible alteration in the text.</li>
<li>Can theoretically store a near-unlimited amount of data regardless of length of the cover text.</li>
<li>Can be used with applications that do not support file transfers.</li>
<li>Reduces suspicion by not requiring the frequent transfer of large files during communication.</li>
</ul>
<p>Cons</p>
<ul>
<li>Can be filtered or corrupted by applications that do not support Unicode, or that attempt to format user input.</li>
<li>Extremely easy to detect. Any digital text can be checked for the possible presence of a message by pasting it into a decoder,
or a text editor that displays non-printing characters. Large messages may create line breaks in some applications.</li>
</ul>
<p><strong>If you are serious about concealing your payload, you should use another form of steganography.</strong></p>
<p>As with any method of communication, security is only as good as the encryption applied. This only provides a casual level
of security through obscurity.</p>
</section>
<div id='drop-target' ondrop='dropFiles(event)' onclick='dragLeaveFiles()'></div>
<script type='text/javascript'>
try {
eval('"use strict"; let test = () => 0');
} catch (e) {
document.getElementById('warn-ES6').style.display = 'block';
}
</script>
</body>
</html>