๐กํด๋น ๋ด์ฉ์ pentestqym์ ๋ด์ฉ์ ๋ค์ ํ ๋ฒ ์ ๋ฆฌํ ๋ด์ฉ์ด๋ฉฐ,
๋ชจ๋ ์ ์๊ถ์ ํด๋น ์ฌ์ดํธ์๊ฒ ์์ต๋๋ค.
์น ์ ํ๋ฆฌ์ผ์ด์ ์ด ์๋น์ค๋ฅผ ํ๊ธฐ ์ํด ํด๋ผ์ด์ธํธ์ธก์์ ์ฌ์ฉ๋ ์ ์๋ HTML, CSS, ์๋ฐ์คํฌ๋ฆฝํธ, ๋ฌธ์๊ฐ์ฒด๋ชจ๋ธ(DOM) ๋ฑ์ ๋ค์ํ ๊ธฐ์ ๋ค์ ๋ํด ์์๋ด ๋๋ค.
๊ฐ์
ํด๋ผ์ด์ธํธ์ธก(Client-Side) ๊ธฐ์ ์ด๋ ํด๋ผ์ด์ธํธ-์๋ฒ ๋ชจ๋ธ1์์ ํด๋ผ์ด์ธํธ, ์ผ๋ฐ์ ์ผ๋ก๋ ์ฌ์ฉ์์ ์น ๋ธ๋ผ์ฐ์ ์์ ์คํ๋๋ ๊ธฐ์ ์ ๋งํฉ๋๋ค
ํด๋ผ ์ธก์ ๊ธฐ์ ๋ก์จ๋ ๋ฌด์ง ๋ง์ง๋ง ๊ฐ๋จํ๊ฒ ์๋ ๋ชฉ์ฐจ๋ก๋ง ์์๋ด ์๋ค.
HTML, CSS, JavaScript
์น ํด๋ผ ์ธก์ ๊ธฐ๋ณธ์ผ๋ก์จ, ์ด๊ฑด ํด๋น ๋งํฌ๋ฅผ ํตํด ํ์ต์ ํ์๊ธธ ๋ฐ๋๋๋ค ์ ๋ฆฌ๋ ์ ๋ฆฌ์ด๊ธดํ๋ฐ.. ์ง์ ์น ํ์ด์ง๋ฅผ ์์ฑํ๋ฉด์ ๋ฐฐ์ฐ๋ ๊ฑธ ์ถ์ฒํ์ง๋ง CSS๋ ๋ณด์์์๋ ํฐ ์๋ฏธ๊ฐ ์์ผ๋ฏ๋ก ๊ทธ ๋ถ๋ถ๋ง ์ ์ธํ๋ค๋ฉด ์ด๋์ ๋ ์ ์ ์๋๋ก ํ์ตํ๋๋ก ํฉ์๋ค(ํด๋ผ ์ธก ํ์ ์ฐ๋ฆฌ๋ ๋์ค์ Bootstrap์ผ๋ก ํ ๊ฑฐ ๊ฐ๊ธดํ๋ฐ..)
HTML ์์
<html>
<head><title>HTML ํ์ผ ์์ </title></head>
<body>
<div>
<h1>์ด ์์ ๋ ๋งค์ฐ ๊ฐ๋จํ HTML ํ์ผ์
๋๋ค.</h1>
<img src="์ด๋ฏธ์ง ํ์ผ์ ์ฃผ์๋ ๊ฒฝ๋ก">
<a href="๋งํฌ ์ฃผ์">ํ์ดํผ๋งํฌ</a>
</div>
<form action="/login" method="POST">
์์ด๋: <input type="text" name="username" id="username">
ํจ์ค์๋: <input type="password" name="password" id="password">
<input type="submit" name="login" value="๋ก๊ทธ์ธ">
</form>
</body>
</html>HTML Tutorial
W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.
www.w3schools.com
HTML ์์ - ์ํ์ฝ๋ฉ
์์ ์ ๋ชฉ์ ๋ณธ ์์ ์ HTML์ ๋ํ ์ฌํ๋ ๋ด์ฉ์ ๋ค๋ฃน๋๋ค. HTML์ ๊ธฐ๋ณธ๋ฌธ๋ฒ๊ณผ HTML์ ์ฃผ์ํ ํ๊ทธ๋ค์ ๋ํ ์์ ์ ๋ด๊ณ ์์ต๋๋ค. ์ ํํ์ต ๋ณธ ์์ ์ ํจ๊ณผ์ ์ผ๋ก ์ํํ๊ธฐ ์ํด์๋ ์น์ ํ๋ฆฌ
opentutorials.org
CSS ์์
<html>
<head>
<title>์ธ๋ถ CSS</title>
<link rel="stylesheet" type="text/css" href="/ํ์ผ๊ฒฝ๋ก/myStyle.css">
</head>
<body>
<p>๋ฒ๊ทธ๋ฐ์ดํฐ ํด๋ฝ</p>
</body>
</html>
/* ์ธ๋ถ CSS ํ์ผ (myStyle.css) */p { color: red; font-size: 20px;}
CSS Tutorial
W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.
www.w3schools.com
CSS ์์ - ์ํ์ฝ๋ฉ
CSS๋ HTML์ ์๋ฆ๋ต๊ฒ ๊พธ๋ฉฐ์ฃผ๋ ๋์์ด๋์ ์ธ์ด์ ๋๋ค. ํ๊ฐ๊ฐ ๋ถ์ ๋ง๋๋ ๋ฒ์ ์ ํ์๋ ์์ง๋ง, ๋ถ์ ๋ง๋๋ ์ฌ๋๋ณด๋ค ๋ถ ์ง์ ํจ์ฌ ์ํด์ผ ํ ๊ฒ์ ๋๋ค. ๋ถ ์งํ๋ ๋ฒ์ ๋ชจ๋ฅธ๋ค๋ฉด ํํํ
opentutorials.org
JavaScript ์์
<!-- HTML ํ์ผ -->
<html>
<head>
<title>์ธ๋ถ ์๋ฐ์คํฌ๋ฆฝํธ</title>
<script src="/ํ์ผ๊ฒฝ๋ก/myScript.js"></script>
</head>
<body>
...์๋ต...
</body>
</html>
<!-- ๋ณ๋ ์๋ฐ์คํฌ๋ฆฝํธ ํ์ผ (myScript.js) -->
<script>
//์ฌ๊ธฐ์ ์๋ฐ์คํฌ๋ฆฝํธ ์ฝ๋
</script>JavaScript Tutorial
W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.
www.w3schools.com
JavaScript - ์ํ์ฝ๋ฉ
์๋ฐ์คํฌ๋ฆฝํธ๋? HTML๊ณผ CSS๋ ์ ์ ์ธ ์ธ์ด์ ๋๋ค. ์ ์ ์ด๋ผ๋ ๊ฒ์ ์ด๊ฒ๋ค์ด ๋ธ๋ผ์ฐ์ ๋ฅผ ํตํด์ ์นํ์ด์ง๋ฅผ ํ๋ฉด์ ๊ทธ๋ ค์ฃผ๋ฉด ์ด ํ๋ฉด์ ๋ณ๊ฒฝํ ์ ์๋ ๋ฐฉ๋ฒ์ด ์๋ค๋ ์๋ฏธ์ ๋๋ค. (์ ์ดํด๊ฐ ์
opentutorials.org
๋ญ ์์ธํ๊ฒ ์์๋ ์ข์ง๋ง ๊ธฐ๋ฅ๊ณผ ํด๋น ํ๊ทธ๋ค๋ง ์ด๋์ ๋ ์ ์ ๋๋ก ํด๋ ๋ฉ๋๋ค. ์ง๊ด์ ์ผ๋ก ์ ์ ์๋ ๋ถ๋ถ์ด๊ธฐ๋ ํ๊ณ ๋ชจ์ ํดํน ์น ์ฌ์ดํธ๋ฅผ ๊ฐ๋ฐํ๋ค๋ฉด ๊ธ๋ฐฉ ๋ฐฐ์ธ ์ ์๋ ๋ถ๋ถ์ด๋๊น์
DOM(Document Object Model)
DOM(Document Object Model)์ ์น ํ์ด์ง์ ๊ตฌ์กฐ๋ฅผ ํํํ๋ ๊ณ์ธต์ ์ธ ๊ตฌ์กฐ๋ก, HTML์ด๋ XML๊ณผ ๊ฐ์ ๋ฌธ์๋ฅผ ์น ๋ธ๋ผ์ฐ์ ์ ๋ก๋ํ ๋ ์ด๋ฅผ ๋ ผ๋ฆฌ์ ์ธ ํธ๋ฆฌ ๊ตฌ์กฐ๋ก ๋ณํํฉ๋๋ค. ์ด ๊ตฌ์กฐ์์ ๊ฐ ์์, ํ ์คํธ, ์์ฑ์ ๋ ธ๋(Node)๋ก ํํ๋๋ฉฐ, ์ต์์ ๋ ธ๋๋ "Document" ๋ ธ๋์ ๋๋ค.
ํ ์คํธ ๋ ธ๋, ์์ ๋ ธ๋, ์์ฑ ๋ ธ๋๋ค์ Document ๋ ธ๋์ ์์ ๋ ธ๋๋ก ๊ตฌ์ฑ๋ฉ๋๋ค. DOM์ ์ฌ์ฉํ๋ฉด ์น ํ์ด์ง์ ์์๋ค์ ์ ๊ทผํ๊ณ ์กฐ์ํ ์ ์์ผ๋ฉฐ, ๋์ ์ธ ์น ์ ํ๋ฆฌ์ผ์ด์ ๊ฐ๋ฐ์ ์ ์ฉํฉ๋๋ค.
DOM์ ํ๋ซํผ๊ณผ ์ธ์ด์ ๋ ๋ฆฝ์ ์ธ ํ๋ก๊ทธ๋๋ฐ ์ธํฐํ์ด์ค๋ก, ์ฃผ๋ก ์๋ฐ์คํฌ๋ฆฝํธ๋ฅผ ํตํด ์ ๊ณต
DOM API๋ฅผ ํตํด ์น ํ์ด์ง์ ๊ตฌ์ฑ ์์์ ์ฝ๊ฒ ์ ๊ทผํ๊ณ ์กฐ์ํ ์ ์์ต๋๋ค. DOM์ ์ฌ์ฉํ๋ฉด ๋ฌธ์์ ๊ตฌ์กฐ๋ฅผ ํ์ํ๊ณ ๋ด์ฉ, ์์ฑ, ์คํ์ผ์ ์ถ๊ฐ, ๋ณ๊ฒฝ, ์ญ์ ํ ์ ์์ต๋๋ค. DOM API๋ ๊ฐ์ฒด์ ๋ฉ์๋์ ์์ฑ์ ์ ๊ณตํ์ฌ DOM์ ์ ๊ทผํ๊ณ ์กฐ์ํ ์ ์๋๋ก ํฉ๋๋ค.
<html>
...์๋ต...
<body>
<p id="greeting"></p>
<script>
document.getElementById("greeting").innerHTML = "Hello, hunters!";
</script>
</body>
</html>- document : DOM Tree์์ ์ต์์ ๋ ธ๋
- getElementById("greeting") : ID๊ฐ greeting์ธ HTML ์์์ ์ ๊ทผํจ
- innerHTML : ์ง์ ๋ HTML ์์์ ๊ฐ์ ๋ํ๋
์์ธํ DOM์ ๋ด์ฉ์ ์๊ณ ์ถ๋ค๋ฉด DOM Interface์์ ์ฐธ๊ณ ๋ฐ๋ผ๋ฉฐ, ํด๋น DOM์ ๋ด์ฉ์ ๊ฐํน ์ฌ์ฉํ๋ ๊ฒฝ์ฐ๊ฐ ์๊ธฐ์ ์์๋๋ฉด ๋์์ง ์๊ฒ ์ฃ ?
Ajax
AJAX(Asynchronous JavaScript + XML)๋ ํน์ ๊ธฐ์ ์ด ์๋๋ผ ์ฌ๋ฌ ๊ธฐ์ ์ ๊ฒฐํฉํ์ฌ ์๋ก์ด ์ ๊ทผ๋ฒ์ ์ ๊ณตํ๋ ์ฉ์ด
HTML2, CSS3, JavaScript4, DOM5, XML6, XMLHttpRequest7๋ฑ ๋ค์ํ ๊ธฐ์ ์ ํ์ฉํ์ฌ ์น ์ ํ๋ฆฌ์ผ์ด์ ์ ๋ ๋น ๋ฅด๊ณ ๋์ ์ผ๋ก ์ ๋ฐ์ดํธํ ์ ์๊ฒ ํฉ๋๋ค.
AJAX๋ฅผ ์ฌ์ฉํ๋ฉด ์ ์ฒด ํ์ด์ง๋ฅผ ์๋ก ๊ณ ์น ํ์ ์์ด ์ฌ์ฉ์ ์ธํฐํ์ด์ค๋ฅผ ๋น ๋ฅด๊ฒ ์ ๋ฐ์ดํธํ ์ ์์ด ์ดํ๋ฆฌ์ผ์ด์ ์ ์ฑ๋ฅ๊ณผ ๋ฐ์์ฑ์ ํฅ์์ํต๋๋ค. ์ต๊ทผ์๋ XML ๋์ ๊ฐ๋ฒผ์ด ์ฉ๋๊ณผ JavaScript์ ์ผ๋ถ์ธ JSON์ ๋ ๋ง์ด ์ฌ์ฉํฉ๋๋ค. AJAX๋ ์น ์ดํ๋ฆฌ์ผ์ด์ ์์ ์ ๋ณด๋ฅผ ๋น๋๊ธฐ์ ์ผ๋ก ์ฒ๋ฆฌํ๊ณ ํ์ํ๋ ๋ฐ ํ์ฉ๋ฉ๋๋ค.
๋ค์ ์ฝ๋๋ Ajax์ ์์ ์ฝ๋์ ๋๋ค.
<html>
<head>
<title>XMLHttpRequest ์์ </title>
<script>
function test() {
var xhr = new XMLHttpRequest(); // 2. XMLHttpRequest ๊ฐ์ฒด ์์ฑ
xhr.onreadystatechange = function() { // 5. XMLHttpRequest ๊ฐ์ฒด์ ์ฝ๋ฐฑํจ์ ํธ์ถ
if (xhr.readyState == 4 && xhr.status == 200) {
document.getElementById("result").innerHTML = xhr.responseText; // 6. HTML DOM ๊ฐฑ์
} };
xhr.open("GET", "https://www.bugbountyclub.com",true); // 3. XMLHttpRequest ๊ฐ์ฒด ๊ตฌ์ฑ
xhr.send(); // 4. XMLHttpRequest๋ฅผ ํตํ ๋น๋๊ธฐ ์์ฒญ
}
</script>
</head>
<body>
<button type="button" onclick="test()">Send</button> // 1. ํด๋ผ์ด์ธํธ์ ์ด๋ฒคํธ ๋ฐ์
<div id="result"></div>
</body>
</html>Ajax๋ ๋ค์์ ๊ณผ์ ์ ํตํด ์ํ๋ฉ๋๋ค.
1. ํด๋ผ์ด์ธํธ์ ์ด๋ฒคํธ ๋ฐ์
<button type="button" onclick="test()">Send</button>์ฌ์ฉ์์ ๋ฒํผ ํด๋ฆญ์ด๋ผ๋ ์ด๋ฒคํธ๊ฐ ๋ฐ์ํ์ ๋ ์๋ฐ์คํฌ๋ฆฝํธ์ test() ๋ฉ์๋๋ฅผ ์คํํฉ๋๋ค.
2. XMLHttpRequest ๊ฐ์ฒด ์์ฑ
var xhr = new XMLHttpRequest();์๋ฐ์คํฌ๋ฆฝํธ์ XMLHttpRequest ๋ผ์ด๋ธ๋ฌ๋ฆฌ๋ฅผ ํตํด XMLHttpRequest ๊ฐ์ฒด๋ฅผ ์์ฑํฉ๋๋ค.
3. XMLHttpRequest ๊ฐ์ฒด ๊ตฌ์ฑ
xhr.open("GET", "https://www.bugbountyclub.com",true);XMLHttpRequest ๊ฐ์ฒด์ open() ๋ฉ์๋๋ฅผ ํตํด ์์ฒญ ๋ฉ์๋(GET, POST ๋ฑ), ์์ฒญ์ ๋ณด๋ผ URL, ์์ฒญ์ ๋น๋๊ธฐ ์ฌ๋ถ๋ฅผ true(๊ธฐ๋ณธ๊ฐ) ๋๋ false์ ๊ฐ์ผ๋ก ์ค์ ํฉ๋๋ค.
4. XMLHttpRequest๋ฅผ ํตํ ๋น๋๊ธฐ ์์ฒญ
xhr.send();XMLHttpRequest ๊ฐ์ฒด๋ฅผ ํตํด ์๋ฒ๋ก ๋น๋๊ธฐ ์์ฒญ์ ์ ์กํ๋ค.
5. (์๋ฒ๊ฐ ์๋ต ์) XMLHttpRequest ๊ฐ์ฒด์ ์ฝ๋ฐฑํจ์ ํธ์ถ
xhr.onreadystatechange = function() {
if (xhr.readyState == 4 && xhr.status == 200) {
// 6๋ฒ์ HTML DOM ๊ฐฑ์ ์ ์ํ ์ฝ๋๊ฐ ์ฌ๊ธฐ์ ๋ค์ด๊ฐ๋๋ค.
}
};♦ onreadystatechange: XMlHttpRequest ๊ฐ์ฒด์ ์ํ๊ฐ ๋ณ๊ฒฝ๋์์ ๋์ ์ด๋ฒคํธ๋ฅผ ๊ฐ์งํฉ๋๋ค. ์๋ฒ์์ ์๋ต์ ๋ฐ๊ฒ ๋๋ฉด ์ํ๊ฐ ๋ณ๊ฒฝ๋๊ณ , function์ด ์คํํจ
♦ readyState: XMlHttpRequest ๊ฐ์ฒด์ ํ์ฌ ์ํ๋ฅผ ๋ํ๋ด๋ฉฐ, ๊ฐ์ ๋ฐ๋ฅธ ์ ์๋ ๋ค์๊ณผ ๊ฐ์ต๋๋ค.
- 0: ์์ฒญ ์ด๊ธฐํ X | open() ๋ฉ์๋๋ฅผ ํธ์ถํ๊ธฐ ์ ์ ์ํ์ ๋๋ค.
- 1: ์์ฒญ์ด ์ค์ ๋จ | open() ๋ฉ์๋๋ฅผ ํธ์ถํ๊ณ send()๋ฅผ ํธ์ถํ๊ธฐ ์ ์ ์ํ์ ๋๋ค.
- 2: ์์ฒญ์ด ์ ์ก๋จ | send() ๋ฉ์๋๋ฅผ ํธ์ถํ ํ์ ์ํ์ ๋๋ค.
- 3: ์์ฒญ์ด ์ฒ๋ฆฌ์ค | ์๋ฒ์ ์์ฒญ์ ์ ์กํ ํ ์๋ฒ์์ ์๋ต์ ๋ฐ๊ธฐ ์ ์ ์ํ์ ๋๋ค.
- 4: ์์ฒญ์ด ์๋ฃ๋จ | ์๋ฒ๋ก ๋ถํฐ ์๋ต์ ๋ฐ์ ํ์ ์ํ์ ๋๋ค.
♦ status: HTTP ์๋ต ์ฝ๋๋ฅผ ๋ํ๋
6.HTML DOM ๊ฐฑ์
document.getElementById("result").innerHTML = xhr.responseText;DOM API๋ฅผ ์ฌ์ฉํด ์๋ฒ์ ์๋ต์ "result"๋ผ๋ ์์ด๋๋ฅผ ๊ฐ๋ HTML ์์์ ํ์ํฉ๋๋ค.
♦ responseText: ์๋ฒ์ ์๋ต์ ํ
์คํธ๋ก ๋ฐํํจ
JSON
JSON์ ์ด๊ฒฝ๋์ ๋ฐ์ดํฐ ํ์์ผ๋ก, ๋ฐ์ดํฐ๋ฅผ ์ ์ฅํ๊ณ ์ ์กํ๊ธฐ ์ํด ์ฌ์ฉ๋จ
XML๋ณด๋ค ๊ฐ๋ ์ฑ์ด ๋๊ณ ์ฉ๋์ด ์์ผ๋ฉฐ, ์ฃผ๋ก ์น ์ ํ๋ฆฌ์ผ์ด์ ์์ ๋ฐ์ดํฐ ๊ตํ์ ํ์ฉ๋ฉ๋๋ค. JSON์ Ajax ๊ธฐ๋ฐ์ ์ ํ๋ฆฌ์ผ์ด์ ์์ ์๋ฒ์ ํด๋ผ์ด์ธํธ ๊ฐ์ ๋ฐ์ดํฐ ์ ์ก์ ์์ฃผ ์ฌ์ฉ๋ฉ๋๋ค. ์๋ฅผ ๋ค์ด, ์น ์ ํ๋ฆฌ์ผ์ด์ ์์ ์ฌ์ฉ์์ ์ ์๋๋ฌผ ๋ฆฌ์คํธ ์กฐํ๋ฅผ ํด๋ฆญํ๋ฉด ์๋ฒ๋ JSON ํ์์ ๋ฐ์ดํฐ๋ฅผ ๋ฐํํ๊ณ , ์น ๋ธ๋ผ์ฐ์ ๋ ํด๋น ๋ฐ์ดํฐ๋ฅผ ํ์ฑํ์ฌ ์ฌ์ฉ์์๊ฒ ํ์ํฉ๋๋ค.
{
"pet": [
{
"name": "Tommy",
"type": "dog",
"age": 10
"like": ["ball", "running"]
}
{
"name": "Sally",
"type": "cat",
"age": 4
"like": ["fish", ""]
}
]
}- ์ค๊ดํธ { }๋ ๊ฐ์ฒด๋ฅผ ๋ํ๋ด๋ฉฐ ,๊ฐ์ฒด๋ ์ฝค๋ง(,)๋ก ๊ตฌ๋ถ๋ ์ด๋ฆ:๊ฐ ์์ ์งํฉ
- ๋๊ดํธ [ ]๋ ๋ฐฐ์ด์ ๋ํ๋ด๋ฉฐ. ๋ฐฐ์ด์ ์์๋ค์ ์ฝค๋ง(,)๋ก ๊ตฌ๋ถ๋จ
SOP(Same-Origin Policy) & CORS(Cross-Origin Resource Sharing)
Mitigation: Same Origin Policy
Mitigation: Same Origin Policy SOP์ ๋ํ์ฌ ์ด์ ๊น์ง์ ์ฟ ํค์ ์ธ์ ์ ๊ดํ ๋ด์ฉ์ ๊ธฐ๋ณธ์ ์ด๋ผ์ ์ ์ ์ ๋ฆฌ๋ณด๋จ ์ง์ ๋ฐฐ์ฐ๋ฉด์ ํ๋๊ฒ ์ข์๋ณด์ฌ์.. ์ฌ์ค ๊ท์ฐฎ์์๊ฐ ์ ์ผ ํฐ๋ฐ ใ ใ ์น์ ์ดํด์ HTTP
dystopia050119.tistory.com
CORS Type
์์ ๋งํฌ๋ฅผ ๋ณด์๋ฉด์ CORS ์์ฒญ์ ํฌ๊ฒ ๋ ๊ฐ์ง๋ก ๋๋๋ค๊ณ ํฉ๋๋ค.
- Simple Request
- Preflighted Request
Simple Request(Example)
์ฌ์ฉ์๊ฐ https://foo.example ์น ์ฌ์ดํธ์ ๋ฐฉ๋ฌธํ ํ, https://bar.other ์ถ์ฒ์ ๋ฆฌ์์ค๋ฅผ ๊ฐ์ ธ์ค๊ธฐ ์ํด ์์ฒญ์ ๋ณด๋ ๋๋ค. ์ด๋ ์์ฒญ์๋ Origin ํค๋๊ฐ ํฌํจ๋์ด ์์ด์ ์๋ฒ๋ ์์ฒญ์ด ์ด๋ค ์ถ์ฒ์์ ์จ ๊ฒ์ธ์ง ํ์ธํ ์ ์์ต๋๋ค. ์๋ฒ๋ Access-Control-Allow-Origin(ACAO) ํค๋๋ฅผ ์ถ๊ฐํ์ฌ ํด๋น ๋ฆฌ์์ค๊ฐ ํด๋ผ์ด์ธํธ์๊ฒ ํ์ฉ๋๋๋ก ์๋ตํฉ๋๋ค. ๋ง์ฝ ACAO ํค๋์ ๊ฐ์ด ์์ผ๋์นด๋์ธ ๊ฒฝ์ฐ, ๋ชจ๋ ์ถ์ฒ์์์ ์์ฒญ์ ํ์ฉํ๋ ๊ฒ์ ์๋ฏธํฉ๋๋ค.
ํน์ ์ถ์ฒ๋ง ํ์ฉํ๊ณ ์ถ์ ๊ฒฝ์ฐ์๋ HTTP ์๋ต์์ ๋ค์๊ณผ ๊ฐ์ด ํด๋น ์ถ์ฒ๋ง ACAO ํค๋์ ์ค์ ํ๋ฉด ๋ฉ๋๋ค.
Access-Control-Allow-Origin: foo.example
Preflighted Request(Example)
Preflighted Request๋ Simple Request์๋ ๋ฌ๋ฆฌ ํด๋ผ์ด์ธํธ์ ์๋ฒ ๊ฐ์ ์ฌ์ ํฉ์๋ฅผ ์ํด OPTIONS ๋ฉ์๋๋ฅผ ์ฌ์ฉํ์ฌ ์์ฒญ์ ๋ณด๋ด๋ ๊ณผ์ ์ ๋๋ค. ํด๋ผ์ด์ธํธ๋ Origin ํค๋์ ํจ๊ป Access-Control-Request-Method ๋ฐ Access-Control-Request-Headers ํค๋๋ฅผ ์ฌ์ฉํ์ฌ ์ค์ ์์ฒญ์์ ์ฌ์ฉํ ๋ฉ์๋์ ํค๋๋ฅผ ์๋ฒ์๊ฒ ์๋ฆฝ๋๋ค.
์๋ฒ๋ ์ด ์ ๋ณด๋ฅผ ๊ธฐ๋ฐ์ผ๋ก Access-Control-Allow-Methods ๋ฐ Access-Control-Allow-Headers ํค๋๋ฅผ ์ถ๊ฐํ์ฌ ํ์ฉ๋๋ ๋ฉ์๋์ ํค๋๋ฅผ ํด๋ผ์ด์ธํธ์๊ฒ ์๋ ค์ค๋๋ค. ์ดํ์๋ ์ค์ ์์ฒญ๊ณผ ์๋ต์ด ์ด๋ฃจ์ด์ง๋๋ค. Preflighted ์์ฒญ์ CORS(Cross-Origin Resource Sharing) ์ ์ฑ ์ ์ค์ํ๊ธฐ ์ํด ์ฌ์ฉ๋ฉ๋๋ค.
์๋ค์ ์ก
CORS์ ๊ด๋ จ๋ ์น ์ ํ๋ฆฌ์ผ์ด์ ์ ์ทจ์ฝ์ ์ผ๋ก๋ OWASP TOP 10์ #5 ์๋ชป๋ ๋ณด์ ๊ตฌ์ฑ(Security Misconfiguration)์ ํด๋น๋๋ "์๋ชป๋ CORS ์ค์ (CORS Misconfiguration)"์ด ์์ผ๋ฉฐ, ๋ฒ๊ทธ๋ฐ์ดํฐ์์ ๋ง์ด ์ ๋ณด๋๋ ์ทจ์ฝ์ ์ค ํ๋์ ๋๋ค. ์ด ์ทจ์ฝ์ ์ผ๋ก ์ธํด ์๋ํ์ง ์์ ๋ค๋ฅธ ์ถ์ฒ์ ์ฌ์ฉ์์ ์๊ฒฉ์ฆ๋ช ๋ฑ์ ๋ฏผ๊ฐํ ์ ๋ณด๊ฐ ๋ ธ์ถ๋ ์ ์์ต๋๋ค.
์ฐธ๊ณ ์๋ฃ
์น ํด๋ผ์ด์ธํธ์ธก ๊ธฐ์ | Pentest Gym | ๋ฒ๊ทธ๋ฐ์ดํฐํด๋ฝ
์ด ํ๋ จ์์๋ ์น ์ ํ๋ฆฌ์ผ์ด์ ์ด ์๋น์ค๋ฅผ ํ๊ธฐ ์ํด ํด๋ผ์ด์ธํธ์ธก์์ ์ฌ์ฉ๋ ์ ์๋ HTML, CSS, ์๋ฐ์คํฌ๋ฆฝํธ, ๋ฌธ์๊ฐ์ฒด๋ชจ๋ธ(DOM) ๋ฑ์ ๋ค์ํ ๊ธฐ์ ๋ค์ ๋ํด ์
www.bugbountyclub.com
์ฐธ๊ณ ์ด๋ฏธ์ง
- ํด๋ผ์ด์ธํธ์ธก์์๋ ์๋ฒ์์ ์๋ต๋ฐ์ HTML, CSS๋ฅผ ํ์ฑํ์ฌ ์น ๋ธ๋ผ์ฐ์ ํ๋ฉด์ ๊ทธ๋ฆฌ๊ณ , ์๋ฐ์คํฌ๋ฆฝํธ๋ฅผ ํด์ํ์ฌ ์ฌ์ฉ์๋จ์ ๋์ ๊ธฐ๋ฅ์ ์ํํฉ๋๋ค. [๋ณธ๋ฌธ์ผ๋ก]
- ์น ํ์ด์ง์ ๊ตฌ์กฐ์ ์ฝํ ์ธ ๋ฅผ ์์ฑํ๊ธฐ ์ํ ์ธ์ด๋ก, ์์๋ค์ ์ฌ์ฉํ์ฌ ํ ์คํธ, ์ด๋ฏธ์ง, ๋งํฌ ๋ฑ์ ํ์ํ๊ณ ๊ตฌ์กฐ๋ฅผ ์ ์ [๋ณธ๋ฌธ์ผ๋ก]
- ์น ํ์ด์ง์ ๋์์ธ๊ณผ ๋ ์ด์์์ ๋ด๋นํ๋ ์คํ์ผ ์ํธ ์ธ์ด๋ก, HTML ์์๋ค์ ์คํ์ผ, ํฌ๊ธฐ, ์์ ๋ฑ์ ์ง์ ํ์ฌ ์น ํ์ด์ง๋ฅผ ์๊ฐ์ ์ผ๋ก ๊พธ๋ฐ [๋ณธ๋ฌธ์ผ๋ก]
- ์น ํ์ด์ง์ ๋์ ์ธ ๊ธฐ๋ฅ๊ณผ ์ํธ์์ฉ์ ๊ตฌํํ๊ธฐ ์ํ ์คํฌ๋ฆฝํธ ์ธ์ด๋ก, HTML๊ณผ CSS๋ฅผ ์ ์ดํ๊ณ ์ฌ์ฉ์์์ ์ํธ์์ฉ์ ์ฒ๋ฆฌํ๋ฉฐ, ํด๋ผ์ด์ธํธ ์ธก์์ ์คํ๋๋ฉฐ, ์น ํ์ด์ง์ ๋์ ์ธ ์์๋ฅผ ์ถ๊ฐํ๊ฑฐ๋ ์ด๋ฒคํธ๋ฅผ ์ฒ๋ฆฌํ๋ ๋ฑ ๋ค์ํ ๊ธฐ๋ฅ์ ์ํํจ [๋ณธ๋ฌธ์ผ๋ก]
- ์น ํ์ด์ง์ ๊ตฌ์กฐ์ ๋ด์ฉ์ ํํํ๋ ๋ฐฉ๋ฒ์ผ๋ก, HTML ๋๋ XML ๋ฌธ์๋ฅผ ํธ๋ฆฌ ๊ตฌ์กฐ๋ก ํํ [๋ณธ๋ฌธ์ผ๋ก]
- ํ ์คํธ ๊ธฐ๋ฐ์ ๋งํฌ์ ์ธ์ด๋ก, ๋ฐ์ดํฐ๋ฅผ ๊ตฌ์กฐํํ๊ณ ์ ๋ฌํ๊ธฐ ์ํด ์ฌ์ฉ๋๋ฉฐ, ํ๊ทธ๋ฅผ ์ฌ์ฉํ์ฌ ๋ฐ์ดํฐ๋ฅผ ํํํ๋ฉฐ, ํ๊ทธ๋ ์ฌ์ฉ์ ์ ์ ๊ฐ๋ฅํจ ์ฃผ๋ก ๋ฐ์ดํฐ์ ์ ์ฅ, ๊ตํ, ๊ณต์ ์ ํ์ฉ๋จ [๋ณธ๋ฌธ์ผ๋ก]
- JavaScript๋ฅผ ์ฌ์ฉํ์ฌ ์๋ฒ์ ๋น๋๊ธฐ์ ์ผ๋ก ๋ฐ์ดํฐ๋ฅผ ๊ตํํ๊ธฐ ์ํด ์ฌ์ฉ๋๋ ๊ฐ์ฒด์ด๋ฉฐ, ์น ํ์ด์ง์์ ์๋ฒ๋ก ๋ฐ์ดํฐ๋ฅผ ๋ณด๋ด๊ณ ๋ฐ์ ์ ์์ผ๋ฉฐ, ํ์ด์ง์ ์๋ก๊ณ ์นจ ์์ด๋ ๋์ ์ผ๋ก ๋ฐ์ดํฐ๋ฅผ ์ ๋ฐ์ดํธ๋ฅผ ํจ. ์ฃผ๋ก AJAX์ ํจ๊ป ์ฌ์ฉ๋๋ฉฐ, ๋ค์ํ ๋ฐ์ดํฐ ํ์์ธ XML, JSON ๋ฑ์ ์ฃผ๊ณ ๋ฐ์ [๋ณธ๋ฌธ์ผ๋ก]
'๐โWeb_Study > ๐ฅโpentestgym' ์นดํ ๊ณ ๋ฆฌ์ ๋ค๋ฅธ ๊ธ
| SQL ์ธ์ ์ ๊ธฐ์ด (2) | 2023.07.07 |
|---|---|
| ์น ์๋ฒ์ธก ๊ธฐ์ (5) | 2023.07.06 |
| ์ธ์ฝ๋ฉ(Encoding) (0) | 2023.05.27 |
| ์ฟ ํค์ ์ธ์ (0) | 2023.05.27 |
| ์น์ ์ดํด์ HTTP (0) | 2023.05.27 |
