서론
이번주는 드디어 새로운 경험을 할 수 있는 과제가 나와서 좋았다 웹페이지에서 사용하는 HTML에 대해서 잠시 복습하고, HTML과 관련된 워게임을 풀이해 새로운 경험을 할 수 있는 기회가 되었다.
HTML 요약
HTML의 약자는 HyperText Markup Language이다 여기서 각 약자는 중요한 의미를 가진다
HyperText는 링크를 특징으로, Markup이라는 형식을 가진, Language, 언어라는 의미이지만 인간과 컴퓨터가 소통할 수 있는 약속을 가진 언어라고 볼 수 있다.
이러한 HTML을 구성하는 가장 중요한 요소는 무엇일까?
바로 TAG이라는 요소이다.
TAG의 종류에 대해서 알아보자
1.<!DOCTYPE html>
- 가장 앞에 들어가는 코드
- document type decalaration의 약자
- 다양한 html의 방식 중 어떤 형식을 사용하는지 알려줌
- 닫힘 태그가 없음
2.<html>,<head>,<body>
- 모두 닫힘 태그가 존재
- html 태그는 모든 태그들의 부모 태그이다, head태그와 body태그가 안에 포함되게 된다
- head 태그는 부가적인 정보를 담는 태그이다
- body 태그는 본문의 내용을 담는 태그이다
3.<head>,<meta>
- head에 들어가는 부가적인 정보를 포함하는 태그들이다
- title 태그에는 웹페이지의 제목을 넣어, 접속을 할 때 웹페이지의 제목을 설정할 수 있다
- meta 태그에는 웹페이지의 여러가지 메타 정보를 넣을 수 있다 가장 대표적인 예로 charset을 utf-8로 설정하는 것을 들 수 있다.
4.<strong>,<h1>,<h2>...
- body 태그의 텍스트를 강조하거나, 사이즈를 바꿀 수 있는 태그들이다
- strong 태그는 h'n'태그들과는 달리 symantic 요소이다. 의미론적 요소라는 말로, 이는 검색엔진이 검색을 할 때, 이 태그를 중점으로 정보를 수집한다는 이야기이다.
5.<li>, <ul>, <ol>
- ul태그는 unordered list의 약자로, default로 검은색 점으로 리스트를 만든다
- ol태그는 ordered list의 약자로, default로 숫자를 리스트로 만든다
- li 태그는 ul과 ol 태그 안에서 사용하는 태그로, 각 요소들을 감싸는 태그로 사용하면 된다.
6. <p>
- paragraph의 줄임말로, 이를 이용해서 단락을 구분할 수 있다.
- 내용이 길 때 사용하기도 한다.
7. <br>
- forced line-break의 줄임말로, 개행 태그이다.
- 닫힘태그 없이 사용 가능하다.
8.<img>
- 이미지를 표시할 때 쓰는 태그이다.
- 닫힘태그 없이 사용 가능하다.
- src attribute를 사용해 파일 이름을 넣을 수 있다.
- width, height attribute를 사용해 사이즈를 조절할 수 있다.
- alt attribute를 사용해 이미지가 없을 때 대체되는 텍스트를 작성할 수 있다.
- title attribute를 이용해 이미지의 설명을 띄울 수 있다.
9.<form>
- action attribute를 이용해 form이 submit될 때 처리하는 소스를 지정할 수 있음
- input 태그는 text input을 집어넣을 수 있다. (attr: type, name, value, method)
- type attr에서 hidden 속성을 통해서 정보를 숨겨 저장할 수 있다
- method attr을 이용해 get,post등 여러가지 방식을 이용해 form을 전송할 수 있다.
- select 태그는 여러가지 항목중 하나를 선택할 수 있는 태그이다. 선택할 수 있는 값은 option 태그 안에 넣는다(attr:name, value(option))
- label 태그를 이용해서 텍스트와 input, checkbox, etc 을 묶어 제목을 지정할 수 있다. (attr: for(label), id(input, checkbox, etc))
Write up
1. HTML source-code
맨 처음이라서 어떻게 해야하는지 몰랐지만, 우선 나와있는 힌트대로 challenge를 시작한 후에 개발자 도구를 (command+shift+i) 눌렀습니다
위와 같이 주석 처리된 문구에 비밀번호가 써져있었습니다.
우클릭 후+ edit as HTML을 누르거나, 더블클릭을 하여 비밀번호를 복사한 후, 입력했습니다.
결과물로 원래 사이트에 Validation 부분에, 해킹에 성공했다는 Validation password를 주석 처리된 문구를 이용해서 인증하라는 글이 나와 인증하니, 성공했다는 알림이 떴습니다.2. HTML disabled
이번에도 역시 challenge를 시작하니 사이트가 비활성화 되어있는 것을 확인했습니다.
활성화하지 않으면 아무것도 하지 못할 것 같은 느낌이 들어 우선 개발자 도구를 눌렀습니다.
input이 비활성화 되어있는 것을 보고, disabled attr을 지우고 아무거나 입력해 Member access 버튼을 누르니
성공화면이 떠 validation password이 뜨면서 성공할 수 있었습니다.
이는 승인된 사람이 아니어도 form을 마음대로 조작해 로그인할 수 있는 허점을 이용한 해킹인 것을 알 수 있습니다!
Inha Univ. CSE