VIGENERE CIPHER

Deskripsi vigenere cipher

Vigenère Cipher adalah metode menyandikan teks alfabet

dengan menggunakan deretan sandi Caesar berdasarkan huruf-
huruf pada kata kunci. Vigenère Cipher merupakan bentuk
sederhana dari sandi substitusi polialfabetik. Kelebihan sandi ini
disbanding sandi Caesar dan sandi monoalfabetik lainnya adalah
sandi ini tidak begitu rentan terhadap metode pemecahan sandi
yang disebut analisis frekuensi. Vigenère Cipher merupakan cipher
abjad majemuk yang paling dikenal karena menghasilkan banyak
varian atau cipher turunan seperti Beaufort, Gronsfeld, Porta, dan
sebagainya. Giovan Batista Belaso menjelaskan metode ini dalam
buku La cifra del. Sig. Giovan Batista Belaso (1553); dan
disempurnakan oleh diplomat Perancis Blaise de Vigenère, pada
1586. Vigenère menuliskan hasil penemuannya dalam buku/traktat
yang berjudul “Traicte des Chiffres” Pada abad ke-19, banyak orang
yang mengira Vigenère adalah penemu sandi ini, sehingga, sandi ini
dikenal luas sebagai "Vigenère Cipher". Sandi ini dikenal luas karena
cara kerjanya mudah dimengerti dan dijalankan, dan bagi para
pemula sulit dipecahkan. Pada saat kejayaannya, sandi ini dijuluki le
chiffre indéchiffrable (bahasa Prancis: 'sandi yang tak terpecahkan').
Metode pemecahan sandi ini baru ditemukan pada abad
ke-19. Pada tahun 1854, Charles Babbage menemukan cara untuk
memecahkan sandi Vigenère. Metode ini dinamakan tes Kasiski
karena Friedrich Kasiski-lah yang pertama mempublikasikannya.
Vigènere Cipher digunakan oleh tentara konfederasi (Confederate
Army) pada Perang Sipil Amerika (American Civil War). Perang Sipil
terjadi setelah Vigènere Cipher berhasil dipecahkan. Hal ini
diilustrasikan oleh kutipan pernyataan Jenderal Ulysess S. Grant: “It
would sometimes take too log to make translation of intercepted
dispatches for us to receive any benefit from them, but sometimes
they gave useful information”. Sandi Vigenère sebenarnya
merupakan pengembangan dari sandi Caesar. Pada sandi Caesar,
setiap huruf teks terang digantikan dengan huruf lain yang memiliki
perbedaan tertentu pada urutan alfabet. Misalnya pada sandi
Caesar dengan geseran 3, A menjadi D, B menjadi E and dan
seterusnya. Sandi Vigenère terdiri dari beberapa sandi Caesar
dengan nilai geseran yang berbeda. Untuk menyandikan suatu
pesan, digunakan sebuah tabel alfabet yang disebut table Vigenère.
Tabel Vigenère berisi alfabet yang dituliskan dalam 26 baris,
masing-masing baris digeser satu urutan ke kiri dari baris
sebelumnya, membentuk ke-26 kemungkinan sandi Caesar. Setiap
huruf disandikan dengan menggunakan baris yang berbeda-beda,
sesuai kata kunci yang diulang

Cara Enkripsi dan Dekripsi Vigenere Cipher

Kita bisa melakukan proses enkripsi vigenere cipher secara manual
menggunakan 2 cara, yaitu
1. Menggunakan tabel yang disebut TABULA RECTA
2. Menggunakan penjumlahan index plain text dan index key

1. Cara Enkripsi dan Dekripsi Vigenere Cipher

Menggunakan Tabula Recta
 Gambar 1. Bujur Sangkar Vigenère

Misalnya, teks terang yang hendak disandikan adalah perintah

"PANGERAN", sedangkan kata kunci antara pengirim dan tujuan
adalah "RASA". Huruf pertama pada plainteks P, disandikan
dengan menggunakan baris berjudul R, huruf pertama pada kata
kunci. Pada baris R dan kolom P di tabel Vigenère, terdapat huruf G.
Demikian pula untuk huruf kedua, digunakan huruf yang terletak
pada baris A (huruf kedua kata kunci) dan kolom A (huruf kedua
plainteks), yaitu huruf A. Proses ini dijalankan terus sehingga akan
didapatkan : Plainteks : PANGERAN
Kunci : RASARASA Cipherteks : GAFGVRSN.
Proses sebaliknya (disebut dekripsi), dilakukan :
1. Tempatkan alphabet kunci pada sisi kiri tabel berdasarkan
baris.
2. Telusuri sepanjang baris tersebut hingga ditemukan alphabet
ciphertext.
 3. Index kolom lokasi alphabet ciphertext berada merupakan
