๋ณธ๋ฌธ ๋ฐ”๋กœ๊ฐ€๊ธฐ
Language/Javascript

[Javascript]์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ์ดˆ๋ณด์ž๋ฅผ ์œ„ํ•œ ํŠœํ† ๋ฆฌ์–ผ: ๋‚ด๋ถ€ ๋ฐ ์™ธ๋ถ€์Šคํฌ๋ฆฝํŠธ, ์ฃผ์„ ๋ฐ ๋””๋ฒ„๊น…

by YJ Dev 2024. 6. 10.
728x90
๋ฐ˜์‘ํ˜•
SMALL

์›น ๊ฐœ๋ฐœ์„ ์‹œ์ž‘ํ•˜๋ฉด์„œ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ๋ฅผ ๋ฐฐ์šฐ๋Š” ๊ฒƒ์€ ํ•„์ˆ˜์ ์ž…๋‹ˆ๋‹ค. ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ๋ฅผ ์ฒ˜์Œ ๋ฐฐ์šฐ๋Š” ๋ถ„๋“ค์„ ์œ„ํ•ด ์ด๋ฒˆ ๊ธ€์—์„œ๋Š” ๋‚ด๋ถ€์Šคํฌ๋ฆฝํŠธ์™€ ์™ธ๋ถ€์Šคํฌ๋ฆฝํŠธ์˜ ์‚ฌ์šฉ๋ฒ•, ์ฃผ์„์„ ํ†ตํ•ด ์ฝ”๋“œ์˜ ๊ฐ€๋…์„ฑ์„ ๋†’์ด๋Š” ๋ฐฉ๋ฒ•, ๊ทธ๋ฆฌ๊ณ  ๋ฐœ์ƒํ•  ์ˆ˜ ์žˆ๋Š” ์˜ค๋ฅ˜๋ฅผ ํ™•์ธํ•˜๊ณ  ํ•ด๊ฒฐํ•˜๋Š” ๋ฐฉ๋ฒ•์„ ์‚ดํŽด๋ณด๊ฒ ์Šต๋‹ˆ๋‹ค. ์ด ๋„ค ๊ฐ€์ง€ ์ฃผ์ œ๋ฅผ ํ†ตํ•ด ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ์˜ ๊ธฐ์ดˆ๋ฅผ ํƒ„ํƒ„ํžˆ ๋‹ค์ ธ๋ด…์‹œ๋‹ค.

์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ๋‚ด์™ธ๋ถ€ ์Šคํฌ๋ฆฝํŠธ ์ฃผ์„ ๋””๋ฒ„๊น…


01. ๋‚ด๋ถ€์Šคํฌ๋ฆฝํŠธ๐Ÿ“˜

์ •์˜

๋‚ด๋ถ€์Šคํฌ๋ฆฝํŠธ๋Š” HTML ํŒŒ์ผ ๋‚ด์— ์ง์ ‘ ์ž‘์„ฑํ•˜๋Š” ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ์ฝ”๋“œ์ž…๋‹ˆ๋‹ค. <script> ํƒœ๊ทธ๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ HTML ๋ฌธ์„œ์˜ ํŠน์ • ์œ„์น˜์— ์Šคํฌ๋ฆฝํŠธ๋ฅผ ์‚ฝ์ž…ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

์žฅ์ 

  • ๋น ๋ฅธ ์ž‘์„ฑ๊ณผ ํ…Œ์ŠคํŠธ: ๊ฐ„๋‹จํ•œ ํ…Œ์ŠคํŠธ๋‚˜ ์ž‘์€ ๊ทœ๋ชจ์˜ ํ”„๋กœ์ ํŠธ์—์„œ ์œ ์šฉํ•ฉ๋‹ˆ๋‹ค.
  • ์ง๊ด€์ ์ธ ์œ„์น˜ ์ง€์ •: ํ•„์š”ํ•œ ์œ„์น˜์— ๋ฐ”๋กœ ์ฝ”๋“œ๋ฅผ ์ž‘์„ฑํ•  ์ˆ˜ ์žˆ์–ด ํŽธ๋ฆฌํ•ฉ๋‹ˆ๋‹ค.

๋‹จ์ 

  • ์ฝ”๋“œ์˜ ๊ฐ€๋…์„ฑ ์ €ํ•˜: HTML๊ณผ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ์ฝ”๋“œ๊ฐ€ ์„ž์—ฌ ๊ฐ€๋…์„ฑ์ด ๋–จ์–ด์ง‘๋‹ˆ๋‹ค.
  • ์œ ์ง€๋ณด์ˆ˜ ์–ด๋ ค์›€: ์ฝ”๋“œ๊ฐ€ ๊ธธ์–ด์งˆ์ˆ˜๋ก ๊ด€๋ฆฌ๊ฐ€ ์–ด๋ ค์›Œ์ง‘๋‹ˆ๋‹ค.
  • ๋ณด์•ˆ ์ทจ์•ฝ์ : XSS ๊ณต๊ฒฉ์— ์ทจ์•ฝํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

