발자취
#06 자바 스크립트 코드 실습 본문
#01 자바스크립트 코드 구조
1. 직접적으로 코드를 HTML 페이지에 삽입하는 구조
2. 간접적으로 코드를 HTML 페이지에 삽입하는 구조: 별도의 파일 형태로 만들어 SRC 속성 부분에 넣어줌.
#02 자바스크립트 내장 함수
1. alert(string) 함수: 확인 버튼이 있는 알림(string) 대화상자를 생성
2. confirm() 함수: 확인/취소 버튼이 있는 확인/취소 대화상자를 생성
3. prompt() 함수: 확인/취소 버튼이 있는 입력 대화상자를 생성
4. eval(string_equation) 함수: 문자열로 입력되는 수식(string_equation)을 숫자로 계산
5. parseFloat(string) 함수: 문자열(string)을 실수값으로 변환
6. parseInt(string, base) 함수: base 진법(2, 8, 10, 16)인 해당 문자열(string)을 10진수로 변환
7. escape(string) 함수: 문자열을 상응하는 아스키 값으로 변환
8. unescape(ASCII_val) 함수: 아스키값(ASCII_val)을 상응하는 문자열로 변환
#03 간단 실습
(1) 1부터 100까지 숫자중에서 짝수의 합을 구하는 함수를 자바스크립트 코드로 작성해서 웹페이지상에서 실행하시오.
<html><head><title> 실습1 </title>
</head>
<body>
<script language="javascript">
sum = 0;
for(count=1; count<=100; count++) {
if (count % 2 == 0) {
sum = sum + count;
}
}
document.write("sum = " + sum + "<BR>");
</script>
</body></html>위 코드를 작성하여 실행해보면
이와 같은 결과가 나옵니다.
(2) 1부터 1000까지 숫자중에서 3의 배수들의 합을 구하는 함수를 자바스크립트 코드로 작성해서 웹페이지상에서 실행하시오.
<html><head><title> 실습2 </title>
</head>
<body>
<script language="javascript">
sum = 0;
for(count=1; count<=1000; count++) {
if (count % 3 == 0) {
sum = sum + count;
}
}
document.write("sum = " + sum + "<BR>");
</script>
</body></html>위 코드를 작성하여 실행해보면
이와 같은 결과가 나옵니다.
(3) prompt 함수와 eval 함수를 사용해서 임의로 입력되는 수식값을 계산하는 자바스크립트 코드를 작성해서 웹페이지상에서 실행하시오.
<html> <head> <title> 실습3 </title></head>
<body>
<script language = "javascript">
result = eval(prompt("number?", "0"));
document.write("result= " + result + " <br>" );
</script>
</body>
</html>위 코드를 작성하여 실행해보면
이러한 결과가 나오고
수식을 입력해보면
이와 같은 결과가 나옵니다.
#04 이벤트와 이벤트 핸들러 (이벤트: 이벤트설명 - 이벤트핸들러)
1. abort: 웹 브라우저에서 로드중인 이미지를 강제로 중단시킬 때 발생 - onAbort
2. blur: 윈도우, 프레임, 또는 입력양식 폼의 구성요소가 초점을 잃었을 때 발생 - onBlur
3. click: 하이퍼링크 또는 입력양식 폼의 구성요소가 클릭되었을 때 발생 - onClick
4. dblClick: 하이퍼링크 또는 입력양식 폼의 구성요소가 더블클릭되었을 때 발생 - onDblClick
5. dragdrop: 사용자가 임의의 객체 또는 파일 등을 이동시킨 후 놓을 때 발생 - onDragdrop
6. error: 문자나 이미지를 읽어오다가 오류가 발생 - onError
7. load: 웹 브라우저가 HTML 문서나 프레임을 모두 읽은 후에 발생 - onLoad
8. unload: 사용자가 웹 브라우저에 읽어온 문서 보는 것을 종료하고 다른 웹사이트로 이동할 때 발생 - onUnload
9. move: 윈도우나 프레임의 위치가 이동될 때 발생 - onMove
10. reset: 사용자가 입력양식 폼에 있는 reset 버튼을 눌렀을 때 발생 - onReset
11. resize: 윈도우나 프레임의 창 크기가 변경될 때 발생 - onResize
12. submit: 사용자가 입력양식 폼에 있는 submit 버튼을 눌렀을 때 발생 - onSubmit
13. focus: 윈도우, 프레임, 또는 입력양식 폼의 구성요소가 초점(focus)을 받았을때 발생 - onFocus
#05 자바스크립트 내장 객체
1. Array: 배열의 처리에 사용됨
2. boolean: 논리 연산 처리에 사용됨
3. Date: 날짜처리에 사용됨
4. Function: 함수를 정의하여 사용할 수 있도록 함
5. Math: 수학 연산 처리에 사용됨
6. Number: 문자열로 표현된 수식을 연산가능한 수식으로 변환함
7. String: 문자열 처리에 사용됨
#06 웹브라우저 내장객체
- window
- frame
- document
- location
- history
-> frame, document, location, history가 window의 자식
#07 window 객체
[1] 속성
1. closed: 윈도우가 종료되었는지 여부를 나타냄 (true 또는 false로 설정됨)
2. status: 웹 브라우저의 상태 표시줄에 표시되는 문자열을 나타냄
3. defaultStatus: 웹 브라우저의 상태 표시줄에 표시되는 기본 문자열을 나타냄
4. document: document 객체에 대한 참조를 나타냄
5. frames: 현재의 윈도우 객체 내에 있는 모든 자식 프레임들에 대한 참조를 나타냄
6. history: history 객체에 대한 참조를 나타냄
7. length: 현재 윈도우 내에 포함되어 있는 자식 프레임의 수를 나타냄
8. location: location 객체에 대한 참조를 나타냄
9. name: 현재 윈도우의 이름을 나타냄
10. parent: window 객체 계층구조에서, 상위 객체에 대한 참조를 나타냄
11. self, window: 현재 window 객체 자신에 대한 참조를 나타냄
- document.write();
- self.document.write();
- window.document.write();
=> 셋 다 같은 기능을 함.
12. top: window 객체 계층구조에서, 최상위 객체에 대한 참조를 나타냄
[2] 메소드
1. alert(): 내장 함수 alert과 같은 기능 수행
2. confirm(string): 내장 함수 confirm과 같은 기능 수행
3. prompt(string, defaultString): 내장 함수 prompt와 같은 기능 수행
4. focus(): 윈도우에서 초점을 맞춤
5. blur(): 특정개체의 초점(focus)을 제거함
6. setTimeout(): 지정된 시간에 타이머를 설정함
7. clearTimeout(): setTimeout에 의해 설정된 타이머를 해제함
8. setInterval(): 지정된 기간동안 반복적으로 타이머를 설정함
9. clearInterval(): setInterval에 의해 설정된 타이머를 해제함
10. open(): 새로운 웹 브라우저 윈도우를 생성함
11. close(): 윈도우를 종료시킴
12. print(): 웹브라우저 화면에 보이는 내용을 출력함
#08 Frame 객체
윈도우를 작게 나누면 프레임이고, 그 안에 또 left, right 프레임 등으로 세분화되어 있다!
이런 느낌이다
[1] 속성
1. parent: 윈도우 계층구조에서 자신의 상위 윈도우에 대한 주소를 나타냄
2. top: 윈도우 계층구조에서 가장 상위 윈도우에 대한 주소를 나타냄
3. frames: 현재 윈도우의 자식 윈도우들에 대한 주소를 나타냄
- frames[0] : left 윈도우에 대한 주소
- frames[1] : right 윈도우에 대한 주소
- frames[2] : down 윈도우에 대한 주소
#09 Document 객체
[1] 속성
1. domain: 현재 문서를 생성한 서버의 도메인 이름을 나타냄
2. title: 현재 문서의 제목을 나타냄
3. location: 현재 문서의 주소(URL)를 나타냄
4. URL: 현재 문서의 주소(URL)를 나타냄
→ location 속성과 URL 속성은 같은 것을 보여줌!
5. lastModified: 문서가 마지막으로 수정된 날짜를 나타냄
6. referer: 현재 문서를 로드한 바로 이전 문서의 URL를 나타냄
7. bgColor: 문서의 배경색을 나타냄 (background)
8. fgColor: 문서의 글자색을 나타냄
9. cookie: 쿠키를 지정하는데 사용됨
→ 공격자가 웹 브라우저의 쿠키를 탈취할 때 이 쿠키 속성을 이용한다. 이 속성을 통해 해당 브라우저에서 어떤 쿠키값이 설정되어 있는지를 알 수 있다. 즉, 공격자가 하나의 공격 기법으로 사용할 수 있는 속성!
[2] 메소드
1. open(): 해당 윈도우에 자료를 보낼 준비가 되었다는 것을 알리고 출력할 HTML 문서를 열음
2. close(): 해당 윈도우에 출력할 자료의 전송이 끝났음을 알리고 open( ) 메소드로 열려진 HTML 문서를 닫음
3. clear(): 웹 브라우저에 표시되어 있는 문서를 지움
4. write(): 지정된 문서에 자료를 출력함
5. writeln(): 지정된 문서에 자료를 출력한 후, 연속해서 줄바꾸기를 출력함
6. getElementById(): 같은 문서에 정의되어 있는 id로 엘리먼트를 찾아줌.
(사용 예: id가 "input"으로 되어 있는 엘리먼트를 찾아달라고 하면 찾아줌.)
굉장히 효율적인 함수. 뒤에 .innerHTML 붙여서 쓰기도 함!
7. getElementsByTagName(): 같은 태그 네임을 갖는 엘리먼트가 여러 개일 수도 있으니까 메소드명에 's'가 붙고, 인덱스가 붙음. (태그네임: <html>, <p>의 'html', 'p' 같은 애들)
=> 6, 7을 가지고 html 문서 안에서 특정 엘리먼트들에 액세스 할 수 있음.
8. createElement(): 엘리먼트를 만듦
9. appendChild(): 자식으로 설정함 -> 프레임을 무한으로 만들어낼 수 있음 -> 서비스 거부 공격시 사용 (SetIntervar()와 함께 사용)
#10 History 객체
[1] 속성
1. current: 현재 웹페이지의 URL을 나타냄
2. length: History 목록(List)에 저장되어 있는 URL의 개수를 나타냄 (=지금까지 방문했던 웹사이트의 개수)
[2] 메소드
1. back(): 현재 웹페이지의 이전 URL로 이동시킴
2. forward(): 현재 웹페이지의 바로 다음 URL로 이동시킴
3. go(num): 지정된 값만큼 이전 또는 다음으로 이동시킴 num: 현재 웹페이지를 기점으로 상대적인 위치를 지정함 양수이면 앞으로, 음수이면 뒤로 이동함
4. go(“URL”): 지정된 URL 웹 페이지로 이동시킴
5. go(“title”): 지정된 제목(title)의 웹 페이지로 이동시킴
#11 Location 객체 (Location == URL)
location.href: 클릭하지 않아도 이동할 수 있게 지정. 공격자가 사용자 모르게 악성 사이트로 이동하도록 활용할 수 있다!
[1] 속성
1. href: 현재 문서의 URL 전체 문자열을 나타냄
2. host: URL 전체 문자열 중 호스트이름과 포트번호만 나타냄
3. hostname: URL 전체 문자열 중 호스트이름만 나타냄
4. protocol: URL 전체 문자열 중 프로토콜의 종류만 나타냄
5. pathname: URL 전체 문자열 중 디렉토리(경로)만 나타냄
6. port: URL 전체 문자열 중 서버의 TCP/IP 통신 포트(Port)만 나타냄
7. hash: URL 전체 문자열 중 해시값을 나타냄
8. search: 검색 엔진을 호출할 때 사용된 값을 나타냄
[2] 메소드
1. reload(): 현재 웹문서를 다시 읽어들임
2. replace(“URL”): 지정한 URL 사이트로 이동함
'3-1 > 웹 어플리케이션 보안' 카테고리의 다른 글
| #08 클라이언트 통제 우회 (0) | 2023.05.07 |
|---|---|
| #07 SQL Injection 공격 (0) | 2023.05.07 |
| #05 PHP 코드 취약점 실습 (Load File Read, Remote Command Execution, Remote Code Execution) (0) | 2023.03.22 |
| PHP 코드 간단 정리 (0) | 2023.03.22 |
| #04 PHP 실습 환경 설정 및 간단한 웹 프로그래밍(Form 메소드) (0) | 2023.03.22 |
