๊ฐ๋ฐ์๊ฐ ์์์ผ ํ ์ธ์ฝ๋ฉ ๊ธฐ์ด
์น ๊ฐ๋ฐ์์ ๋ฐ์ดํฐ๋ฅผ ์์ ํ๊ณ ํจ์จ์ ์ผ๋ก ์ ์กํ๊ณ ์ ์ฅํ๊ธฐ ์ํด ๋ค์ํ ์ธ์ฝ๋ฉ ๋ฐฉ์์ ์ฌ์ฉํฉ๋๋ค. ์ฃผ์ ์ธ์ฝ๋ฉ ๋ฐฉ์๋ค์ ์์๋ณด๊ฒ ์ต๋๋ค.
1. Base64 ์ธ์ฝ๋ฉ
๊ฐ๋
๋ฐ์ด๋๋ฆฌ ๋ฐ์ดํฐ๋ฅผ ASCII ๋ฌธ์์ด๋ก ๋ณํํ๋ ์ธ์ฝ๋ฉ ๋ฐฉ์์ ๋๋ค.
ํน์ง
- 64๊ฐ์ ์์ ํ ASCII ๋ฌธ์ ์ฌ์ฉ (A-Z, a-z, 0-9, +, /)
- ๋ฐ์ด๋๋ฆฌ ๋ฐ์ดํฐ๋ฅผ ํ ์คํธ๋ก ๋ณํ
- ์ด๋ฉ์ผ ์ฒจ๋ถํ์ผ, ์น์์ ์ด๋ฏธ์ง ์ ์ก์ ์ฃผ๋ก ์ฌ์ฉ
์ฌ์ฉ ์์
// ์ธ์ฝ๋ฉ
const text = "Hello World!";
const encoded = btoa(text);
console.log(encoded); // "SGVsbG8gV29ybGQh"
// ๋์ฝ๋ฉ
const decoded = atob(encoded);
console.log(decoded); // "Hello World!"
2. URL ์ธ์ฝ๋ฉ
๊ฐ๋
URL์์ ์์ ํ์ง ์์ ๋ฌธ์๋ฅผ ํผ์ผํธ ์ธ์ฝ๋ฉ์ผ๋ก ๋ณํํ๋ ๋ฐฉ์์ ๋๋ค.
ํน์ง
- ํน์๋ฌธ์, ๊ณต๋ฐฑ, ์ ๋์ฝ๋ ๋ฌธ์๋ฅผ %XX ํํ๋ก ๋ณํ
- URL ํ๋ผ๋ฏธํฐ ๊ฐ์ ์ฃผ๋ก ์ฌ์ฉ
- encodeURIComponent()์ encodeURI() ํจ์ ์ฌ์ฉ
์ฌ์ฉ ์์
// URL ์ปดํฌ๋ํธ ์ธ์ฝ๋ฉ (๊ถ์ฅ)
const param = "Hello World!";
const encoded = encodeURIComponent(param);
console.log(encoded); // "Hello%20World%21"
// ์ ์ฒด URL ์ธ์ฝ๋ฉ
const url = "https://example.com/search?q=hello world";
const encodedUrl = encodeURI(url);
console.log(encodedUrl); // "https://example.com/search?q=hello%20world"
3. HTML ์ํฐํฐ ์ธ์ฝ๋ฉ
๊ฐ๋
HTML์์ ํน์๋ฌธ์๋ฅผ ์์ ํ๊ฒ ํ์ํ๊ธฐ ์ํ ์ธ์ฝ๋ฉ์ ๋๋ค.
์ฃผ์ ์ํฐํฐ
- < โ <
- > โ >
- & โ &
- " โ "
- ' โ '
์ฌ์ฉ ์์
<!-- ์ฌ์ฉ์ ์
๋ ฅ์ ์์ ํ๊ฒ ํ์ -->
<p><script>alert('XSS')</script></p>
4. JSON ์ธ์ฝ๋ฉ
๊ฐ๋
JavaScript ๊ฐ์ฒด๋ฅผ JSON ๋ฌธ์์ด๋ก ๋ณํํ๋ ๋ฐฉ์์ ๋๋ค.
ํน์ง
- ๋ฐ์ดํฐ ๊ตํ์ ๋๋ฆฌ ์ฌ์ฉ
- UTF-8 ์ธ์ฝ๋ฉ ์ฌ์ฉ
- ์ค์ฒฉ๋ ๊ฐ์ฒด์ ๋ฐฐ์ด ์ง์
์ฌ์ฉ ์์
const data = {
name: "ํ๊ธธ๋",
age: 30,
hobbies: ["๋
์", "์ํ๊ฐ์"]
};
const jsonString = JSON.stringify(data);
console.log(jsonString);
// {"name":"ํ๊ธธ๋","age":30,"hobbies":["๋
์","์ํ๊ฐ์"]}
const parsed = JSON.parse(jsonString);
console.log(parsed.name); // "ํ๊ธธ๋"
5. ์ ๋์ฝ๋ ์ธ์ฝ๋ฉ
๊ฐ๋
๋ค๊ตญ์ด ๋ฌธ์๋ฅผ ์ปดํจํฐ์์ ์ฒ๋ฆฌํ๊ธฐ ์ํ ํ์ค์ ๋๋ค.
์ฃผ์ ์ธ์ฝ๋ฉ ๋ฐฉ์
- UTF-8: ๊ฐ์ฅ ๋๋ฆฌ ์ฌ์ฉ, ๊ฐ๋ณ ๊ธธ์ด
- UTF-16: 2๋ฐ์ดํธ ๋๋ 4๋ฐ์ดํธ
- UTF-32: ๊ณ ์ 4๋ฐ์ดํธ
์ฌ์ฉ ์์
// ์ ๋์ฝ๋ ์ด์ค์ผ์ดํ ์ํ์ค
const unicode = "\uD55C\uAD6D"; // "ํ๊ตญ"
console.log(unicode); // "ํ๊ตญ"
// UTF-8 ๋ฐ์ดํธ ํ์ธ
const text = "์๋
ํ์ธ์.";
const bytes = new TextEncoder().encode(text);
console.log(bytes); // Uint8Array(15) [236, 149, 136, 235, 133, 149, 236, 150, 188, 236, 149, 136, 236, 132, 184]
์ธ์ฝ๋ฉ ์ ํ ๊ฐ์ด๋
์ํฉ๋ณ ๊ถ์ฅ์ฌํญ
- ์ด๋ฉ์ผ ์ฒจ๋ถํ์ผ: Base64
- URL ํ๋ผ๋ฏธํฐ: URL ์ธ์ฝ๋ฉ
- API ๋ฐ์ดํฐ ๊ตํ: JSON
- HTML ์ถ๋ ฅ: HTML ์ํฐํฐ
- ๋ค๊ตญ์ด ์ง์: UTF-8
๋ณด์ ๊ณ ๋ ค์ฌํญ
1. ์ธ์ฝ๋ฉ โ ์ํธํ
- ์ธ์ฝ๋ฉ์ ๋ฐ์ดํฐ ๋ณํ์ผ ๋ฟ, ๋ณด์ ๊ธฐ๋ฅ์ด ์๋
- ๋ฏผ๊ฐํ ๋ฐ์ดํฐ๋ ๋ฐ๋์ ์ํธํ ํ์
2. XSS ๋ฐฉ์ง
- ์ฌ์ฉ์ ์ ๋ ฅ์ HTML์ ์ถ๋ ฅํ ๋ ์ ์ ํ ์ธ์ฝ๋ฉ ํ์
- innerHTML ๋์ textContent ์ฌ์ฉ ๊ถ์ฅ
3. ์ธ์ฝ๋ฉ ๊ณต๊ฒฉ ๋ฐฉ์ง
- ์ด์ค ์ธ์ฝ๋ฉ ๊ณต๊ฒฉ ์ฃผ์
- ์ ๋ ฅ ๊ฒ์ฆ๊ณผ ์ถ๋ ฅ ์ธ์ฝ๋ฉ ๋ชจ๋ ํ์
๋ง๋ฌด๋ฆฌ
์ ์ ํ ์ธ์ฝ๋ฉ ๋ฐฉ์์ ์ ํํ๊ณ ์ฌ๋ฐ๋ฅด๊ฒ ๊ตฌํํ๋ ๊ฒ์ ์น ๊ฐ๋ฐ์ ๊ธฐ๋ณธ์ ๋๋ค. ๊ฐ ์ํฉ์ ๋ง๋ ์ธ์ฝ๋ฉ์ ์ฌ์ฉํ์ฌ ์์ ํ๊ณ ํจ์จ์ ์ธ ์ ํ๋ฆฌ์ผ์ด์ ์ ๊ฐ๋ฐํ์ธ์.