์˜ˆ์ œ ์ฝ”๋“œ

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>๋‚ด๋ถ€์Šคํฌ๋ฆฝํŠธ ์˜ˆ์ œ</title>
</head>
<body>
    <h1>๋‚ด๋ถ€์Šคํฌ๋ฆฝํŠธ ํ…Œ์ŠคํŠธ</h1>
    <script>
        document.write("์ด ๋ฌธ์žฅ์€ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ๋กœ ์ž‘์„ฑ๋˜์—ˆ์Šต๋‹ˆ๋‹ค.");
    </script>
</body>
</html>

02. ์™ธ๋ถ€์Šคํฌ๋ฆฝํŠธ๐Ÿ‘จ‍

์ •์˜

์™ธ๋ถ€์Šคํฌ๋ฆฝํŠธ๋Š” ๋ณ„๋„์˜. js ํŒŒ์ผ๋กœ ์ž‘์„ฑ๋œ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ์ฝ”๋“œ์ž…๋‹ˆ๋‹ค. HTML ํŒŒ์ผ์—์„œ๋Š” <script src="ํŒŒ์ผ๊ฒฝ๋กœ.js"></script> ํƒœ๊ทธ๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ ์™ธ๋ถ€ ํŒŒ์ผ์„ ๋ถˆ๋Ÿฌ์˜ต๋‹ˆ๋‹ค.

์žฅ์ 

  • ์ฝ”๋“œ์˜ ๋ชจ๋“ˆํ™”: ์ฝ”๋“œ๊ฐ€ ๋ถ„๋ฆฌ๋˜์–ด ๊ด€๋ฆฌ๊ฐ€ ์šฉ์ดํ•ฉ๋‹ˆ๋‹ค.
  • ์œ ์ง€๋ณด์ˆ˜ ์šฉ์ด: ์—ฌ๋Ÿฌ HTML ํŒŒ์ผ์—์„œ ๋™์ผํ•œ ์Šคํฌ๋ฆฝํŠธ๋ฅผ ์žฌ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.
  • ์„ฑ๋Šฅ ํ–ฅ์ƒ: ๋ธŒ๋ผ์šฐ์ €๊ฐ€ ์Šคํฌ๋ฆฝํŠธ ํŒŒ์ผ์„ ์บ์‹ฑํ•˜์—ฌ ๋กœ๋”ฉ ์†๋„๊ฐ€ ๋นจ๋ผ์ง‘๋‹ˆ๋‹ค.

๋‹จ์ 

  • ์ดˆ๊ธฐ ์„ค์ • ์‹œ๊ฐ„ ์†Œ์š”: ์™ธ๋ถ€ ํŒŒ์ผ์„ ์ƒ์„ฑํ•˜๊ณ  ์—ฐ๊ฒฐํ•ด์•ผ ํ•ฉ๋‹ˆ๋‹ค.
  • ํŒŒ์ผ ๊ด€๋ฆฌ ํ•„์š”: ํ”„๋กœ์ ํŠธ๊ฐ€ ์ปค์งˆ์ˆ˜๋ก ํŒŒ์ผ ๊ด€๋ฆฌ๊ฐ€ ์ค‘์š”ํ•ด์ง‘๋‹ˆ๋‹ค.

์˜ˆ์ œ ์ฝ”๋“œ

HTML ํŒŒ์ผ:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>์™ธ๋ถ€์Šคํฌ๋ฆฝํŠธ ์˜ˆ์ œ</title>
    <script src="script.js"></script>
</head>
<body>
    <h1>์™ธ๋ถ€์Šคํฌ๋ฆฝํŠธ ํ…Œ์ŠคํŠธ</h1>
</body>
</html>


์™ธ๋ถ€ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ํŒŒ์ผ (script.js):

document.write("์ด ๋ฌธ์žฅ์€ ์™ธ๋ถ€ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ํŒŒ์ผ์—์„œ ์ž‘์„ฑ๋˜์—ˆ์Šต๋‹ˆ๋‹ค.");

03. ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ์ฃผ์„๐Ÿ“

์ฃผ์„์˜ ์ค‘์š”์„ฑ

์ฃผ์„์€ ์ฝ”๋“œ์˜ ๊ฐ€๋…์„ฑ์„ ๋†’์ด๊ณ , ํ˜‘์—… ์‹œ ๋‹ค๋ฅธ ๊ฐœ๋ฐœ์ž๋“ค์ด ์ฝ”๋“œ์˜ ์˜๋„๋ฅผ ์ดํ•ดํ•˜๋Š” ๋ฐ ๋„์›€์„ ์ค๋‹ˆ๋‹ค.

