HTML 기본 구조 이해
HTML의 기본 구조는 문서 형식 선언(Doctype), 루트 요소(html), 헤드(head), 본문(Body)로 구성된다.
tag와 속성
tag
태그는 HTML 요소의 시작과 끝을 나타내는 표시자이다. 일반적으로 <열리는태그>와 </닫히는태그>로 구성된다.
속성
속성은 태그에 추가적인 정보를 부여한다. 보통 속성명 = "값" 형태로 쓰인다.
예시 <a href="https://example.com" target="_blank">링크</a>
예시 속성
속성 설명 예시 id요소 고유 식별자 (JS, CSS에 사용) <div id="header">class여러 요소에 공통 스타일 적용 <p class="notice">style인라인 CSS 스타일 적용 <h1 style="color:red;">href링크의 대상 주소 <a href="https://example.com">src이미지, 스크립트 등 외부 파일 경로 <img src="logo.png">alt이미지가 로딩되지 않을 때 표시할 텍스트 <img alt="로고">title마우스 올리면 툴팁 표시 <button title="저장">type입력창, 버튼 등의 타입 설정 <input type="text">value기본값 설정 <input value="홍길동">placeholder입력창 안내 텍스트 <input placeholder="이름 입력">
Doctype
Doctype은 문서의 형식을 브라우저에 알려주는 선언문이다. (HTML의 가장 첫 줄에 위치)
<!DOCTYPE>은 "Documeent Type DEclartaion"의 줄임말로, HTML 문서가 어떤 HTML 버전으로 작성되었는지를 웹 브라우저에 알리는 역할이다. 이를 통해 브라우저는 해당 문서를 어떤 방식으로 *렌더링 해야 할지를 결정한다.
*렌더링: 코드나 데이터를 화면에 보이도록 그림을 바꾸는 과정
html
html은 HTML 문서의 최상위 요소이며, 모든 다른 HTML 요소들을 포함하는 부모 요소이다.
<!DOCTYPE html>
<html lang="ko">
<!-- HTML 문서의 내용 -->
</html><html>요소에는 lang속성이 포함될 수 있다. 만약, 영어로 작성된 문서라면 lang="en"과 같이 작성된다.
head
<head> 요소는 HTML 문서에서 사용자에게 직접 보이지 않는 메타데이터를 담는 부분이다. 웹 브라우저는 이 정보를 참고해서 문서를 어떻게 표시할지, 어떤 문자 인코딩을 쓸지, 외부 파일을 어떻게 연결할지 등을 결정한다
헤더 요소의 대표적 태그(tag)
<title>: :브라우저 탭에 표시될 제목
<meta>: 문서의 특성 정보를 정의
<link>: 외부 CSS 파일 등과 연결
<style>: 문서 안에 직접 CSS 작성
<script>: JavaScript 코드 삽입 또는 외부 JS 파일 연결
<base>: 문서 내 모든 링크의 기본 RL 지정
body
<body> 요소는 HTML 문서의 실제 내용을 담고 있는 본문이다. 웹 페이지를 구성하는 모든 텍스트, 이미지, 링크, 테이블, 폼 등의 콘텐츠는 <body> 요소 내에 포함된다.
바디 요소의 대표적 태그(tag)
<h1> ~ <h6>: 제목 (헤딩)
<p>: 문단 (paragraph)
<img>: 이미지 삽입
<a>: 하이퍼링크
<ul>, <ol>, <li>: 리스트 (unordered, ordered, list item)
<div>, <span>: 구역 및 인라인 요소 (CSS와 함께 자주 사용)
<table>: 표
<form>: 입력 폼 (로그인, 회원가입 등)
<button>, <input>: 버튼 및 입력 필드
<script>: JavaScript 코드
JavaScript 기본 문법 정리
1. alert()
브라우저에서 팝업 창을 띄워 알림을 보여주는 함수이다.
alert("안녕하세요!"); // 알림창에 메시지를 표시- 사용자의 입력은 받을 수 없고, 확인 버튼만 있는 단순한 알림
2. location.href
location.href는 현재 페이지의 URL을 가져오거나, 변경하여 이동 할 수 있는 속성이다.
console.log(location.href); // 현재 URL 출력
// 다른 페이지로 이동
location.href = "https://www.google.com";- 링크 클릭 없이도 페이지 이동을 JS로 제어할 수 있다.
3. document.cookie
document.cookie는 웹 페이지에서 쿠키를 읽거나 설정하는 데 사용된다.
// 쿠키 설정
document.cookie = "username=shinwon; path=/;";
// 쿠키 확인
console.log(document.cookie); // 출력: "username=shinwon"- 쿠키는 문자열로 저장되며,
;로 여러 항목을 구분한다.
4. 이벤트 핸들링
onclick
onclick이벤트는 클릭 동작이 발생했을 때 실행할 코드를 지정한다.
<button onclick = "alert('버튼이 클릭되었습니다!')">클릭</button>또는 JavaScript로 직접 설정할 수 있다.
document.getElementById("btn").onclick = funtion() {
alert("클릭 이벤트 발생!");
};onerror
onerror는 이미지나 스크립트가 로딩에 실행했을 때 실행된다.
<img src="없는이미지.png" onerror="alert('이미지를 불러올 수 없습니다.')">- 주로 이미지 대체 처리나 로깅 용도로 활용된다.
XSS 실습
XSS란?
XSS는 웹 페이지에 악성 스크립트를 삽입하여 사용자에게 실행되도록 만드는 공격이다. 주로 사용자의 쿠키 탈취, 세션 하이재킹, 피싱 등으로 이어질 수 있다.
1.Reflected XSS
공격자가 악성 스크립트가 담긴 URL을 생성하여 메일 등을 통해 사용자에게 전달한 후 실행하도록 하는 공격
What's your name? 에 got1을 입력하니
입력한 값이 URL을 통해 서버로 전송되고 페이지를 구성한다는 것을 알 수 있다.
위의 URL을 수정하여 google.com으로 웹 페이지를 변경해보겠다.
http://localhost/vulnerabilities/xss_r/?name=<script>location.href="https://www.google.com"</script>을 작성하고 Enter을 누르면 구글로 웹페이지가 변경되는 것을 확인할 수 있다.
2. Stored XSS
- 서버 DB 등에 저장 -> 나중에 다른 사용자가 그 페이지에 들어오면 자동 실행된다.
- 위험도 매우 높다.(피싱, 세션 탈취 등)
위 이미지와 같이 Message 부분에 웹 페이지에 쿠키를 팝업창에 띄워주는 스크립트를 작성하고 Sign Guestbook에 저장하면
이 페이지에 접속할때마다 쿠키 정보를 알려주는 팝업창이 뜨게 된다.
3. DOM-based XSS
DOM 구조를 이용하여 요소들을 수정하거나 추가하는 등 동적 행위를 할 때 접근하는 JavaScript에 악성 스크립트를 삽입하여 클라이언트 측 브라우저에서 악성 스크립트가 실행되도록 하는 공격
Select 버튼을 클릭하면 위 URL에 default라는 이름의 매개변수 값이 설정되는 것을 확인할 수 있다.
위 URL 매개변수 값을 임의로 수정하여 전송하면 English가 수정한 매개변수 값으로 바뀐 것을 확인할 수 있다.
default 매개변수의 값을 사용자가 직접 URL로 조작가능한 것을 확인할 수 있다.
default 매개변수 값에
<script>document.write(document.cookie)</script>
``` 을 입력하면 드롭다운 목록 최상위에 document.cookie 값이 나오는 것을 확인할 수 있다.
궁금한점
http://localhost/vulnerabilities/xss_r/?name=%E3%85%87%E3%84%B4#
name전에 ?는 무엇인가
?는 쿼리 문자열의 시작입니다.
GET 요청에서 URI에 파라미터를 포함할 때 사용되며 위에서는 name의 값을 전달할때 "여기서부터 파라미터야" 라고 알려준다고 보시면 됩니다.