Как зашифровать сообщение в aes256 на чистом JavaScript?

151

17 ноября 2018, 22:40

Охота зашифровать сообщение в AES256. Допустим есть ключ и есть сообщение. Причем охота сделать это средствами JS (не NodeJS, не PHP, не что то еще. для остального решения есть)

Вопрос: как такое реализовать?

p.s. гуглил. То ли у меня гугль ищет решения только на NodeJS толи я не умею искать.

p.p.s. еслиу кого ссылка с примером - прошу, поделитесь

Answer 1

Взято с jsfiddle

$(document).ready(function () { 
    // encrypt listener 
    $('#encryptBtn').click(function () { 
        var t = new Date(); 
        var ciphertext = Aes.Ctr.encrypt($('#plaintext').val(), $('#password').val(), 256); 
        $('#encrypt-time').html(((new Date() - t)) + 'ms'); 
        $('#cipher').val(ciphertext); 
    }); 
 
    // decrypt listener 
    $('#decryptBtn').click(function () { 
        var t = new Date(); 
        var plain = Aes.Ctr.decrypt($('#cipher').val(), $('#password').val(), 256); 
        $('#decrypt-time').html(((new Date() - t)) + 'ms'); 
        $('#plaintext').val(plain); 
    }); 
 
 
    $('#plaintextDiv .clear').click(function () { 
        $('#plaintext').val(""); 
    }); 
    $('#cipherDiv .clear').click(function () { 
        $('#cipher').val(""); 
    }); 
 
 
});

.panel button.pull-right { 
    margin-right: 1em; 
} 
.panel button.pull-left { 
    margin-left: 1em; 
} 
textarea{ 
    font-family: monospace; 
}

<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"> 
<script type="text/javascript" src="https://rawgit.com/victornpb/f639f37373be0f6e82e1/raw/5d8f7ee8b32ae04de087d2377d8086e3389ee411/AES.js"></script> 
<script type="text/javascript" src="//code.jquery.com/jquery-2.1.3.js"></script> 
<div class="container"> 
     <h1>AES-256</h1>  
    <div class="form-group"> 
        <label for="password">Password</label> 
        <input id="password" type="text" class="form-control" placeholder="1234" value="1234"> 
    </div> 
</div> 
<div id="plaintextDiv" class="col-md-6"> 
    <div class="panel panel-default"> 
        <div class="panel-heading"> 
            <div class="row"> 
                 <h3 class="panel-title text-center">Plain text</h3> 
 
            </div> 
            <div class="row text-center"> 
                <div class="btn-group" role="group" aria-label="..."> 
                    <button class="clear btn btn-default">Clear</button> 
                    <button class="copy btn btn-default">Copy</button> 
                    <button class="paste btn btn-default">Paste</button> 
                </div> 
            </div> 
        </div> 
        <div class="panel-body"> 
            <textarea id="plaintext" class="form-control" rows="10">Hello World!</textarea> 
        </div> 
    </div> 
</div> 
<div id="cipherDiv" class="col-md-1 text-center"> 
    <div class="row"> 
        <button id="encryptBtn" class="btn btn-primary ">Encrypt <i class="glyphicon glyphicon-triangle-right"></i></button> 
    </div> 
    <div class="row"> 
        <button id="decryptBtn" class="btn btn-primary "><i class="glyphicon glyphicon-triangle-left"></i> Decrypt</button> 
    </div> 
</div> 
<div id="cipherDiv" class="col-md-5"> 
    <div class="panel panel-default"> 
        <div class="panel-heading"> 
            <div class="row"> 
                 <h3 class="panel-title text-center">Cipher</h3> 
 
            </div> 
            <div class="row text-center"> 
                <div class="btn-group" role="group" aria-label="..."> 
                    <button class="clear btn btn-default">Clear</button> 
                    <button class="copy btn btn-default">Copy</button> 
                    <button class="paste btn btn-default">Paste</button> 
                </div> 
            </div> 
        </div> 
        <div class="panel-body"> 
            <textarea id="cipher" class="form-control" rows="10"></textarea> 
        </div> 
    </div> 
</div>