728x90
============
decryption of JavaScript files
자바스크립트 파일 암호화 복호화
============
============
파일 암호화/복호화
============
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>파일 암호화/복호화</title>
<style>
body {
font-family: Arial, sans-serif;
line-height: 1.6;
margin: 0;
padding: 20px;
background-color: #f4f4f4;
}
.container {
max-width: 600px;
margin: auto;
background: white;
padding: 20px;
border-radius: 5px;
box-shadow: 0 0 10px rgba(0,0,0,0.1);
}
h1 {
text-align: center;
color: #333;
}
.file-input, .key-input {
margin-bottom: 20px;
}
.button-group {
display: flex;
justify-content: space-between;
margin-bottom: 20px;
}
button {
padding: 10px 20px;
border: none;
border-radius: 5px;
cursor: pointer;
font-size: 16px;
transition: background-color 0.3s;
}
#encryptBtn {
background-color: #4CAF50;
color: white;
}
#decryptBtn {
background-color: #f44336;
color: white;
}
#downloadEncryptedBtn, #downloadDecryptedBtn {
background-color: #2196F3;
color: white;
display: none;
margin-top: 10px;
}
#copyKeyBtn {
background-color: #FFC107;
color: black;
margin-left: 10px;
}
button:hover {
opacity: 0.8;
}
#result, #keyDisplay {
margin-top: 20px;
padding: 10px;
background-color: #e7e7e7;
border-radius: 5px;
word-break: break-all;
}
#keyInput {
width: calc(100% - 22px);
padding: 10px;
margin-top: 10px;
border: 1px solid #ddd;
border-radius: 5px;
}
.key-container {
display: flex;
align-items: center;
}
</style>
</head>
<body>
<div class="container">
<h1>파일 암호화/복호화</h1>
<div class="file-input">
<input type="file" id="fileInput">
</div>
<div class="key-input">
<input type="text" id="keyInput" placeholder="복호화를 위한 키를 입력하세요">
</div>
<div class="button-group">
<button id="encryptBtn">암호화</button>
<button id="decryptBtn">복호화</button>
</div>
<button id="downloadEncryptedBtn">암호화된 파일 다운로드</button>
<button id="downloadDecryptedBtn">복호화된 파일 다운로드</button>
<div class="key-container">
<div id="keyDisplay"></div>
<button id="copyKeyBtn" style="display: none;">키 복사</button>
</div>
<div id="result"></div>
</div>
<script>
// 키 생성 함수
async function generateKey() {
return await window.crypto.subtle.generateKey(
{ name: "AES-GCM", length: 256 },
true,
["encrypt", "decrypt"]
);
}
// 키를 문자열로 변환
async function exportKey(key) {
const exported = await window.crypto.subtle.exportKey("raw", key);
return btoa(String.fromCharCode.apply(null, new Uint8Array(exported)));
}
// 문자열을 키로 변환
async function importKey(keyString) {
const keyData = Uint8Array.from(atob(keyString), c => c.charCodeAt(0));
return await window.crypto.subtle.importKey(
"raw",
keyData,
{ name: "AES-GCM", length: 256 },
true,
["encrypt", "decrypt"]
);
}
// 파일 암호화 함수
async function encryptFile(file, key) {
const iv = window.crypto.getRandomValues(new Uint8Array(12));
const fileData = await file.arrayBuffer();
const encryptedContent = await window.crypto.subtle.encrypt(
{ name: "AES-GCM", iv: iv },
key,
fileData
);
const encryptedFile = new File([iv, encryptedContent], file.name + ".encrypted", { type: "application/octet-stream" });
return encryptedFile;
}
// 파일 복호화 함수
async function decryptFile(encryptedFile, key) {
const fileData = await encryptedFile.arrayBuffer();
const iv = fileData.slice(0, 12);
const encryptedContent = fileData.slice(12);
const decryptedContent = await window.crypto.subtle.decrypt(
{ name: "AES-GCM", iv: iv },
key,
encryptedContent
);
const decryptedFile = new File([decryptedContent], encryptedFile.name.replace(".encrypted", ""), { type: "application/octet-stream" });
return decryptedFile;
}
let encryptedFile = null;
let decryptedFile = null;
document.getElementById('encryptBtn').addEventListener('click', async () => {
const file = document.getElementById('fileInput').files[0];
if (!file) {
alert('파일을 선택해주세요.');
return;
}
const key = await generateKey();
encryptedFile = await encryptFile(file, key);
const keyString = await exportKey(key);
document.getElementById('keyDisplay').textContent = `암호화 키: ${keyString}`;
document.getElementById('keyInput').value = keyString; // 자동으로 키 입력
document.getElementById('result').textContent = `${file.name} 파일이 암호화되었습니다.`;
document.getElementById('downloadEncryptedBtn').style.display = 'block';
document.getElementById('downloadDecryptedBtn').style.display = 'none';
document.getElementById('copyKeyBtn').style.display = 'inline-block'; // 복사 버튼 표시
});
document.getElementById('decryptBtn').addEventListener('click', async () => {
const file = document.getElementById('fileInput').files[0];
const keyString = document.getElementById('keyInput').value;
if (!file) {
alert('파일을 선택해주세요.');
return;
}
if (!keyString) {
alert('복호화 키를 입력해주세요.');
return;
}
try {
const key = await importKey(keyString);
decryptedFile = await decryptFile(file, key);
document.getElementById('result').textContent = `${file.name} 파일이 복호화되었습니다.`;
document.getElementById('downloadDecryptedBtn').style.display = 'block';
document.getElementById('downloadEncryptedBtn').style.display = 'none';
} catch (error) {
alert('복호화에 실패했습니다. 올바른 파일과 키를 사용했는지 확인해주세요.');
console.error('Decryption error:', error);
}
});
document.getElementById('downloadEncryptedBtn').addEventListener('click', () => {
if (encryptedFile) {
downloadFile(encryptedFile);
} else {
alert('먼저 파일을 암호화해주세요.');
}
});
document.getElementById('downloadDecryptedBtn').addEventListener('click', () => {
if (decryptedFile) {
downloadFile(decryptedFile);
} else {
alert('먼저 파일을 복호화해주세요.');
}
});
document.getElementById('copyKeyBtn').addEventListener('click', () => {
const keyInput = document.getElementById('keyInput');
keyInput.select();
document.execCommand('copy');
alert('키가 클립보드에 복사되었습니다.');
});
function downloadFile(file) {
const url = URL.createObjectURL(file);
const a = document.createElement('a');
a.href = url;
a.download = file.name;
document.body.appendChild(a);
a.click();
document.body.removeChild(a);
URL.revokeObjectURL(url);
}
</script>
</body>
</html>============
1. 파일을 선택합니다.
2. '암호화' 버튼을 클릭하여 파일을 암호화합니다.
3. 생성된 암호화 키가 화면에 표시되고, 자동으로 복호화 키 입력 필드에 입력됩니다.
4. '키 복사' 버튼이 나타나며, 이를 클릭하여 키를 클립보드에 복사할 수 있습니다.
5. '암호화된 파일 다운로드' 버튼을 클릭하여 암호화된 파일을 다운로드할 수 있습니다.
6. 복호화를 위해, 암호화된 파일을 선택합니다. (키는 이미 입력되어 있습니다)
7. '복호화' 버튼을 클릭하여 파일을 복호화합니다.
8. '복호화된 파일 다운로드' 버튼을 클릭하여 복호화된 파일을 다운로드할 수 있습니다.
============
1. Select a file.
2. Click the 'Encrypt' button to encrypt the file.
3. The generated encryption key is displayed on the screen and automatically entered into the decryption key input field.
4. The 'Copy Key' button appears, which allows you to copy the key to the clipboard.
5. You can download an encrypted file by clicking the 'Download Encrypted File' button.
6. For decryption, select the encrypted file (key already entered)
7. Click the 'Decrypt' button to decrypt the file.
8. You can download the decrypted file by clicking the 'Download Decrypted File' button.
============
728x90
'javascript' 카테고리의 다른 글
| Vanilla JS URL Encoder Decoder 자바스크립트 URL 인코더 디코더 (0) | 2024.09.20 |
|---|---|
| Zip File Viewer Zip 파일 뷰어 (0) | 2024.09.16 |
| Verifying JavaScript File Information 자바스크립트 파일 정보 확인 (0) | 2024.09.16 |
| 다중 암호화 및 복호화 방식 비교 (ECB, CBC, CTR) (0) | 2024.09.16 |
| JavaScript Thumbnail Creator 이미지,영상 썸네일 생성하기 (0) | 2024.09.16 |
