-
웹해킹 2주차 - HTML해킹 2021. 1. 1. 11:20
HTML : hyper text markup language - 하이퍼텍스트(링크)를 특징으로 하는 마크업 형식의 언어
HRML의 역사: GML -> SGML -> SGMLguid
DOCTYPE - 자신이 작성한 HTML 코드가 어떤 방식인지 알려주는 문자
(ex) XHTML ~ 등등
태그
전체태그는 <html> </html>로 감쌈
문서 태그
문서 태그는 <head> </head>로 감쌈
타이틀: <title> 타이틀 </title>
<meta charset="utf-8">: 한글 깨지지 않기 위해 넣는 것
본문 태그
본문 태그는 <body> </body>태그로 감쌈
텍스트 강조 : <strong>내용</strong>
제목(헤딩): <h1>제목</h1> -> 굵고 큰 글자, 자동 줄바꿈
소제목: <h2>소제목</h2>
링크: <a>링크</a>
<li></li>
그룹핑: <ul></ul> -> 태그 안에 태그가 있을 수 있음
숫자 순서 그룹핑: <ol></ol> -> 태그 안에 태그가 있을 수 있음
속성
href="링크주소"
새 탭에서 열기: target="_blank"
마우스로 미리보기: title="제목"
이외 태그
P태그 : 단락을 나누는 태그
-줄바꿈과 여백을 통해 구분
-<p>단락</p>로 구분
-<br>을 이용하여 단락 간 줄바꿈 조절 가능
-<br> 두번 사용하면 완전 p태그와 모양은 같음
이미지태그: 이미지를 불러오는 태그
-<img src="이름">
-크기 변경은 속성으로 width="크기" height="높이"
- 엑박에 뜨는 이미지 이름 alt="이름"
- 마우스에 대면 나오는 이름 title="이름"
form(폼): 사용자가 입력한 정보를 서버로 전송할 때 쓰는 것
-<form>형식</form> 으로 만들고 안을 구성하면 됨
- input type="타입"으로 문구박스(컨트롤,필드)를 만들 수 있음
- 타입으로는 text, password submit 등이 있음
- 속성으로 action=""을 이용하여 받은 정보를 어떻게 처리할 지 설정 가능
- value="" 속성으로 기본적으로 적혀있도록 설정 가능
- 컨트롤은 속성 name="이름"으로 설정 가능
- <textarea>디폴트 문자 작성</textarea> - 별도의 문자박스
=속성 cols="숫자" -> 가로
=속성 rows="숫자" -> 세로
선택지: 사용자가 항목을 선택할 수 있도록 하는 것
- <option>옵션이름</option> 으로 구현
- 선택지를 <select> </select> 로 묶어줄 수 있음 =>콤보박스로 구현됨
- 옵션에서 value="" 속성으로 전송 데이터를 선택 가능
- 셀렉트에서 mutiple 속성을 이용하여 여러개 선택 가능
버튼: 말 그대로 버튼(form에서 submit와 같은 것)
- <input type="button"> 으로 구현 가능
- value값을 이용하여 안에 내용 구현 가능
- 경고창은 onclick="alert('내용')"으로 구현 가능
= <input type="reset"> 태그로 정정 버튼 구현 가능
히든필드: 겉으로 드러나지 않고 안보이게 서버와 정보를 전송하게끔 하는 것
- <input type="hidden"> 으로 구현 가능
- 활용법 생각해보기
레이블(label): 텍스트에이리얼 대용으로 쓸만한것
- p태그 내에 있는 text: password : 같은 문구를 <label> </label>로 감싸 기술
- 각각의 레이블이 어떤 것들의 레이블인지를 알려주기 위해 for="해당id" 속성으로 구분시킬 수 있음
- 레이블 태그를 필드 태그까지 감싸버리면 위의 짓을 안해도 됨
- 보이는 차이는 없지만 기능적인 차이는 있음(레이블을 선택해도 해당 필드에 커서가 놓아짐)
메소드: 정보를 url이 아닌 포스트 방식으로 전송하기 위해 쓰는 속성
- form 태그 내에서 method="방식" 속성으로 구현
- 방식 중에는 get, post가 있는데 get은 url, post는 비url로 전송
- form 태그를 이용하여 정보 전송 시 대부분 post 방식을 이용함
- 서버 쪽에서 요구하는 방식으로 전송함
파일 업로드
- 파일 전송에 필요한 부분은 같은 form 태그로 감싸기
- 파일을 전송하기 위해 페이지에 올리는 UI를 구현하기 위해서는 input 태그의 "file" type 속성을 이용하면 됨
- 제출은 id pwd처럼 "submit" type의 속성을 가진 input 태그로 구현
- 파일 업로드 시에 form 태그에 enctype="multipart/form-data" 속성을 반드시 넣어야하며 method는 post로 설정해야함
과제2.1) HTML - source code 과제
비밀번호 페이지에서 개발자 도구 element탭에 비밀번호가 주석처리 되어있음
(오른쪽 클릭 - 페이지 소스 보기 로는 비밀번호를 볼 수 없었다)
clear
과제2.2) Webhacking.kr old
오 신기
코드가 대충 이런데 hrml 코드는 딱히 별거가 없다
php 코드 안을 보면 대충 COOKIE가 6이상일때는 레벨1 5초과일때는 solve 라니까 5.1이면 풀릴듯
일케했는데 안풀려서 5.2도 해보고 5.3도 해보고 5.4도 해보고 세션이 만료되었는지 로그인이 풀리고 해서 다시 로그인 하고 들어와보니
깬거같다 뭐지
과제2.3) HTML - disabled
비활성화 되어있는 제출란
코드를 보아하니 별거없네 싶더만 form 태그가 접혀 있었다
disabled 되어 있는 input 태그들을 활성화 시켰음(문제 제목이 곧 힌트였다)
이러면 되는건가
된듯!!
'해킹' 카테고리의 다른 글
웹해킹 7주차 - Linux (0) 2021.01.11 웹해킹 6주차 - CSRF (0) 2021.01.06 웹해킹 5주차 - XSS (0) 2021.01.04 웹해킹 3주차 - JAVASCRIPT (0) 2021.01.04 웹해킹 1주차 - 웹 (0) 2021.01.01