<내용 정리>
HTML(Hyper Text Markup Language)
웹브라우저에 표시되는 웹페이지를 만들어달라고 컴퓨터에 요청하는 언어
물리학자 팀 버너스 리가 개발
태그
"시작 태그"(Start Tag)와 "종료 태그"(End Tag)로 구성
태그 안에 태그가 존재할 수 있음
잘 안쓰이는 태그는 사라지기도 함으로 다 외우는 것이 아니라 구조를 파악하여 검색하며 알아가는 것을 추천
속성
태그에 정보가 부족할 때 사용
무한한 정보 첨가 가능
자주 쓰이는 태그와 속성 정리
<html>
웹 페이지의 시작과 끝
<!DOCTYE>
문서 유형의 지정
ex) <!DOCTYE html>:html로 페이지 해석
<head>
웹 페이지의 정보, 문서에서 사용할 외부 파일들을 링크할 때 사용
<body>
브라우저에 실제 표시되는 내용
<title>
문서 제목 - <title>안의 내용이 웹브라우저의 제목 표시줄에 표시됨
<meta>
문자 인코딩 및 문서 키워드, 요약 정보
ex) <meta charset="utf-8"> : '웹 페이지의 문자 인코딩 방식을 utf-8로 지정해라'라는 의미
<a>
anchor, 웹 페이지나 외부 사이트 연결
구성 : <a herf="연결할 페이지나 사이트 경로"></a>
*<a>에서 사용할 수 있는 속성 값
1) target: 새 창 or 새 탭에서 링크를 열 때 사용
2) title: 링크의 툴팁(커서를 올렸을 때 나오는 설명)을 표시
<img>
이미지 삽입, 이미지 경로를 지정해줘야 함(1. 이미지 직접 다운로드 후, 파일 경로 삽입 2. 다른 웹페이지의 이미지 주소를 복사 후 삽입)
구성 : <img src="이미지 경로">
*<img>에서 사용할 수 있는 속성 값
1) width: 너비
2) height: 높이
3) alt: 이미지를 설명해 주는 대체 텍스트 추가
4) title: 툴팁
<ul>
unordered list, 순서가 없는 list
<ol>
ordered list, 순서가 있는 list
<ul>과 달리 기호가 아닌 숫자나 영문 숫자가 들어감
<li>
<ul>과 <ol> 안에서 각 항목을 나열할 때 사용
<p>
paragraph, 단락
<br>
줄 바꿈
<hn>
제목
<h1>~<h6>까지 존재
<form>
form(사용자가 입력한 정보를 서버로 전송할 때 사용하는 그러한 것들) 생성
*<form>에서 사용할 수 있는 속성 값
1) method: 전송방식 선택
1-1) get: url에서 보이게 전송
1-2) post: url에서 숨겨서 전송
2) name: form을 식별하기 위한 이름
3) action: form을 전송할 서버 쪽의 script 파일을 지정
<input>
form의 요소 중 하나로 사용자가 정보를 입력하는 부분을 만들어야 할 때 사용
구성 : <input type="유형" 속성="속성 값">
*<input>에서 사용할 수 있는 속성 값
1) name
2) value
*<input>의 type속성에서 사용 가능한 유형
1) text: 한 줄짜리 텍스트를 입력할 수 있는 텍스트 상자
2) password: 비밀번호 입력 필드
3) color: 색상표
4) button: 버튼
5) submit: 서버 전송 버튼
6) checkbox: 체크박스(2개 이상 선택 가능)
7) radio: 라디오 버튼(1개만 선택 가능)
8) hidden: UI에 표시되지 않지만 서버로 어떤 값을 전송하고 싶을 때 사용
9) file: 사용자가 파일을 서버에 전송할 수 있는 UI를 화면에 출력
<text area>
여러 줄의 긴 문장을 입력할 수 있는 양식
<label>
form 양식에 이름 붙이는 태그
<button>
form 요소중 하나, 페이지에 버튼을 넣고 form을 전송하거나 reset 할 때 사용
버튼의 형태만 만들고 눌리거나 했을 때 다른 동작을 하려면 따로 함수를 연결해야 함
<select>
사용자가 원하는 값을 선택할 수 있는 입력 폼 제공
<option>
<select>에서 원하는 값을 지정함
https://opentutorials.org/course/2039
HTML 수업 - 생활코딩
수업의 목적 본 수업은 HTML에 대한 심화된 내용을 다룹니다. HTML의 기본문법과 HTML의 주요한 태그들에 대한 수업을 담고 있습니다. 선행학습 본 수업을 효과적으로 수행하기 위해서는 웹애플리케이션에 대한 전반적인 이해가 필요합니다. 이를 위해서 준비된 수업은 아래 링크를 통해서 접근하실 수 있습니다. 웹애플리케이션 만들기 위의 수업에서는 웹을 구성하고 있는 여러기술을 얕고 넓게 배웁니다. 각각의 기술들이 어떻게 관계하고 있는지를 알려드리는 것이
opentutorials.org
[HTML] html 태그 정리
공부했던 자료 정리하는 용도입니다. 재배포, 수정하지 마세요. https://www.advancedwebranking.com/html/ The average web page from top twenty Google results Apparently, an average web page uses twenty-e..
pridiot.tistory.com
<워 게임 풀이>
1. HTML-source code
https://www.root-me.org/en/Challenges/Web-Server/HTML-source-code
Challenges/Web - Server : HTML - Source code [Root Me : Hacking and Information Security learning platform]
can’t connect to ch72 ( third challenge in App- System), am i alone?
www.root-me.org
크롬 개발자 도구(ctrl+shift+I) 또는 페이지 소스 보기(ctrl+U)를 사용한다.
그럼 이런 창을 얻을 수 있다.(페이지 소스 보기를 이용한 경우)
여기서
password: nZ^&@q5&sjJHev0를 입력하면
이렇게 확인을 시켜 준다.
다시 돌아와서 Validation에 password를 제출하면 아래와 같은 창이 뜨면 통과
2. HTML disabled
https://www.root-me.org/en/Challenges/Web-Client/HTML-disabled-buttons
Challenges/Web - Client : HTML - disabled buttons [Root Me : Hacking and Information Security learning platform]
can’t connect to ch72 ( third challenge in App- System), am i alone?
www.root-me.org
크롬 개발자 도구를 이용하면 다음과 같다.
소스 코드를 살펴보면
<input disabled type="text" name="auth-login" value>에서 속성 disabled를 사용하면 값이 전송되지 않고 UI에서 읽기만 가능하고 변경이 불가능하다. 따라서 이 disabled를 코드에서 삭제하면 된다.
삭제하니 입력이 가능해졌다. 이제 text에 아무 문자나 입력하고 버튼을 누르면
비밀번호를 얻을 수 있다.
처음에 아무것도 입력하지 않고 그냥 버튼만 누르니 처음 상태로 돌아갔다.
action의 주소 부분이 없어서 그런가? 하면서 주소를 찾았는데 이건 아무 상관이 없었다. 왜 이런 결과가 나오는지 의문이다...
3. Webhacking.kr ola-1번
editthiscookie를 이용하여 쿠키를 확인하고 변형하여 문제를 해결할 것이다.
editthiscookie를 사용하여 쿠키를 얻었더니 1이라는 값을 얻었다.
쿠키 값을 5와 6 사이의 값으로 설정해야 해결이 되니 5.1을 입력해본다.
그리고 다시 접속하니
해결!
풀면 퍼런 불이 들어오는데 귀엽다...
'Hacking Study > 웹 해킹 스터디(2020-1) 과제' 카테고리의 다른 글
| 6주차 과제 (0) | 2020.05.21 |
|---|---|
| 5주차 과제 (0) | 2020.05.16 |
| 웹해킹 4주차 (0) | 2020.04.19 |
| 웹해킹 3주차 과제 (0) | 2020.04.12 |
| 1주차 과제 (0) | 2020.03.25 |