<!DOCTYPE html>
<html lang="ja">
<!--
Copyright (c) 2015 Kei Misawa
This software is released under the MIT License.
http://opensource.org/licenses/mit-license.php
-->
<head>
<meta charset="utf-8"/>
<title>零宽隐写</title>
</head>
<body>
<h1>具有零宽度字符的Unicode隐写</h1>
<div>
这是具有Unicode零宽度字符的纯文本隐写术。<br />
单词中插入零宽度字符。<br />
<br />
JavaScript library is below.<br />
<a href="http://330k.github.io/misc_tools/unicode_steganography.js">http://330k.github.io/misc_tools/unicode_steganography.js</a>
</div>
<hr style="width: 100%;" />
<h2>Text in Text Steganography Sample</h2>
<table style="width: 100%;">
<tr>
<td style="width: 45%; vertical-align: top;">
<div>
Original Text: <button id="input_clear_text">Clear</button> <span id="input_length_text"></span>
<textarea id="input_text" style="width: 100%; height: 150px;">The quick brown fox jumps over the lazy dog
1234567890.:,;(*!?')
いろはにほへと ちりぬるを
色は匂へど 散りぬるを</textarea>
</div>
<div>
Hidden Text: <button id="hidden_clear_text">Clear</button> <span id="hidden_length_text"></span>
<textarea id="hidden_text" style="width: 100%; height: 150px;">Where am I?</textarea>
</div>
</td>
<td style="width: 10%; text-align: center;">
<button id="encode_text">Encode »</button><br /><br />
<button id="decode_text">« Decode</button>
</td>
<td style="width: 45%; vertical-align: top;">
<div>
Steganography Text: <button id="output_clear_text">Clear</button> <span id="output_length_text"></span>
<textarea id="output_text" style="width: 100%; height: 300px;"></textarea><br />
<a id="download_stego_text_text" download="stego_text.txt">Download Stego Text as File</a>
</div>
</td>
</tr>
</table>
<hr style="width: 100%;" />
<h2>Binary in Text Steganography Sample</h2>
<table style="width: 100%;">
<tr>
<td style="width: 45%; vertical-align: top;">
<div>
Original Text: <button id="input_clear_binary">Clear</button> <span id="input_length_binary"></span>
<textarea id="input_binary" style="width: 100%; height: 200px;">The quick brown fox jumps over the lazy dog
1234567890.:,;(*!?')
いろはにほへと ちりぬるを
色は匂へど 散りぬるを</textarea>
</div>
<div>
Hidden Data (Please Select File < 50kB):
<input id="input_from_file" type="file" /><br /><br />
<a id="download_hidden_data" download="hidden_data">Download Hidden Data as File</a><br />
(Extension must be modified)
</div>
</td>
<td style="width: 10%; text-align: center;">
<button id="encode_binary">Encode »</button><br /><br />
<button id="decode_binary">« Decode</button>
</td>
<td style="width: 45%; vertical-align: top;">
<div>
Steganography Text: <button id="output_clear_binary">Clear</button> <span id="output_length_binary"></span>
<textarea id="output_binary" style="width: 100%; height: 300px;"></textarea><br />
<a id="download_stego_text_binary" download="stego_text.txt">Download Stego Text as File</a>
</div>
</td>
</tr>
<tr>
<td colspan="3">
Zero Width Characters for Steganography: <br />
<div id="used_chars"></div>
</td>
</tr>
</table>
<hr style="width: 100%;" />
<h2>Library Usage</h2>
<h3><code>unicodeSteganographer.encodeText(String, String)</code></h3>
<div>
<code>encodeSteganography</code> returns a stego String. The 1st argument is a String to be embedded, the 2nd argument is a String to be hidden.
</div>
<h3><code>unicodeSteganographer.encodeBinary(String, Uint8Array)</code></h3>
<div>
<code>encodeSteganography</code> returns a stego String which is embedded steganography of Uint8Array.
</div>
<h3><code>unicodeSteganographer.decodeText(String)</code></h3>
<div>
<code>decodeSteganography</code> returns a JavaScript Object: { originalText: original text (String), hiddenText: hidden text (String)}.
</div>
<h3><code>unicodeSteganographer.decodeBinary(String)</code></h3>
<div>
<code>decodeSteganography</code> returns a JavaScript Object: { originalText: original text (String), hiddenData: hidden data (Uint8Array)}.
</div>
<h3><code>unicodeSteganographer.setUseChars(String)</code></h3>
<div>
<code>setUseChars</code> sets the characters for steganography as a String.<br />
Default characters used for steganography are U+200C, U+200D, U+202C, and U+FEFF.<br />
U+200B(ZERO WIDTH SPACE) is deleted in Gmail when sending a mail from browsers.<br />
<br />
<h2>Supported Browsers</h2>
<ul>
<li>Chromium 45 (Ubuntu 14.04 LTS)</li>
<li>Firefox 42 (Ubuntu 14.04 LTS)</li>
<li>Edge (Windows 10)</li>
<li>Internet Explorer 11 (Windows 10) * Text in Text Only, Download as File doesn't work</li>
<li>Safari (iOS 9.1)</li>
<li>Chrome (Android 4.2)</li>
</ul>
</div>
</body>
<script type="text/javascript" src="unicode_steganography.js"></script>
<script>
'use strict';
// Encode/Decode Buttons
document.getElementById('encode_text').addEventListener('click', function(){
var text1 = document.getElementById('input_text').value;
var text2 = document.getElementById('hidden_text').value;
var stego = unicodeSteganographer.encodeText(text1, text2);
document.getElementById('output_text').value = stego;
var b = new Blob([stego], {type: 'text/plain'});
var bURL = URL.createObjectURL(b);
document.getElementById('download_stego_text_text').href = bURL;
});
document.getElementById('decode_text').addEventListener('click', function(){
var text1 = document.getElementById('output_text').value;
var result = unicodeSteganographer.decodeText(text1);
document.getElementById('input_text').value = result.originalText;
document.getElementById('hidden_text').value = result.hiddenText;
});
document.getElementById('encode_binary').addEventListener('click', function(){
var text1 = document.getElementById('input_binary').value;
var reader = new FileReader();
var blob;
if(typeof document.getElementById('input_from_file').files[0] !== 'undefined'){
blob = document.getElementById('input_from_file').files[0];
}else{
alert('Please select a file to be hidden');
return false;
}
reader.onload = function(){
var stego = unicodeSteganographer.encodeBinary(text1, new Uint8Array(reader.result));
var b = new Blob([stego], {type: 'text/plain'});
var bURL = URL.createObjectURL(b);
document.getElementById('download_stego_text_binary').href = bURL;
if(stego.length < 1000000){
document.getElementById('output_binary').value = stego;
}else{
document.getElementById('output_binary').value = 'Stego text is too long. Please download as a text file. (' + b.size + ' bytes)';
}
};
reader.readAsArrayBuffer(blob);
});
document.getElementById('decode_binary').addEventListener('click', function(){
var text1 = document.getElementById('output_binary').value;
var result = unicodeSteganographer.decodeBinary(text1);
document.getElementById('input_binary').value = result.originalText;
var blob = new Blob([result.hiddenData], {type: 'application/octet-binary'});
var blobURL = URL.createObjectURL(blob);
document.getElementById('download_hidden_data').href = blobURL;
});
// Clear Buttons
document.getElementById('input_clear_text').addEventListener('click', function(){
document.getElementById('input_text').value = '';
});
document.getElementById('hidden_clear_text').addEventListener('click', function(){
document.getElementById('hidden_text').value = '';
});
document.getElementById('output_clear_text').addEventListener('click', function(){
document.getElementById('output_text').value = '';
document.getElementById('download_stego_text_text').removeAttribute('href');
});
document.getElementById('input_clear_binary').addEventListener('click', function(){
document.getElementById('input_binary').value = '';
});
document.getElementById('output_clear_binary').addEventListener('cl
