77 lines
2.1 KiB
HTML
77 lines
2.1 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title>Title</title>
|
|
</head>
|
|
<body>
|
|
<form id="form">
|
|
<div>
|
|
<span>이름</span> <input name="username" type="text"/>
|
|
</div>
|
|
<div>
|
|
<span>나이</span> <input name="age" type="text"/>
|
|
</div>
|
|
<div>
|
|
<button type="button" onclick="btn()">등록</button>
|
|
</div>
|
|
</form>
|
|
</body>
|
|
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/crypto-js/4.1.1/crypto-js.min.js"></script>
|
|
<script>
|
|
const btn = () => {
|
|
const key = "example";
|
|
const sha256 = CryptoJS.SHA256(key);
|
|
const url = "http://localhost:8080"
|
|
fetch(url, {
|
|
method: "POST",
|
|
headers: {
|
|
"Content-Type": "application/json",
|
|
},
|
|
body: encrypt(sha256)
|
|
})
|
|
.then(resp => resp.text())
|
|
.then(data => {
|
|
console.log(data);
|
|
decrypt(data, sha256);
|
|
});
|
|
|
|
}
|
|
|
|
const encrypt = (sha256) => {
|
|
let form = document.querySelector('#form');
|
|
let formData = new FormData(form);
|
|
let obj = {};
|
|
for (let key of formData.keys()) {
|
|
obj[key] = formData.get(key);
|
|
}
|
|
let iv = Math.random().toString(36).substring(2, 10) + Math.random().toString(36).substring(2, 10);
|
|
let string = CryptoJS.AES.encrypt(
|
|
JSON.stringify(obj),
|
|
sha256,
|
|
{
|
|
iv: CryptoJS.enc.Utf8.parse(iv),
|
|
mode: CryptoJS.mode.CBC,
|
|
padding: CryptoJS.pad.Pkcs7,
|
|
},
|
|
).toString();
|
|
return iv + string;
|
|
}
|
|
|
|
const decrypt = (data, sha256) => {
|
|
const iv = data.substring(0, 16);
|
|
const content = data.substring(16);
|
|
|
|
let result = CryptoJS.AES.decrypt(
|
|
content,
|
|
sha256,
|
|
{
|
|
iv: CryptoJS.enc.Utf8.parse(iv),
|
|
padding: CryptoJS.pad.Pkcs7,
|
|
}
|
|
).toString(CryptoJS.enc.Utf8);
|
|
|
|
console.log(JSON.parse(result));
|
|
}
|
|
</script>
|
|
</html> |