alphabet plaintext

Berdasarkan contoh diatas, diketahui

Ciphertext : GAFGVRSN
Key : RASARASA

2. Cara Enkripsi dan Dekripsi Vigenere Cipher

Menggunakan Penjumlahan Index
Misalkan kita memiliki teks yang ingin kita enkripsi “PANGERAN”,
metode yang akan kita pakai adalah dengan menggunakan
penjumlahan indeks plain text dan index key
Sebagai contoh key yang kita pakai adalah “RASARASA”,

Plaint P A N G E R A N
ext
Key R A S A R A S A
proses berikutnya, kita ubah key nya jadi index hurufnya, yang
nantinya akan kita tambahkan ke index plaintextnya (A = 0 sampai
dengan Z = 25)

Plaintext P A N G E R A N
Index Plaintext 1 0 1 6 4 1 0 1
5 3 7 3
Key R A S A R A S A
Index Key 1 0 1 0 1 0 1 0
7 8 7 8
(Plaintext + key) 6 0 5 6 2 1 1 1
mod 26 1 7 8 3
Cipher Text G A F G V R S N

Sedangkan untuk dekripsi nya, kita tinggal membalikkan saja :

Cipher Text G A F G V R S N
Index Plaintext 6 0 5 6 2 1 1 1
1 7 8 3
Key R A S A R A S A
Index Key 1 0 1 0 1 0 1 0
7 8 7 8
(Plaintext - key) 1 0 1 6 4 1 0 1
mod 26 5 3 7 3
Cipher Text P A N G E R A N

Aplikasi Vigenere Cipher Menggunakan JAVA SCRIPT

1. Enkripsi
2. Dekripsi

Source Code Javascript

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Vigenere Cipher</title>
<style type="text/css">
<!--
html, body, div,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
font, img,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-weight: inherit;
font-style: inherit;
font-size: 100%;
font-family: inherit;
vertical-align: baseline;
}
/* remember to define focus styles! */
:focus {
outline: 0;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}

html {
background: #63bad8 50% 0px repeat-x;
text-align: center;
}

body {
text-align: center;
font: 12px 'Lucida Grande',lucida,helvetica,arial,sans-serif;
color: #333333;
padding: 0px;
margin: 0 auto;
width: 840px;
}

#wrappertop{
width: 800px;
height: 10px;
padding: 0 20px 0 20px;
margin-top: 10px;
}

#wrapperbottom{
width: 800px;
height: 10px;
padding: 0 20px 0 20px;
margin-bottom: 10px;
}

#wrapper{
width: 800px;
padding: 0 20px 0 20px;
position: relative;
}

#content{
width: 800px;
background-color: #fff;
 text-align: left;
}
#darkbannerwrap{
background: url(../images/aiwrap.png);
width: 18px;
height: 10px;
margin: 0 0 20px -18px;
position: relative;
}
#header {
width: 780px;
background: #c5e6ea;
padding: 15px 0 15px 20px;
border-bottom: #b2ccd0 solid 1px;
text-align: center;
}

#result_layout {
color: #00529B;
width: 450px;
background: #c5e6ea;
padding: 15px;
border-bottom: #b2ccd0 solid 1px;
text-align: center;
position: relative;
top: 50px;
margin-left: 20px;
visibility: hidden;
}

h1{
margin-top: 15px;
display: inline;
width: 220px;
font: 16px 'Lucida Grande', arial, sans-serif;
font-weight: bold;
}
body#login {
width: 475px;
}
body#login #wrapper{
width: 370px;
padding: 0 20px 0 20px;
}
body#login #content{
width: 370px;
}
body#login #header {
width: 450px;
}
body#login fieldset{
width: 430px;
border: 0;
margin: 0px;
display: block;
margin-top: -30px;
background-color: #fff;
padding-top: 20px;
}
body#login label{
float: left;
text-align: left;
width: 70px;
font-weight: bold;
margin-right: 10px;
padding-top: 7px;
}
body#login input{
height: 20px;
width: 150px;
margin-bottom: 15px;
padding: 3px;
font: 12px 'Lucida Grande', arial, sans-serif;
}
body#login .form button{
display:block;
float:left;
margin:0 3px 0 80px;
margin-left: 175px;
}

