여러분, 오늘은 웹 페이지에서 간단하게 텍스트를 암호화하고 복호화하는 방법을 자세히 소개하고자 합니다. JavaScript와 CryptoJS 라이브러리를 활용하여 이를 구현할 예정이니, 코드에 대한 간략한 해설을 통해 어떻게 작동하는지 살펴보겠습니다.
암호화 및 복호화
=========
CryptoJS는 웹 애플리케이션에서 사용할 수 있는 JavaScript 기반의 암호화 라이브러리입니다.
이 라이브러리를 통해 개발자들은 간단하게 텍스트를 암호화하거나 복호화할 수 있고, 해시 함수를 사용하여 데이터의 무결성을 검사할 수 있습니다.
CryptoJS는 다양한 암호화 기술을 지원하는데, 예를 들어 AES(Advanced Encryption Standard), DES(Data Encryption Standard), RSA 등이 있습니다. 또한 SHA-1, SHA-256과 같은 해시 알고리즘도 제공합니다.
사용하는 이유
보안성: 웹에서 정보를 주고받을 때 중요한 정보는 노출되지 않도록 암호화 처리가 필수적입니다.
예를 들어, 사용자의 비밀번호나 개인정보 등을 데이터베이스에 저장하거나, 인터넷을 통해 전송할 때 암호화하여 보안을 강화할 수 있습니다.
편리성: CryptoJS는 복잡한 암호화 알고리즘을 쉽게 구현할 수 있도록 도와줍니다.
JavaScript로 작성되었기 때문에 웹 브라우저에서 바로 사용할 수 있고, 별도의 서버 사이드 처리 없이 클라이언트 사이드에서 직접 암호화와 복호화를 처리할 수 있습니다.
주요 기능
암호화 및 복호화: 텍스트를 안전하게 암호화하고, 필요할 때 복호화하여 원래의 데이터를 얻을 수 있습니다.
해시 생성: 데이터의 해시 값을 생성하여, 데이터가 변경되었는지 아닌지를 확인할 수 있습니다. 해시는 데이터의 지문과 같은 것으로, 원본 데이터에 조금의 변경만 있어도 해시 값이 크게 달라집니다.
<script src="https://cdnjs.cloudflare.com/ajax/libs/crypto-js/4.1.1/crypto-js.js"></script>
// AES 암호화 예시
var encrypted = CryptoJS.AES.encrypt('안녕하세요', '시크릿키');
console.log(encrypted.toString());
// AES 복호화 예시
var decrypted = CryptoJS.AES.decrypt(encrypted, '시크릿키');
console.log(decrypted.toString(CryptoJS.enc.Utf8));
CryptoJS는 사용하기 쉽고, 효과적인 암호화 솔루션을 제공하여 웹 애플리케이션의 보안을 강화할 수 있게 도와줍니다. 보안이 중요한 웹 사이트나 애플리케이션에서 데이터 보호를 위해 널리 사용됩니다.
=========
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>암호화 및 복호화</title>
<link rel="stylesheet" href="style.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/crypto-js/4.1.1/crypto-js.js"></script>
</head>
<body>
<div class="container">
<h1>암호화 및 복호화</h1>
<div class="form-section">
<input type="text" id="secretKey" placeholder="시크릿 키 입력">
<input type="text" id="dataToEncrypt" placeholder="암호화할 문자">
<button id="encryptButton">암호화</button>
<div id="encryptedResult"></div>
</div>
<div class="form-section">
<input type="text" id="dataToDecrypt" placeholder="복호화할 데이터">
<button id="decryptButton">복호화</button>
<div id="decryptedResult"></div>
</div>
</div>
<script src="app.js"></script>
</body>
</html>/* style.css */
body, html {
padding: 0;
margin: 0;
font-family: Arial, sans-serif;
}
.container {
max-width: 600px;
margin: auto;
padding: 20px;
}
.form-section {
margin-bottom: 20px;
}
input[type="text"] {
width: calc(100% - 22px);
padding: 10px;
margin-bottom: 10px;
}
button {
width: 100%;
padding: 10px;
background-color: #007BFF;
color: white;
border: none;
cursor: pointer;
}
button:hover {
background-color: #0056b3;
}
#encryptedResult, #decryptedResult {
color: #D63384;
margin-top: 10px;
}// app.js
document.addEventListener('DOMContentLoaded', function() {
// DOM 요소 참조
const secretKeyInput = document.getElementById('secretKey');
const dataToEncryptInput = document.getElementById('dataToEncrypt');
const encryptedResultDisplay = document.getElementById('encryptedResult');
const dataToDecryptInput = document.getElementById('dataToDecrypt');
const decryptedResultDisplay = document.getElementById('decryptedResult');
// 암호화 처리 함수
function handleEncryption() {
const secretKey = secretKeyInput.value;
console.log(secretKey);
const dataToEncrypt = dataToEncryptInput.value;
const encryptedData = CryptoJS.AES.encrypt(CryptoJS.enc.Utf8.parse(dataToEncrypt), secretKey, {
mode: CryptoJS.mode.ECB,
padding: CryptoJS.pad.Pkcs7
});
const encryptedText = encryptedData.toString();
encryptedResultDisplay.textContent = '암호화 결과: ' + encryptedText;
dataToDecryptInput.value = encryptedText; // 암호화된 데이터를 복호화 입력 필드에 설정
}
// 복호화 처리 함수
function handleDecryption() {
const secretKey = secretKeyInput.value;
const encryptedData = dataToDecryptInput.value;
try {
const decryptedBytes = CryptoJS.AES.decrypt(encryptedData, secretKey, {
mode: CryptoJS.mode.ECB,
padding: CryptoJS.pad.Pkcs7
});
const decryptedText = decryptedBytes.toString(CryptoJS.enc.Utf8);
if (!decryptedText) throw new Error('복호화 실패');
decryptedResultDisplay.textContent = '복호화 결과: ' + decryptedText;
} catch (e) {
decryptedResultDisplay.textContent = e.message;
}
}
// 이벤트 리스너 설정
document.getElementById('encryptButton').addEventListener('click', handleEncryption);
document.getElementById('decryptButton').addEventListener('click', handleDecryption);
});
코드 구성 요소
DOM 요소 참조:
웹 페이지에서 필요한 입력 필드와 결과를 표시할 공간들을 불러옵니다. 예를 들어, 사용자가 텍스트와 암호화 키를 입력할 수 있는 입력란과, 암호화 또는 복호화 결과를 보여줄 텍스트 공간을 설정합니다.
키 파싱 함수 (parseKey):
사용자가 입력한 비밀 키를 받아서 CryptoJS 라이브러리가 사용할 수 있는 형태로 변환합니다. 이 과정에서 UTF-8 형식으로 인코딩하여 암호화 과정에서 사용될 키로 만들어줍니다.
암호화 처리 함수 (handleEncryption):
사용자가 입력한 데이터를 받아서 앞서 만든 비밀 키를 사용하여 암호화합니다. 암호화된 데이터는 Base64 형식의 문자열로 변환되어 화면에 표시됩니다. 또한, 이 암호화된 텍스트를 복호화할 수 있도록 복호화 필드에도 자동으로 입력됩니다.
복호화 처리 함수 (handleDecryption):
암호화된 데이터를 복호화 필드에서 읽어와서 같은 키를 사용하여 원래의 텍스트로 복호화합니다. 복호화가 성공하면 결과를 화면에 표시하고, 실패할 경우 오류 메시지를 표시합니다.
이벤트 리스너 설정:
암호화 버튼과 복호화 버튼에 클릭 이벤트를 각각 연결하여, 버튼을 클릭하면 해당 함수가 실행되도록 합니다.
작동 방식
웹 페이지에서 사용자는 텍스트와 비밀 키를 입력합니다. '암호화' 버튼을 클릭하면 해당 텍스트는 비밀 키를 사용하여 안전하게 암호화되고, 그 결과가 복호화 입력란에 자동으로 채워집니다. 이후 '복호화' 버튼을 누르면, 암호화된 텍스트가 다시 원래의 텍스트로 복원되어 화면에 표시됩니다.
이런 식으로 간단하게 웹 페이지에서 텍스트의 암호화 및 복호화를 수행할 수 있습니다. 코드를 통해 보안이 중요한 데이터를 처리할 때 얼마나 쉽게 암호화와 복호화를 할 수 있는지 확인할 수 있습니다.
=========
'javascript' 카테고리의 다른 글
| 다중 암호화 및 복호화 방식 비교 (ECB, CBC, CTR) (0) | 2024.09.16 |
|---|---|
| JavaScript Thumbnail Creator 이미지,영상 썸네일 생성하기 (0) | 2024.09.16 |
| 자바스크립트로 이미지 암호화 복호화 하기 (0) | 2024.08.26 |
| 자바스크립트(Javascript)로 태그 추가해보기 (0) | 2024.08.23 |
| JavaScript랑 Node.js랑 서로 통신하기 (0) | 2023.10.08 |