์ฃผ์„์˜ ์ข…๋ฅ˜

  • ํ•œ ์ค„ ์ฃผ์„: //๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ ํ•œ ์ค„์„ ์ฃผ์„ ์ฒ˜๋ฆฌํ•ฉ๋‹ˆ๋‹ค.
  • ์—ฌ๋Ÿฌ ์ค„ ์ฃผ์„: /* */๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ ์—ฌ๋Ÿฌ ์ค„์„ ์ฃผ์„ ์ฒ˜๋ฆฌํ•ฉ๋‹ˆ๋‹ค.

์ฃผ์„ ์‚ฌ์šฉ ์˜ˆ์ œ

// ์ด ํ•จ์ˆ˜๋Š” ๋‘ ์ˆซ์ž์˜ ํ•ฉ์„ ๋ฐ˜ํ™˜ํ•ฉ๋‹ˆ๋‹ค.
function add(a, b) {
    return a + b; // a์™€ b๋ฅผ ๋”ํ•œ ๊ฐ’์„ ๋ฐ˜ํ™˜
}

/* 
์ด ํ•จ์ˆ˜๋Š” ๋‘ ์ˆซ์ž์˜ ๊ณฑ์„ ๋ฐ˜ํ™˜ํ•ฉ๋‹ˆ๋‹ค.
์ด ํ•จ์ˆ˜๋Š” ์—ฌ๋Ÿฌ ์ค„์˜ ์ฃผ์„์„ ์‚ฌ์šฉํ•˜์—ฌ ์„ค๋ช…ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.
*/
function multiply(a, b) {
    return a * b;
}

04. ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ์˜ค๋ฅ˜ ํ™•์ธ ๋ฐฉ๋ฒ•๐Ÿ› ๏ธ

์ผ๋ฐ˜์ ์ธ ์˜ค๋ฅ˜ ์ข…๋ฅ˜

  • ๋ฌธ๋ฒ• ์˜ค๋ฅ˜: ์ž˜๋ชป๋œ ๊ตฌ๋ฌธ์œผ๋กœ ์ธํ•ด ์ฝ”๋“œ๊ฐ€ ์‹คํ–‰๋˜์ง€ ์•Š์Œ
  • ๋…ผ๋ฆฌ ์˜ค๋ฅ˜: ์ฝ”๋“œ๊ฐ€ ์‹คํ–‰๋˜์ง€๋งŒ ์˜๋„ํ•œ ๋Œ€๋กœ ์ž‘๋™ํ•˜์ง€ ์•Š์Œ
  • ์‹คํ–‰ ์˜ค๋ฅ˜: ์ฝ”๋“œ ์‹คํ–‰ ์ค‘์— ๋ฐœ์ƒํ•˜๋Š” ์˜ค๋ฅ˜

๋””๋ฒ„๊น… ๋„๊ตฌ ์†Œ๊ฐœ

  • ๋ธŒ๋ผ์šฐ์ € ์ฝ˜์†” ํ™œ์šฉ๋ฒ•: ๋Œ€๋ถ€๋ถ„์˜ ๋ธŒ๋ผ์šฐ์ €์—๋Š” ๊ฐœ๋ฐœ์ž ๋„๊ตฌ๊ฐ€ ๋‚ด์žฅ๋˜์–ด ์žˆ์Šต๋‹ˆ๋‹ค. ์˜ˆ๋ฅผ ๋“ค์–ด, Chrome์—์„œ๋Š” F12 ํ‚ค๋ฅผ ๋ˆŒ๋Ÿฌ ๊ฐœ๋ฐœ์ž ๋„๊ตฌ๋ฅผ ์—ด ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.
  • console.log() ์‚ฌ์šฉ๋ฒ•: ์ฝ”๋“œ์˜ ํ๋ฆ„์„ ์ถ”์ ํ•˜๊ณ  ๋ณ€์ˆ˜ ๊ฐ’์„ ์ถœ๋ ฅํ•˜์—ฌ ๋””๋ฒ„๊น…์— ๋„์›€์„ ์ค๋‹ˆ๋‹ค.

์˜ˆ์ œ ์ฝ”๋“œ

function divide(a, b) {
    if (b === 0) {
        console.error("์˜ค๋ฅ˜: 0์œผ๋กœ ๋‚˜๋ˆŒ ์ˆ˜ ์—†์Šต๋‹ˆ๋‹ค.");
        return null;
    }
    return a / b;
}

let result = divide(10, 0);
if (result !== null) {
    console.log("๊ฒฐ๊ณผ: " + result);
}

์œ„ ์ฝ”๋“œ์—์„œ๋Š” 0์œผ๋กœ ๋‚˜๋ˆ„๋Š” ๊ฒฝ์šฐ ์˜ค๋ฅ˜ ๋ฉ”์‹œ์ง€๋ฅผ ์ถœ๋ ฅํ•˜๊ณ , console.log()๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ ๊ฒฐ๊ณผ๋ฅผ ์ถœ๋ ฅํ•ฉ๋‹ˆ๋‹ค.


05. ํ•ต์‹ฌ ๋‚ด์šฉ๐Ÿ‘€

์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ

728x90
๋ฐ˜์‘ํ˜•