fieldset{
background-color: #eaf6f7;
border-top: 2px solid #acdbe1;
border-bottom: 2px solid #acdbe1;
margin: 20px;
padding: 20px;
display: block;
*position: relative;
*margin-top:20px;
*padding-top:40px;
}
label{
float: left;
text-align: left;
width: 150px;
font-weight: bold;
margin-right: 10px;
padding-top: 7px;
}
input{
height: 20px;
width: 300px;
margin-bottom: 15px;
padding: 3px;
font: 12px 'Lucida Grande', arial, sans-serif;
}
select{
height: 30px;
width: 120px;
margin-bottom: 15px;
padding: 3px;
font: 12px 'Lucida Grande', arial, sans-serif;
}
textarea{
height: 100px;
width: 300px; margin-bottom: 15px;
padding: 3px;
font: 12px 'Lucida Grande', arial, sans-serif;
}
.form button{
display:block;
float:left;
margin:0 7px 0 160px;
background-color:#92c97c;
border:1px solid #73b35a;
font-family:"Lucida Grande", Tahoma, Arial, Verdana, sans-serif;
font-size:100%;
line-height:130%;
text-decoration:none;
font-weight:bold;
color:#e8f7df;
cursor:pointer;
padding:5px 10px 6px 7px; /* Links */
}
.form button{
width:auto;
overflow:visible;
padding:4px 10px 3px 7px; /* IE6 */
}
.form button[type]{
padding:5px 10px 5px 7px; /* Firefox */
line-height:17px; /* Safari */
}

*:first-child+html button[type]{
padding:4px 10px 3px 7px; /* IE7 */
}
.form button img, .buttons a img{
margin:0 6px -3px 0 !important;
padding:0;
border:none;
width:16px;
height:16px;
text-decoration: none;
}
button:hover{
background-color:#e8f7df;
border:1px solid #92c97c;
color:#31940c;
}
.buttons a:active{
background-color:#e8f7df;
border:1px solid #92c97c;
color:#31940c;
}

-->
</style>
<script language='Javascript'>
function disableEnter(evt) {
var evt = (evt) ? evt : ((event) ? event : null);
var node = (evt.target) ? evt.target : ((evt.srcElement) ?
evt.srcElement : null);
if ((evt.keyCode == 13) && (node.type=="text")) {return false;}
}
document.onkeypress = disableEnter;

function Vigenere (input,key,mode)

{
if (key == null)
key = "";
var alphabet = "ABCDEFGHIJKLMNOPQRSTUVWXYZ"
+ "abcdefghijklmnopqrstuvwxyz";

// Validate key:
key = key.toUpperCase();
var key_len;
var i;
var adjusted_key = "";
var key_char;
for (i=0; i<key.length; i++)
{
key_char = alphabet.indexOf(key.charAt(i));
if (key_char < 0)
continue;
adjusted_key += alphabet.charAt(key_char);
}
key = adjusted_key;
key_len = key.length;
if (key_len == 0)
{
 alert ('You forgot to supply a key!');
key = "a";
key_len = 1;
}

// Transform input:
var output = "";
var key_index = 0;
var in_tag = false;
for (i=0; i<input.length; i++)
{
if ( input[i] == " " )
{
continue;
}
var input_char = input.charAt(i);
if (input_char == "<")
in_tag = true;
else if (input_char == ">")
in_tag = false;
if (in_tag)
{
output += input_char;
continue;
}
var input_char_value = alphabet.indexOf(input_char);
if (input_char_value < 0)
{
output += input_char;
continue;
}
var lowercase = input_char_value >= 26 ? true : false;
if (mode=='1')
input_char_value += alphabet.indexOf
(key.charAt(key_index));
else
input_char_value -= alphabet.indexOf
(key.charAt(key_index));
input_char_value += 26;
if (lowercase)
input_char_value = input_char_value % 26 + 26;
else
input_char_value %= 26;
output += alphabet.charAt(input_char_value);
key_index = (key_index+1)%key_len;

}
return output;
}

function processData()
{
var plainText = document.getElementById('p_text').value;
var key = document.getElementById('key').value;
var mode = document.getElementById('mode').value;

var hasil = Vigenere(plainText,key,mode);

document.getElementById('result_layout').style.visibility='visible';
document.getElementById('result_layout').innerHTML=hasil;
}

</script>
</head>
<body id="login">
<div id="wrappertop"></div>
<div id="wrapper">
<div id="content">
 <div id="header">
<h1>Vigenere Cipher</h1>
</div>
<div id="darkbannerwrap"> </div>
<form name="form1" method="post">
<fieldset class="form">
<p><label for="p_text">Teks</label><textarea
id="p_text"></textarea></p>
<p><label for="key">Kata Kunci</label><input name="key" id="key"
type="text"></p>
<p><label for="mode">Mode</label>
<select name="mode" id="mode">
<option value="1" selected>Encrypting</option>
<option value="2">Decrypting</option>
</select>
</p>
<button type="button" class="positive" name="btn_process"
id="btn_process" onClick="processData();" value="Process">
Process</button>
</fieldset>
</form>
</div>
</div>
<div id="result_layout"></div>
</body>
</html>