'Study'에 해당되는 글 93건
- 2015.05.13 [11] XSS, webgoat, DOM XSS, AJAX Security
- 2015.05.13 [10] Paros, Proxy, url 파라미터 변조
- 2015.05.07 [09] php 게시판 생성, 비정상적으로 게시글 입력, 게시판 출력
- 2015.05.07 [08] cookie 및 session 이용한 인증, SQL Injection, secure 코딩
- 2015.05.07 [07] php 셋팅, mysql 연동, 계정 인증, Web 인증방식, cookie 이용 인증 및 logout
- 2015.05.07 [06] php 및 mysql 설치, 인증, SQL, get & post, http 헤더
- 2015.05.07 [05] 간단한 웹페이지 작성, index.html, main.css
- 2015.05.07 [04] Linux 초기설정, web 개요, html, webserver 구축
- 2015.05.07 [03] 자/후손 선택자, action, a, 부정 속성, px, %, em, css 색상, 배경 이미지, 가시속성(inline & block), 투명도, box, font, 위치속성, z-index
- 2015.05.07 [02] form, input, label, textarea, select, div, span, css, id, class, style, img
- 2015.03.23
임시 강사 수업
1. XSS
1) 간단 Paros 기능
Paros - Tools - Filter
Replace HTTP response body using defined pattern 클릭
... - Pattern : 김정은, Replace with : 돼지새끼
* Cross Site Scripting (XSS) : 게시글 등에 악성코드를 심어 클릭 시 클라이언트에게 피해를 주는 것
2) webgoat googlecode
webgoat googlecode 검색하여 webgoat zip 파일 다운로드
압축 풀고 webgoat 실행 후 웹페이지에 localhost/WebGoat/attack 실행
guest/geust 로 로그인 - Start WebGoat : 여러가지 공격 기법 실습 가능
http://testphp.vulnweb.com/
search art - <script>alert("test")</script> 해보면 알람 창이 뜬다.
3) XSS
[ ...WebGoat-5.4tomcatwebappsROOTxss.jsp ]
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=EUC-KR">
<title>XXXXXX</title>
</head>
<body>
<%@page import="java.lang.*"%>
<%@page import="java.util.*"%>
<%@page import="java.io.*"%>
<%@page import="java.net.*"%>
<%
String name=request.getParameter("name");
%>
username : <%=name%>
</body>
</html>
이제 웹에서 아래 주소 입력
http://localhost/xss.jsp?name=<script>alert("test")</script>
=> 경고창이 뜬다. 만약 이상한 페이지가 나오면 확장자 확인 필요
4) DOM XSS
[ xss1.jsp ]
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=EUC-KR">
<title>XXXXXX</title>
</head>
<body>
DOM XSS Testing....
<SCRIPT>
var position=document.URL.indexOF("age=")+4;
document.write(document.URL.substring(position.ducument.URL.length));
</SCRIPT>
</body>
</html>
http://localhost/xss1.jsp?age=21
이것으로 age의 값이 출력 된다면
http://localhost/xss1.jsp?age=<script>alert("teset")</script>
도 될 것이다.
5) AJAX Security
http://localhost/WebGoat/attack 들어가서 AJAX Security -> LAB: DOM-Based... 이동
( http://localhost/WebGoat/attack?Screen=49&menu=400 )
폼에 글씨를 쓰면 위에 자동으로 입력된다. 이것을 이용
소스보기 : 435 라인 복사
<a href="attack?Screen=7&menu=1900">Web Service SAX Injection</a>
이 소스를 방금의 폼에 입력하면 위쪽에 링크가 뜬다. 해당 링크를 누르면 해당 페이지로 이동.
* OWASP 에 보면 유행하는 웹의 취약점을 알 수 있다.
다시 아까의 http://localhost/WebGoat/attack 들어가서 AJAX Security -> LAB: DOM-Based...
여기 소스코드 중 581번줄
... Enter your name: <input value='' onKeyUp='displayGreeting(person.value)' name='person' type='TEXT'> ...
입력받은 값을 person으로 해서 displayGreeting 한다는 뜻이다.
DOMXSS.js 에 displayGreeting 이라는 함수의 구조가 있다.
( http://localhost/WebGoat/javascript/DOMXSS.js )
'Study > 웹보안' 카테고리의 다른 글
| [10] Paros, Proxy, url 파라미터 변조 (0) | 2015.05.13 |
|---|---|
| [09] php 게시판 생성, 비정상적으로 게시글 입력, 게시판 출력 (0) | 2015.05.07 |
| [08] cookie 및 session 이용한 인증, SQL Injection, secure 코딩 (0) | 2015.05.07 |
| [07] php 셋팅, mysql 연동, 계정 인증, Web 인증방식, cookie 이용 인증 및 logout (0) | 2015.05.07 |
| [06] php 및 mysql 설치, 인증, SQL, get & post, http 헤더 (0) | 2015.05.07 |
- 2015.03.20
임시 강사 수업
1. 사전 준비
1) paros 다운로드
http://sourceforge.net/projects/paros/files/Paros/Version%203.2.13/
exe. zip 파일 모두 받기
2) java se jdk 다운로드 - 32bit 용
http://oracle.com/technetwork/java/index.html
실습에선 7 버전을 사용
http://www.oracle.com/technetwork/java/javase/downloads/jdk7-downloads-1880260.html
3) Paros - Proxy 설정
C:Program Files (x86)Javajdk1.7.0_75 에 java가 정상적으로 설치 되었는지 확인
시스템 - 고급 시스템 설정 - 고급 - 환경 변수 - Path
- C:Program Files (x86)Javajdk1.7.0_75bin; - 확인 - 확인 - 확인
in cmd
java -version 으로 자바가 정상 설치 되었는지 확인
바탕화면의 바로가기 실행했을 때 경로가 다르게 나왔다면
C:Program Files (x86)Javajdk1.7.0_75binjavaw.exe 를 선택 해준다.
Paros에서 Tools - option - Local proxy 에서 localhost / 8080 인지를 확인
웹 브라우저 인터넷 옵션 - 연결 - LAN 설정 - 프록시서버 에 127.0.0.1 / 8080 기재 후 확인
이제 웹브라우저에서 사이트 이동을 하면 Paros에 목록이 뜬다.
4)
우측 메뉴 - Trap 아래쪽에 Trap request, Trap response 를 선택하면
Paros 에서 Continue를 누르며 웹페이지 이동하는데, 이 때 단계별로 내가 제어 가능하다.
2. URL 파라미터 변조
1) 동적 방식
원본
board/filedownload.asp?style=pds_etc&filename=bun.hwp&b_idx=1070
변조
board/filedownload.asp?style=pds_etc&filename=.....변조
2) Null Byte Injection
file name 뒤에 Null 값이 있는 것을 참조하여
../../../../etc/passwd NULL.jpg 등의 방법을 통해 시스템 파일을 다운로드
3) 멀티 파라미터 변조
4) 히스토리 파일을 통한 계정과 암호추출
각 사용자의 .bash_history 를 다운받아 분석하여 공격
5) 웹 로그를 통한 관리자 권한 획득
../../../../usr/...log/ 등을 통해 log를 보면
Get 방식이라면 아래와 같이 로그가 남음.
... /manage/login?&id=admin&pw=1234 ...
6) HTTP Header 값 변조를 통한 시스템 파일 접근
'Study > 웹보안' 카테고리의 다른 글
| [11] XSS, webgoat, DOM XSS, AJAX Security (0) | 2015.05.13 |
|---|---|
| [09] php 게시판 생성, 비정상적으로 게시글 입력, 게시판 출력 (0) | 2015.05.07 |
| [08] cookie 및 session 이용한 인증, SQL Injection, secure 코딩 (0) | 2015.05.07 |
| [07] php 셋팅, mysql 연동, 계정 인증, Web 인증방식, cookie 이용 인증 및 logout (0) | 2015.05.07 |
| [06] php 및 mysql 설치, 인증, SQL, get & post, http 헤더 (0) | 2015.05.07 |
- 2015.03.19
Remark)
1) Client -- Server <--> WebApplication
2) 웹 페이지가 없어도 get방식, post방식 등으로 정보를 전달하여 Server에서 처리할 수 있게 할 수 있다.
오늘은 php를 이용한 게시판 만들기 실습
1. mysql 셋팅
# mysql -u root -p
mysql> create database bbs;
1) 테이블 생성
num int
name varchar(20)
subject varchar(50)
body text
mysql> use bbs;
mysql> create table board( num int NOT NULL auto_increment, name varchar(20), subject varchar(50), body text, primary key(num) ); # num 부분은 입력하지 않아도 자동으로 올라간다.
mysql> desc board;
mysql> insert into board(name, subject, body ) values( 'admin', 'test', 'testing' );
mysql> select * from board;
2) 게시판 페이지 작성 (write.php)
[ write.php ]
<html>
<head>
</head>
<body>
<form method=post action=write_ok.php>
<table width=400 border=0 bgcolor=#c0c0c0>
<tr>
<td width=60 align=left> name </td>
<td align=left>
<input type=text name=name size=20>
</td>
</tr>
<tr>
<td width=60 align=left> subject </td>
<td align=left>
<input type=text name=subject size=50>
</td>
</tr>
<tr>
<td width=60 align=left> body </td>
<td align=left>
<textarea name=body cols=52 row=100></textarea>
</td>
</tr>
<tr>
<td colspan=10 align=right>
<input type=submit value="write">
</td>
</tr>
</table>
</form>
</body>
</html>
3) write_ok.php
- mysql_affected_rows()
=> 최근에 실행 된 쿼리의 변경 행 개수를 얻어옴
[ write_ok.php ]
<?
$DB = mysql_connect( 'localhost', 'root', 'a' );
mysql_select_db( 'bbs', $DB );
$sql = "INSERT INTO board( name, subject, body) VALUES( '$name', '$subject', '$body' )";
$result = mysql_query( $sql );
$count = mysql_affected_rows();
if ( $count == 1 ) {
echo "write done... ";
}
else {
echo "write failed...";
}
?>
4) 비 정상적인 방법으로 mysql에 게시글 입력하기
* Get 방식
http://192.168.133.142/write_ok.php?name=attacker&subject=attack start&abody=<script> alert('xss'); </script>
=> mysql 에선 body 내용이 안보인다.?
* Post 방식
<form method=POST action=http://192.168.133.142/write_ok.php>
<input type=hidden name=name value=attack2>
<input type=hidden name=subject value=attack start>
<input type=hidden name=body value=sending post test>
<input type=submit value=send>
</form>
이 태그를 javascript를 통해 전달한다. 단 엔터가 없이 편집,,
javascript:document.write("<form method=POST action=http://192.168.133.142/write_ok.php><input type=hidden name=name value=attack2><input type=hidden name=subject value=attack start><input type=hidden name=body value=sending post test><input type=submit value=send></form>");
=> mysql에선 항목 별로 띄어쓰기 뒤쪽은 무시된 것으로 뜸...?
웹 브라우저 화면은 클라이언트에서 실행되고 있는 화면이므로
절대 서버에서 동작하는 코드가 아니다.
즉, 입력 폼 없이도 데이터 전송은 가능하다.
서버 웹 어플리케이션은 클라이언트로부터 전달받은 데이터를 처리
입력 폼은 사용자로부터 값을 입력받아 서버에 전달해 주기 위한 용도
입력 폼 없이도 얼마든지 서버로 데이터를 전달할 수 있음
5) 게시판 목록 및 게시글 확인 페이지
[ list.php ]
<?
$DB = mysql_connect( 'localhost', 'root', 'a' );
mysql_select_db( 'bbs', $DB );
$sql = "select num, name, subject from board";
$result = mysql_query( $sql );
# $line = mysql_num_rows( $result ); # line 수 확인
# echo $line; # 정상적으로 확인되는지 테스트용
?>
<html>
<head></head>
<style>
p { color: white; }
</style>
<body>
<table width=600 border=0>
<tr height=20 bgcolor=#5e5e5e>
<td width=35 align=center>
<p> num </p>
</td>
<td width=300 align=center>
<p> subject </p>
</td>
<td width=50 align=center>
<p> name </p>
</td>
</tr>
<?
while( $row = mysql_fetch_array( $result ) ) {
?>
<tr>
<td height=20 align=center>
<?=$row[num]?>
</td>
<td heignt=20 align=center>
<a href="view.php?num=<?=$row[num]?>"> <?=$row[subject]?>
</td>
<td height=20 align=center>
<?=$row[name]?>
</td>
</tr>
<?
}
?>
</table>
</body>
</html>
[ view.php ]
<?
$DB = mysql_connect( 'localhost', 'root', 'a');
mysql_select_db( 'bbs', $DB );
$sql = "select * from board where num=$num";
$result = mysql_query( $sql );
$row = mysql_fetch_array( $result );
?>
<html>
<head></head>
<body>
<table width=500 border=0>
<tr height=20 bgcolor=#5e5e5e>
<td width=300 align=center>
<p><?=$row[subject]?></p>
</td>
</tr>
<tr height=20>
<td width=300 align=left>
<?=$row[body]?>
</td>
</tr>
</table>
</body>
</html>
'Study > 웹보안' 카테고리의 다른 글
| [11] XSS, webgoat, DOM XSS, AJAX Security (0) | 2015.05.13 |
|---|---|
| [10] Paros, Proxy, url 파라미터 변조 (0) | 2015.05.13 |
| [08] cookie 및 session 이용한 인증, SQL Injection, secure 코딩 (0) | 2015.05.07 |
| [07] php 셋팅, mysql 연동, 계정 인증, Web 인증방식, cookie 이용 인증 및 logout (0) | 2015.05.07 |
| [06] php 및 mysql 설치, 인증, SQL, get & post, http 헤더 (0) | 2015.05.07 |
- 2015.03.18 웹보안 [08]
1. SELinux 설정 해제
# vi /etc/sysconfig/selinux
6 SELINUX=disabled
2. Cookie 이용한 로그인 인증
in CMD
> telnet 192.168.133.142 80 이용하면 코드가 오는 것을 확인할 수 있다.
1) 방식
id & pw
Client ----> Web Server ----> Web app ----> SetCookie
Web browser <---- Apache <---- php(login_check.php) <┘
Set-Cookie
(Header에 붙여서 보내줌)
2) 단점
Web Browser가 꺼져도 Web Temp 디렉터리에 쿠키 정보가 PC에 남음.
즉 쿠키를 이용한 인증을 사용하는 사이트의 경우, 쿠키 파일만 있으면 인증 없이 로그인할 수 있다.
3. Session을 이용한 로그인 인증
- session_start();
session을 사용하려는 php 파일에서는 반드시 session_start()로 시작
1) 세션 이용 소스
# vi login_check.php
1 <?
2 session_start();
3 $DB = mysql_connect( 'localhost', 'root', 'a' ); # mysql Server 접속
4 $ret = mysql_select_db( 'test', $DB ); # DB 접속
5
6 $sql = "select * from user where id='$id' and pw=password('$pw')"; # que ry 실행
7 $result = mysql_query( $sql ); # 결과를 result에 저장
8
9 # $row = mysql_fetch_array( $result, MYSQL_NUM );
10
11 $count = mysql_num_rows( $result ); # result는 몇열인가?
12 if ( $count > 0 ) {
13 $_SESSION['id'] = $id; # session 에 id 입력
14 # setcookie('cookie', $pw, 0, '/'); # cookie 굽기, 만료시간 없음
15 }
16 header('location: http://192.168.133.142/login.php');
17
18 ?>
# vi login.php
1 <?
2 # if( !$_COOKIE[cookie] ) {
3 session_start();
4 if( !$_SESSION[id] ) {
5 ?>
6 <html>
7 <head>
8 <title> Log In </title>
9 </head>
10
11 <body>
12 <form method=POST action=login_check.php>
13 id <input type="text" name="id"><br>
14 pw <input type="password" name="pw"><br>
15 <input type="submit" value="Login">
16 </form>
17 </body>
18 </html>
19
20
21 <?
22 }
23 else {
24 echo "already login...";
25 echo "<br>";
26 echo "<a href='logout.php'> Logout </a>";
27 }
28 ?>
# vi logout.php
1 <?
2 # setcookie( 'cookie', '', 0, '/');
3 session_start();
4 session_destroy();
5 header('location: http://192.168.133.142/login.php');
6 ?>
=> 웹 브라우저가 쿠키인지, 세션인지를 알려면 WireShark를 이용해서 알 수 있다.
같은 Cookie 필드를 통해 전달하지만 값이 다름.
2) 사용자 세션 정보 in Session
리눅스 서버에 사용자별 세션 정보가 남아있다.
# cd /var/lib/php/session/
# ls
sess_v456jbkagbg41dron32km4jpc3
# cat sess_v456jbkagbg41dron32km4jpc3
id|s:5:"admin";
=> 이러한 세션 정보를 헤더에 실어 보내면 공격도 가능해진다.
4. SQL Injection을 통한 로그인 인증 우회
1) SQL에 내가 원하는 문장을 입력하는 공격
login_check.php 안에 있는 쿼리는
"Select * from user where id=' $id ' and pw=' $pw ' " 이다.
헌데 form 안의 id 항목에 [ ' or 1=1 # ] 이라는 SQL 명령을 넣으면 바로 인증이 되어버린다.
즉, id 의 우측 싱글쿼터를 막고 or 함수와 함께 참인 값을 넣은 뒤 뒤에 내용을 주석으로 처리한다면
쿼리를 통해 돌아오는 값은 무조건 참이 되는 것이다.
이렇듯, 복잡한 코드가 생길 수록 보안에 헛점이 생긴다.
2) Tip - Injection 문제
http://flack.hkpco.kr/index.php
Level 1 : ' or 1=1 #
Level 2 : ' or 1=1 )#
Level 3 : admin' )#
* Tip [ 보안 != 공격 ]
시스템 설치 및 설정 --> 서비스 운영 --> 장애 대응 및
프로그래밍 등이 기본 밑바탕이 되어야 한다.
3) 해당 공격 방어
- 솔루션
웹 방화벽
- 시큐어 코딩
특수문자 ID 금지
입력값 검증 등
[ 시큐어 코딩 ]
# vi login_check.php
1 <?
2 session_start();
3 $DB = mysql_connect( 'localhost', 'root', 'a' ); # mysql Server 접속
4 $ret = mysql_select_db( 'test', $DB ); # DB 접속
5
6 if( eregi('or', $id) || eregi('\'', $id) || eregi('#', $id) || eregi('and', $ id) ) {
7 echo "<script> alert('invalid value'); history.back();</script>";
8 exit;
9 }
10
11 if( eregi('or', $pw) || eregi('\'', $pw) || eregi('#', $pw) || eregi('and', $ pw) ) {
12 echo "<script> alert('invalid value'); history.back();</script>";
13 exit;
14 }
15
16 $sql = "select * from user where id='$id' and pw=password('$pw')"; # query 실행
17 $result = mysql_query( $sql ); # 결과를 result에 저장
18
19 # $row = mysql_fetch_array( $result, MYSQL_NUM );
20
21 $count = mysql_num_rows( $result ); # result는 몇열인가?
22 if ( $count > 0 ) {
23 $_SESSION['id'] = $id; # session 에 id 입력
24 # setcookie('cookie', $pw, 0, '/'); # cookie 굽기, 만료시간 없음
25 header('location: http://192.168.65.134/login.php');
26 }
27 else {
28 echo "<script> alert('login failed'); history.back();</script>";
29 exit;
30 }
31 ?>
'Study > 웹보안' 카테고리의 다른 글
| [10] Paros, Proxy, url 파라미터 변조 (0) | 2015.05.13 |
|---|---|
| [09] php 게시판 생성, 비정상적으로 게시글 입력, 게시판 출력 (0) | 2015.05.07 |
| [07] php 셋팅, mysql 연동, 계정 인증, Web 인증방식, cookie 이용 인증 및 logout (0) | 2015.05.07 |
| [06] php 및 mysql 설치, 인증, SQL, get & post, http 헤더 (0) | 2015.05.07 |
| [05] 간단한 웹페이지 작성, index.html, main.css (0) | 2015.05.07 |
- 2015.03.17
1. php 연동
1) php.ini 파일 수정
# vi /etc/php.ini
457 register_globals = On
462 register_long_arrays = On
# service httpd restart
* register_globals : 전역변수 사용 가능 설정 - $id, $pw 등을 사용하기 위함
2) php 기본 사용법
<?
$var = 0; # 변수 선언 시 $ 를 붙이면 된다. type 지정 및 선언 필요 없음
?> # <- 이 안에 php 내용 삽입
3) 출력 확인
변수를 받아 출력 되는지 확인
# vi login_check.php
1 <?
2
3 echo "id: $id";
4 echo "<br>";
5 echo "pw: $pw";
6
7 ?>
login.html 에서 확인 해보면 정상적으로 작동한다.
4) php변수
- 글로별 변수 : get, post 방식 상관 없이 처리 가능
- $_GET[] : get 방식으로 데이터가 전달 된 경우
- $_POST[] : post 방식으로 데이터가 전달 된 경우
[ 예제 ]
# vi login_check.php
1 <?
2
3 echo "id: $id";
4 echo "<br>";
5 echo "pw: $pw";
6
7 echo "<br>";
8 echo "<br>";
9
10 echo "id: $_GET[id]";
11 echo "<br>";
12 echo "pw: $_GET[pw]";
13
14 echo "<br>";
15 echo "<br>";
16
17 echo "id: $_POST[id]";
18 echo "<br>";
19 echo "pw: $_POST[pw]";
20
21 ?>
- POST 방식
http://192.168.133.142/login_check.php 에서 전송하면 POST 결과 확인 가능
- GET 방식
현재 login.html 소스코드가 POST 방식이기 때문에 아래 url을 통해 확인 가능
http://192.168.133.142/login_check.php?id=asdf&pw=asdf
* Tip
php 는 컴파일이 없기 때문에 에러메세지가 따로 나오지 않는다.
눈으로 소스코드를 찾아보거나 명령어 방법으로 에러를 찾아야 한다.
2. php와 mysql
1) mysql 관련 library in php
- mysql_connect() : mysql server 접속
server : localhost
username : root
password : xxxx
- mysql_select_db() : 사용할 DB 선택
DB_name : test
file descriptor : DB id - mysql_connect() 를 통해 반환됨
- mysql_query() : 쿼리 전송
query : 실행할 쿼리
- mysql_fetch_array() : 쿼리 결과를 배열 형태로 반환
result : 쿼리 실행 결과
상수 : 배열의 형태
MYSQL_NUM - 숫자로 가져옴
MYSQL_ASSOC - field 값으로 가져옴
MYSQL_BOTH - 둘 다로 가져옴
* 쿼리 실행 결과를 가져올 수 있는 또 다른 함수
- mysql_fetch_row()
- mysql_fetch_assoc()
ex)
# vi login_check.php
1 <?
2 $DB = mysql_connect( 'localhost', 'root', 'a' );
3 mysql_select_db( 'test', $DB );
4
5 ?>
=>
# mysql -u root -p
mysql> use test;
까지 진행 된 상황.
[ 예제 ]
# vi login_check.php
1 <?
2 $DB = mysql_connect( 'localhost', 'root', 'a' ); # mysql Server 접속
3 $ret = mysql_select_db( 'test', $DB ); # DB 접속
4
5 $sql = "select * from user"; # query 실행
6 $result = mysql_query( $sql ); # 결과를 result에 저장
7
8 while( $row = mysql_fetch_array( $result, MYSQL_NUM ) ) { # row에 NULL값이 들어갈 때까지 반복
9 echo "num: $row[0] name: $row[1] id: $row[2] pw: $row[3]"; # 반복문 없다면 첫번째 열만 출력함
10 echo "<br>";
11 }
12
13 ?>
2) 인증 예제
id & pw 인증
# vi login_check.php
1 <?
2 $DB = mysql_connect( 'localhost', 'root', 'a' ) ; # mysql Server 접속
3 $ret = mysql_select_db( 'test', $DB ); # DB 접속
4
5 $sql = "select * from user where id='$id' and pw=password('$pw')"; # query 실행
6 $result = mysql_query( $sql ); # 결과를 result에 저장
7
8 #$row = mysql_fetch_array( $result, MYSQL_NUM );
9
10 $count = mysql_num_rows( $result ); # result는 몇열인가?
11 echo $count; # 조건 맞는 열의 개수 저장하여 출력
12
13 ?>
=> http://192.168.133.142/login_check.php?id=admin&pw=xxxx 확인 시 1 이 나온다. 이를 이용하여 아래처럼 꾸며보자.
# vi login_check.php
1 <?
2 $DB = mysql_connect( 'localhost', 'root', 'a' ); # mysql Server 접속
3 $ret = mysql_select_db( 'test', $DB ); # DB 접속
4
5 $sql = "select * from user where id='$id' and pw=password('$pw')"; # query 실행
6 $result = mysql_query( $sql ); # 결과를 result에 저장
7
8 #$row = mysql_fetch_array( $result, MYSQL_NUM );
9
10 $count = mysql_num_rows( $result ); # result는 몇열인가?
11 if ( $count > 0 ) {
12 header('location: http://192.168.133.142/login.html');
13 }
14 else {
15 echo "authentication fail... ";
16 }
17
18 ?>
=> 인증은 된다. but 일반적으론 tcp 세션이 끊기기 전까지 인증이 유지되어야 하는데 여기선 그렇지 못하다.
3. Web 인증 방식
1) TCP 통신
연결을 계속 유지시키지는 않음
세션을 맺고 페이지를 모두 받아오면 바로 세션을 끊는다.
2) cookie, session
인증된 사용자임을 알기 위해 서버가 제공해주는 것들
* php 내의 이미 선언 되어 있는 변수
$_COOKIE[]
$_SESSION[]
3) cookie 굽기
- setcookie()
cookie name
cookie value
expire time
path
(option) domain
(option) security
# vi login_check.php
1 <?
2 $DB = mysql_connect( 'localhost', 'root', 'a' ); # mysql Server 접속
3 $ret = mysql_select_db( 'test', $DB ); # DB 접속
4
5 $sql = "select * from user where id='$id' and pw=password('$pw')"; # que ry 실행
6 $result = mysql_query( $sql ); # 결과를 result에 저장
7
8 # $row = mysql_fetch_array( $result, MYSQL_NUM );
9
10 $count = mysql_num_rows( $result ); # result는 몇열인가?
11 if ( $count > 0 ) {
12 setcookie('cookie', $pw, 0, '/'); # cookie 굽기, 만료 시간 없음
13 }
14 header('location: http://192.168.133.142/login.php');
15
16 ?>
# vi login.html
1 <?
2 if( !$_COOKIE[cookie] ) {
3 ?>
4 <html>
5 <head>
6 <title> Log In </title>
7 </head>
8
9 <body>
10 <form method=POST action=login_check.php>
11 id <input type="text" name="id"><br>
12 pw <input type="password" name="pw"><br>
13 <input type="submit" value="Login">
14 </form>
15 </body>
16 </html>
17
18
19 <?
20 }
21 else {
22 echo "already login...";
23 }
24 ?>
html 파일을 php로 바꿔준다.
# mv login.html login.php
# vi index.html
17 <li> <a href="login.php">Log In</a> < /li>
4) logout
아래와 같이 Logout 버튼을 만들 수 있다.
# vi login.php
21 else {
22 echo "already login...";
23 echo "<br>";
24 echo "<a href='logout.php'> Logout </a>";
25 }
# vi logout.php
1 <?
2 setcookie( 'cookie', '', 0, '/');
3 header('location: http://192.168.133.142/login.php');
4 ?>
=> cookie의 value를 초기화해서 쓸모 없는 cookie로 바꿔버림.
'Study > 웹보안' 카테고리의 다른 글
| [09] php 게시판 생성, 비정상적으로 게시글 입력, 게시판 출력 (0) | 2015.05.07 |
|---|---|
| [08] cookie 및 session 이용한 인증, SQL Injection, secure 코딩 (0) | 2015.05.07 |
| [06] php 및 mysql 설치, 인증, SQL, get & post, http 헤더 (0) | 2015.05.07 |
| [05] 간단한 웹페이지 작성, index.html, main.css (0) | 2015.05.07 |
| [04] Linux 초기설정, web 개요, html, webserver 구축 (0) | 2015.05.07 |
- 2015.03.16
1. 실습 사전 준비
1) php 설치 여부 확인
# rpm -qa | grep php
2) php 설치
- php.i386
- php-devel.i386
- php-mysql.i386
- 나머지 필요 항목은 yum이 알아서 설치
# yum install -y php.i386 php-devel.i386 php-mysql.i386
# service httpd restart
# cd /var/www/html
3) php 설치 확인
php 테스트 코드
# vi test.php
1 <?
2 phpinfo();
3 ?>
http://ip/test.php 에서 페이지 제대로 작동하는지 확인
4) mysql 설치
- mysql-server.i386
# yum install -y mysql-server.i386
# service mysqld start
# mysqladmin -u root password [New_Password]
5) mysql 로그인
# mysql -u root -p
Enter Password:
2. 인증
- ID, Password
- 공인 인증서
- OTP (One Time Password)
- 금액 인증 방식 (AA)
3. SQL
SQL : Structured Query Language
- 구조화된 질의 언어
- 관계형 데이터베이스 관리 시스템의 데이터를 관리하기 위해 설계된 특수목적 프로그래밍 언어 (위키백과)
1) SQL 명령어 종류
DDL ( Data Definition Language) : 데이터 정의어, 데이터 변경 불가
- CREATE : DB 나 Table 생성
- DROP : DB 나 Table 삭제
- ALTER : 속성 변경
DCL ( Data Control Language ) : 데이터 제어어
- GRANT : 권한 부여
- REVOKE : 권한 제거
- BEGIN
- COMMIT
- ROLLBACK
DML ( Data Manipulation Language ) : 데이터 조작어
- SELECT : 조회
- UPDATE : 수정
- DELETE : 삭제
- INSERT : 입력
2) mysql 명령어 - DDL
- db와 table 목록 출력
mysql> show databases;
mysql> show tables;
- db 선택
mysql> use [db_name];
- table 정의
mysql> desc [table_name];
- table 생성 : 데이터를 정의
mysql> CREATE [table_name]( column1 type, column2 type, ... );
* varchar(SIZE) : 선택한 size 로 만들어짐. 대용량 일 시 속도 빠름
* text : size 자동 설정, 대용량 일 시 크기를 계산해야 하기 때문에 속도 느림
- table 삭제 : 테이블 안에 데이터가 남아 있으면 안됨.
mysql> DROP TABLE [table_name];
3) mysql 명령어 - DML
* SELECT : 조회
전체 목록 조회
mysql> Select [column_name], [column_name] ... FROM [table_name];
조건 목록 조회
mysql> Select [column_name], [column_name] ... FROM [table_name] WHERE [condition];
* INSERT : 입력
mysql> INSERT INTO [table_name] VALUES( colomn1, column2, .... )
mysql> INSERT INTO [table_name] ( [column1_name], [column2_name], ...) VALUES( [column1_data], [column2_data], ... );
* UPDATE : 수정
mysql> UPDATE [table_name] SET [column_name] = value, [column_name] = value, ...; (X)
=> 가능하지만 모든 행의 데이터가 바뀌기 때문에 조건 필수
mysql> UPDATE [table_name] SET [column_name] = value, [column_name] = value ... [WHERE condition];
* DELETE : 삭제
mysql> DELETE FROM [table_name]; (X)
=> table 전체 삭제
mysql> DELETE FROM [table_name] WHERE [condition]
[ 실습 ]
mysql> show databases;
mysql> use test;
mysql> CREATE TABLE user ( num int, name varchar(20), id text, pw text );
mysql> show tables;
mysql> desc user;
mysql> DROP TABLE user;
mysql> CREATE TABLE user ( num int, name varchar(20), id text, pw text );
mysql> INSERT INTO user VALUES( 0, 'admin', 'admin', password('1234') );
mysql> INSERT INTO user( num, id, pw ) VALUES(1, 'guest', '1234' );
mysql> SELECT * FROM user;
mysql> SELECT * FROM user WHERE num = 0;
mysql> SELECT * FROM user WHERE id = 'admin';
mysql> SELECT * FROM user WHERE id = "guest";
mysql> SELECT * FROM user WHERE num = 0 and id = 'admin';
mysql> SELECT * FROM user WHERE num = 0 or id = 'admin';
mysql> UPDATE user SET name='guest', pw=password('1234') WHERE num = 1;
mysql> INSERT INTO user VALUES( 2, 'asdf', 'asdf', password('1234') );
mysql> DELETE FROM user WHERE id = 'asdf';
mysql> quit
4. 페이지 작성
[ longin.html ] [ login_check.php ]
input : id, pw -> Auth
<┘ 성공
<┘ 실패
# pwd
/var/www/html
# vi login.html
1 <html>
2 <head>
3 <title> Log In </title>
4 </head>
5
6 <body>
7 <form method=POST action=login_check.php>
8 id <input type="text" name="id"><br>
9 pw <input type="password" name="pw"><br>
10 <input type="submit" value="Login">
11 </form>
12 </body>
13
14 </html>
# vi index.html
17 <li> <a href="login.html">Log In</a> </li>
* Server side script : 서버에서 처리한 결과만 받아볼 수 있음
- php, jsp
* Client side script : 내가 볼 수 있음
- html, Ajax, JavaScript
5. GET, POST
1) http의 stack
http -- Application Protocal
tcp ┐
ip -- 전송
Ethernet ┘
[ HTTP Header ]
- Start-line : POST, URL, HTTP/1.1
- header : 서버와의 원할한 통신 위한 정보
- 빈칸
- Message-Body : id=asdf&pw=asdf .....
이렇게 Message-Body 에 값이 숨겨져서 인수가 전달 되는 것이 POST 방식이다.
반면, header의 url에 정보를 붙여 보내는 방식이 GET 방식이다.
하지만 헤더의 크기가 정해져 있고 url 창에 노출되기 때문에 상대적으로 보안에 취약하다.
ex)
http://gall.dcinside.com/board/list/?id=girl
protocol - URL - WebApplication - ? 로 URL과 변수 구분
(=> ? 앞에 index.php 가 숨겨져 있음)
'Study > 웹보안' 카테고리의 다른 글
| [08] cookie 및 session 이용한 인증, SQL Injection, secure 코딩 (0) | 2015.05.07 |
|---|---|
| [07] php 셋팅, mysql 연동, 계정 인증, Web 인증방식, cookie 이용 인증 및 logout (0) | 2015.05.07 |
| [05] 간단한 웹페이지 작성, index.html, main.css (0) | 2015.05.07 |
| [04] Linux 초기설정, web 개요, html, webserver 구축 (0) | 2015.05.07 |
| [03] 자/후손 선택자, action, a, 부정 속성, px, %, em, css 색상, 배경 이미지, 가시속성(inline & block), 투명도, box, font, 위치속성, z-index (0) | 2015.05.07 |
- 2015.03.13
1. iptables 동작 중지
# cd /etc/sysconfig
# rm -rf iptables
# iptables -F
# iptables -X
하면 재부팅 후에 다시 동작 안함
2. 간단한 웹 페이지 작성
1) <head>
설정(폰트 등), script
2) <body>
내용
3) bootstrap
이미 만들어진 코드를 이용
다운로드 하지 않고도 Bootstrap CDN 을 head만 붙여넣어도 된다.
* Tip - Linux 기본 환경 확인
# locale
# cd /var/www/html
# vi index.html
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
<link href="main.css" rel="stylesheet">
</head>
<body>
<div class="nav">
<div class="container">
<ul class="pull-left">
<li> <a href="#">home</a> </li>
<li> <a href="#">sitemap</a> </li>
</ul>
<ul class="pull-right">
<li> <a href="#">sign up</a> </li>
<li> <a href="#">Log In</a> </li>
<li> <a href="#">Help</a> </li>
</ul>
</div>
</div>
<div class="jumbotron">
<div class="container">
<h1> GFriend Fan Page's </h1>
<p> I Love Girl Friends ... </p>
</div>
</div>
<div class="learn-more">
<div class="container">
<div class="row">
<div class="col-md-4">
<h3> member </h3>
<p> Introduce member .. </p>
<a href="#"> member profile </a>
</div>
<div class="col-md-4">
<h3> schedule </h3>
<p> blar blar blar ... </p>
<a href="#"> more schedule </a>
</div>
<div class="col-md-4">
<h3> empty </h3>
<p> ..... </p>
</div>
</div>
</div>
</div>
</body>
</html>
# vi main.css
.nav a {
color: gray;
padding: 14px 10px;
font-weight: bold;
text-transform: uppercase;
}
.nav li {
display: inline;
}
.jumbotron {
height: 400px;
background-image:url('https://pbs.twimg.com/profile_images/551756034780311552/Nvpilgd9_400x400.jpeg');
}
.jumbotron h1 {
color: #ee82ee;
font-size: 50px;
font-family: Arial;
}
.jumbotron p {
color: #000000;
font-size: 20px;
font-weight: bold;
}
'Study > 웹보안' 카테고리의 다른 글
- 2015.03.12
※ 웹 해킹을 제대로 알려면 웹 언어를 제대로 이해해야 한다.
1. 초기 환경 설정
Teamviewer 10 개인용으로 설치
회의 참가하여 수업 진행
CentOS 5.11 32bit 를 VMware Typical 로 설치 진행
2. Web 개요
최초의 웹 사이트 : 1989년, info.cern.ch
지금까지 전 세계 수 억 개의 사이트가 새로 생겨났으며, 현재도 계속 늘어나고 있다.
기술 발전과 그에 대한 반작용으로 수많은 취약점이 발생한다.
(최초의 웹사이트는 어떠한 취약점도 없다.)
1995년 : 세계 최초로 Java aplet을 통해 웹에서 움직이는 화면이 등장했다.
넷스케이프가 Java를 제일 처음 채용하여 한때는 90%까지 점유율을 잠식했다.
최초의 공격 : 2000년 xss 공격으로 myspace에 공격이 이루어졌다.
xss 공격 : <script> 이용
CSRF 공격 : <img> 태그 이용
3. HTML
html : 정적인 페이지
-> Javascript 등을 이용하여 동적으로 표현 가능
-> Ajax 를 이용하여 이미지를 세밀하게 이용 가능
<html> : 가장 최상위
ㄴ <title>
ㄴ <body>
ㄴ <head> ...
4. Web 1.0
~ Java : Web 1.0
Web Browser & Web Server 만으로 동작
* Web Server
- Apache : Open Source
- IIS
Web Server로 부터 소스코드를 받아와 나의 Web Browser에서 구현한다.
5. Web 2.0
CGI 탄생 - 사용자의 detail한 요청을 세밀하게 처리
Web Browser - Interface - Web Server
CGI -> 사용자의 요청을 받아 처리
- C
- perl
- php
- jsp
* WAS (Web Application Server)
실제로는
Web Browser - Web Server - Application 으로 작동함
5. Web Server 구축
설치 여부 확인
# rpm -qa | grep httpd
httpd-2.2.3-91.el5.centos
Apache 실행
# service httpd start
80번포트 LISTEN 확인
# netstat -ant | grep 80
* Tip _ Apache
DocumentRoot(Web root)
dafault : /var/www/html/
default page : index.html
방화벽 해제 필요
# cd /var/www/html/
# vi index.html
1 <!DOCTYPE html>
2 <html>
3 <body>
4 <h1>My First Heading</h1>
5
6 <p>My First paragraph.</p>
7
8 </body>
9 </html>
방화벽 해제
# iptables -X
iptables: Too many links
# iptables -F
웹브라우저로 자신의 ip 접근하면 됨
'Study > 웹보안' 카테고리의 다른 글
| [06] php 및 mysql 설치, 인증, SQL, get & post, http 헤더 (0) | 2015.05.07 |
|---|---|
| [05] 간단한 웹페이지 작성, index.html, main.css (0) | 2015.05.07 |
| [03] 자/후손 선택자, action, a, 부정 속성, px, %, em, css 색상, 배경 이미지, 가시속성(inline & block), 투명도, box, font, 위치속성, z-index (0) | 2015.05.07 |
| [02] form, input, label, textarea, select, div, span, css, id, class, style, img (0) | 2015.05.07 |
| [01] 사전 준비 (0) | 2015.05.07 |
[03] 자/후손 선택자, action, a, 부정 속성, px, %, em, css 색상, 배경 이미지, 가시속성(inline & block), 투명도, box, font, 위치속성, z-index
| Study/웹보안 2015. 5. 7. 15:05- 2015.03.11
1. 후손 선택자
* 한단계 아래의 태그를 자손, 그 아래 위치한 모든 태그들은 후손으로 불린다.
선택한 태그 밑에 있는 모든 태그에 영향을 줌
<!DOCTYPE html>
<html>
<head>
<title>CSS Selector Basic</title>
<style>
/*id 속성값으로 header를 가지는 태그의 후손 위치에 있는 h1와, 전체 h2 태그의 color를 red로 적용*/
#header h1, h2 { color: red; }
/*header 태그의 h2가 아닌 header의 h1 및 전체 h2 태그를 의미한다.
만약 #header h2 만 주고 싶다면 #header h1, #header h2 라고 적어줘야 한다.*/
/*id 속성값으로 section을 가지는 태그의 후손 위치에 있는 h1 태그의 color를 oragne로 적용*/
#section h1 { color: orange; }
</style>
</head>
<body>
<div id="header">
<h1 class="title">Lorem ipsum</h1>
<h2 class="title">Lorem ipsum</h2>
<div id="nav">
<h1>Navigation</h1>
<h2 class="title">Navigation</h2>
</div>
</div>
<div id="section">
<h1 class="title">Lorem ipsum</h1>
<h2 class="title">Lorem ipsum</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</body>
</html>
=> header 아래쪽에 있는 nav 에도 h1 태그가 영향을 미침
=> h2 는 section에도 영향을 미침
2. 자손 선택자
한단계 아래에 있는 태그에만 영향을 줌
<!DOCTYPE html>
<html>
<head>
<title>CSS Selector Basic</title>
<style>
/*id 속성값으로 header를 가지는 태그의 자손 위치에 있는 h1 태그의 color를 red로 적용*/
#header > h1 { color: red; }
/*id 속성값으로 section을 가지는 태그의 자손 위치에 있는 h1 태그의 color를 oragne로 적용*/
#section > h1 { color: orange; }
</style>
</head>
<body>
<div id="header">
<h1 class="title">Lorem ipsum</h1>
<div id="nav">
<h1>Navigation</h1>
</div>
</div>
<div id="section">
<h1 class="title">Lorem ipsum</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</body>
</html>
=> header 아래쪽에 있는 nav 에는 h1 태그가 영향을 안미침
3. 마우스 Action 태그
<!DOCTYPE html>
<html>
<head>
<title>CSS Selector Basic</title>
<style>
/*h1 태그에 마우스를 올릴 경우에 color 속성에 red 키워드를 적용합니다.*/
h1:hover { color: red; }
/*h1 태그에 마우스를 클릭할 때 color 속성에 blue 키워드를 적용합니다.*/
h1:active { color: blue; }
</style>
</head>
<body>
<h1>User Action Selector</h1>
</body>
</html>
4. 자손선택 옵션 줘서 css 주기
<!DOCTYPE html>
<html>
<head>
<title>CSS Selector Basic</title>
<style>
ul { overflow: hidden; }
li {
list-style: none;
float:left; padding: 15px;
}
li:first-child { border-radius: 10px 0 0 10px; }
li:last-child { border-radius: 0 10px 10px 0; }
li:nth-child(2n) { background-color: #FF0003; }
li:nth-child(2n+1) { background-color: #800000; }
</style>
</head>
<body>
<ul>
<li>First</li>
<li>Second</li>
<li>Third</li>
<li>Fourth</li>
<li>Fifth</li>
<li>Sixth</li>
<li>Seventh</li>
</ul>
</body>
</html>
=> ul 에 있는 overflow 는 다음 참조 http://aboooks.tistory.com/84
& 햇갈리는 nth
<!DOCTYPE html>
<html>
<head>
<title>CSS Selector Basic</title>
<style>
li > a:first-child { color: red; }
</style>
</head>
<body>
<ul>
<li><a href="#">Condrasa</a></li>
<li><a href="#">Condrasa</a></li>
<li><a href="#">Condrasa</a></li>
<li><a href="#">Condrasa</a></li>
<li><a href="#">Condrasa</a></li>
</ul>
</body>
</html>
=> 첫번째만 나올 것 같지만 전체에 나온다. li 밑에 있는 a 의 첫번째 자손이라는 의미
=> 아래 것이 정답
<!DOCTYPE html>
<html>
<head>
<title>CSS Selector Basic</title>
<style>
li:first-child > a { color: red; }
</style>
</head>
<body>
<ul>
<li><a href="#">Condrasa</a></li>
<li><a href="#">Condrasa</a></li>
<li><a href="#">Condrasa</a></li>
<li><a href="#">Condrasa</a></li>
<li><a href="#">Condrasa</a></li>
</ul>
</body>
</html>
=> li의 첫번째 자손 중 a 태그에 해당 css를 준 것
5. a tag 관련 css
<!DOCTYPE html>
<html>
<head>
<title>CSS Selector Basic</title>
<style>
a { text-decoration: none; }
a:visited { color: red; }
/*방문한 경험 있는 링크는 red로 표시*/
/*href 속성을 가지고 있는 a 태그 뒤의 공간에 "- (href 속성)"을 추가*/
a:link::after { content: ' - ' attr(href); }
</style>
</head>
<body>
<h1><a>Nothing</a></h1>
<h1><a href="http://hanbit.co.kr">Hanbit Media</a></h1>
<h1><a href="http://www.w3.org/">W3C</a></h1>
<h1><a href="http://github.com/">Github</a></h1>
</body>
</html>
6. 부정 속성 주기
<!DOCTYPE html>
<html>
<head>
<title>CSS Selector Basic</title>
<style>
/*input 태그 중에서 type 속성값이 password가 아닌 태그의 background 속성에 red 적용*/
input:not([type=password]) {
background: red;
}
</style>
</head>
<body>
<input type="password" />
<input type="text" />
<input type="button" />
<input type="radio" />
<input type="image" />
<input type="file" />
<input type="checkbox" />
<input type="search" />
</body>
</html>
* Tip
7. Size 관련 css - px, %, em
<!DOCTYPE html>
<html>
<head>
<title>CSS Selector Basic</title>
<style>
h1 {
margin: 10px; /*px : 픽셀*/
font-size: 200%; /*% : 백분율*/
line-height: 2em; /*em : 배수*/
}
</style>
</head>
<body>
<h1>margine, font-size, line-height test</h1>
</body>
</html>
&
<!DOCTYPE html>
<html>
<head>
<title>CSS Selector Basic</title>
<style>
p:nth-child(1) { }
p:nth-child(2) { font-size: 100%; }
p:nth-child(3) { font-size: 150%; }
p:nth-child(4) { font-size: 200%; }
p:nth-child(5) { font-size: 15px; }
p:nth-child(6) { font-size: 20px; }
p:nth-child(7) { font-size: 2em; }
p:nth-child(8) { font-size: 3em; }
</style>
</head>
<body>
<p>Lorem ipsum dolor sit amet, consectetur adpiscing elit.</p>
<p>Lorem ipsum dolor sit amet, consectetur adpiscing elit.</p>
<p>Lorem ipsum dolor sit amet, consectetur adpiscing elit.</p>
<p>Lorem ipsum dolor sit amet, consectetur adpiscing elit.</p>
<p>Lorem ipsum dolor sit amet, consectetur adpiscing elit.</p>
<p>Lorem ipsum dolor sit amet, consectetur adpiscing elit.</p>
<p>Lorem ipsum dolor sit amet, consectetur adpiscing elit.</p>
<p>Lorem ipsum dolor sit amet, consectetur adpiscing elit.</p>
</body>
</html>
&
<!DOCTYPE html>
<html>
<head>
<title>CSS Selector Basic</title>
<style>
* { font-size: 12px; }
h1 { font-size: 3.0em; }
h2 { font-size: 1.5em; }
</style>
</head>
<body>
<h1>Lorem ipsum dolor sit amet</h1>
<h2>consectetur adipiscing elit. Sed nec purus elit, nec cursus dolor.</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nec purus elit, nec cursus dolor.</p>
</body>
</html>
=> 만약 크기를 0으로 줄 때에는 단위를 적지 않아도 된다.
8. css 색상 부여
<!DOCTYPE html>
<html>
<head>
<title>CSS Selector Basic</title>
<style>
/*이름으로 색상 부여*/
h1 { background-color: red; }
h2 { background-color: orange; }
/*rgb로 색상 부여*/
h3 { background-color: rgb(255, 216, 0); }
h4 { background-color: rgb(0, 255, 33); }
/*16진수로 색상 부여*/
h5 { background-color: #823600; }
h6 { background-color: #4f20b2; }
</style>
</head>
<body>
<h1>Header - 1</h1>
<h2>Header - 2</h2>
<h3>Header - 3</h3>
<h4>Header - 4</h4>
<h5>Header - 5</h5>
<h6>Header - 6</h6>
</body>
</html>
9. 배경에 이미지 넣기
<!DOCTYPE html>
<html>
<head>
<title>CSS Selector Basic</title>
<style>
body {
background-image: url('Desert.jpg')
/*경로를 'Other/Desert.jpg' 처럼 상대경로로 줄 수 있음
루트 폴더로 줄 때엔 '/Desert.jpg' 로 주면 됨*/
}
</style>
</head>
<body>
<h1>Lorem ipsum dolor amet.</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</body>
</html>
10. 가시 속성
Remark) span : inline, div : block
<!DOCTYPE html>
<html>
<head>
<title>CSS Selector Basic</title>
<style>
#box {
display: none;
}
</style>
</head>
<body>
<span>Dummy</span>
<div id="box">
<span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span>
</div>
<span>Dummy</span>
</body>
</html>
=> display 속성을 inline 으로 주면 div의 속성이 block에서 inline 으로 변한다.
& 투명도
<!DOCTYPE html>
<html>
<head>
<title>CSS Selector Basic</title>
<style>
#box {
background-color: black;
color: white;
/*투명도*/
opacity: 0.2;
}
</style>
</head>
<body>
<span>Dummy</span>
<div id="box">
<span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span>
</div>
<span>Dummy</span>
</body>
</html>
11. box 관련 css
각각의 px 값을 바꿔가며 확인 해볼것
<!DOCTYPE html>
<html>
<head>
<title>CSS Selector Basic</title>
<style>
div {
width: 100px; height:100px;
background-color: red;
border: 20px solid black;
margin: 10px; padding: 30px;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
&
<!DOCTYPE html>
<html>
<head>
<title>CSS Selector Basic</title>
<style>
div {
width: 100px; height:100px;
background-color: red;
/*margin: 위아래 왼쪽오른쪽
padding: 위아래 왼쪽오른쪽*/
margin: 0 30px; padding: 0 30px;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
12. 배경 이미지 관련 태그
<!DOCTYPE html>
<html>
<head>
<title>CSS Selector Basic</title>
<style>
body {
background-color: #E7E7E8;
background-image: url('BackgroundFront.png'),
url('BackgroundBack.png');
/*너비 높이*/
background-size: 100% 250px;
/*중첩 안되게 하는 옵션*/
background-repeat: no-repeat;
/*문서는 스크롤 되지만 배경이미지는 스크롤 되지 않아
배경 위에 텍스트가 떠 있는 느낌 표현*/
background-attachment: fixed;
/*그림 위치를 아래쪽으로 줌*/
/*background-position: bottom;*/
/*x축 y축*/
background-position: 0px 50%;
}
</style>
</head>
<body>
<h1>Lorem ipsum dolor sit amet</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p>Pellentesque est velit, laoreet vel rhoncus sit amet.</p>
<p>Proin vitae elit est, ut accumsan arcu. Sed consectetur.</p>
<p>Donec molestie massa id lorem hendrerit eu bibendum augue vestibulum</p>
<p>Morbi ut lorem in purus facilisis vulputate. Sed purus nibh.</p>
</body>
</html>
13. Font
<!DOCTYPE html>
<html>
<head>
<title>CSS Selector Basic</title>
<style>
.a { font-size: 32px; }
.b { font-size: 2em; }
.c { font-size:14pt; }
.d { font-size:10pt; }
/*폰트 이름에 공백 없으면 그냥, 공백 있으면 ''로 묶어주기*/
.font_arial { font-family: Arial; }
.font_roman { font-family: 'Times New Roman'; }
</style>
</head>
<body>
<h1 class="font_arial">Lorem ipsum</h1>
<p class="a">Lorem ipsum</p>
<p class="b">Lorem ipsum</p>
<p class="c">Lorem ipsum</p>
<p class="d">Lorem ipsum</p>
<p class="font_roman">Lorem ipsum</p>
</body>
</html>
14. 위치 속성
<!DOCTYPE html>
<html>
<head>
<title>CSS Selector Basic</title>
<style>
.box {
width: 100px; height: 100px;
/*절대 위치이기 때문에 겹쳐서 파란색만 보임
position: absolute;*/
position: static;
}
.red { background-color: red; }
.green { background-color: green; }
.blue { background-color: blue; }
</style>
</head>
<body>
<div class="box red"></div>
<div class="box green"></div>
<div class="box blue"></div>
</body>
</html>
& 각각의 위치 지정
<!DOCTYPE html>
<html>
<head>
<title>CSS Selector Basic</title>
<style>
.box {
width: 100px; height: 100px;
position: absolute;
}
.red { background-color: red;
left: 10px; top: 10px;
}
.green { background-color: green;
left: 50px; top: 50px;
}
.blue { background-color: blue;
left: 90px; top: 90px;
}
</style>
</head>
<body>
<div class="box red"></div>
<div class="box green"></div>
<div class="box blue"></div>
</body>
</html>
=> 이미지, 글자 등을 겹치는 효과도 가능
& z-index를 이용하여 겹치는 위치도 지정 가능
<!DOCTYPE html>
<html>
<head>
<title>CSS Selector Basic</title>
<style>
.box {
width: 100px; height: 100px;
position: absolute;
}
.box:nth-child(1) {
background-color: red;
left: 10px; top: 10px;
z-index: 100;
}
.box:nth-child(2) {
background-color: green;
left: 50px; top: 50px;
z-index: 10;
}
.box:nth-child(3) {
background-color: blue;
left: 90px; top: 90px;
z-index: 1;
}
</style>
</head>
<body>
<div class="box red"></div>
<div class="box green"></div>
<div class="box blue"></div>
</body>
</html>
=> z-index가 높은 것이 위에 나온다.
'Study > 웹보안' 카테고리의 다른 글
| [06] php 및 mysql 설치, 인증, SQL, get & post, http 헤더 (0) | 2015.05.07 |
|---|---|
| [05] 간단한 웹페이지 작성, index.html, main.css (0) | 2015.05.07 |
| [04] Linux 초기설정, web 개요, html, webserver 구축 (0) | 2015.05.07 |
| [02] form, input, label, textarea, select, div, span, css, id, class, style, img (0) | 2015.05.07 |
| [01] 사전 준비 (0) | 2015.05.07 |
[02] form, input, label, textarea, select, div, span, css, id, class, style, img
| Study/웹보안 2015. 5. 7. 15:02- 2015.03.10 웹보안
1. form tag
[기본]
<body>
<form>
<input type="text" name="search" />
<input type="submit" />
</form>
</body>
[form get 방식]
<body>
<form method="get">
<input type="text" name="search" />
<input type="submit" />
</form>
</body>
=> 주소에 입력해서 값을 보냄
[form post 방식]
<body>
<form method="post">
<input type="text" name="search" />
<input type="submit" />
</form>
</body>
=> 비밀스럽게 보냄
2. form - input type
<body>
<form>
<input type="text" name="search" /><br />
<input type="password" name="password" /><br />
<input type="file" name="file" /><br />
<input type="submit" />
</form>
</body>
아래 처럼 다양한 것을 확인해볼 수 있다.
<body>
<form>
<input type="text" /><br />
<input type="botton" /><br />
<input type="checkbox" /><br />
<input type="file" /><br />
<input type="hidden" /><br />
<input type="image" /><br />
<input type="password" /><br />
<input type="radio" /><br />
<input type="reset" /><br />
<input type="submit" />
</form>
</body>
3. form - label
<body>
<form>
<label>이름</label>
<input type="text" /><br />
</form>
</body>
보통은 아래처럼 많이 사용한다.
<body>
<form>
<label for="name">이름</label>
<input id="name" type="text" /><br />
</form>
</body>
4.textarea
<body>
<form>
<textarea>
show me the money.
</textarea>
</body>
5. select
<select multiple="multiple">
<optgroup label="HTML 5">
<option>김밥</option>
<option>떡볶이</option>
<option>순대</option>
<option>오뎅</option>
</optgroup>
<optgroup label="CSS 3">
<option>Animation</option>
<option>3D Transform</option>
</optgroup>
</select>
- optgroup 선택옵션을 묶을 때 사용
- select 에 multiple이라는 옵션을 주면 여러게 고를수 있다.
- 스마트폰에서 좀 더 정확히 볼 수 있다)
6. div && span
<body>
<div>Lorem ipsum</div>
<div>Lorem ipsum</div>
<div>Lorem ipsum</div>
<span>Lorem ipsum</span>
<span>Lorem ipsum</span>
<span>Lorem ipsum</span>
</body>
- div, span : 공간 분할태그
- div : block방식 (하나씩 차례대로 다음줄에 출력)
- span : inline방식 (한줄안에 차례대로 출력)
*
h1 태그 - 블락 방식
p 태그 - 블락방식
a, i 태그 -인라인 방식
7. CSS Basic
<!DOCTYPE html>
<html>
<head>
<title>CSS3 Selector Basic</title>
<style>
h1 { // 스타일 시트
color: red;
background-color: orange;
}
p{
background-color: blue;
}
</style>
</head>
<body>
<p>Hi Hello</p>
<h1>CSS3 Selector Basic</h1>
<p>The end</p>
</body>
</html>
* Tip
태그 자리에 * 를 줘서 태그를 주면 body 뿐 아니라 전체 모든 태그에 영향을 줌 ~ 까지만 알고 있기
ex)
* {
color: red;
}
다중 속성 부여
body, p, h1, h2, h3, h4, h5, h6 {
margin: 0; padding: 0; // 박스 속성
}
8. id 와 CSS 연동
<!DOCTYPE html>
<html>
<head>
<title>CSS3 Selector Basic</title>
<style>
/* id 속성값으로 header를 가지는 태그의 스타일을 지정*/
#header {
width: 800px;
margin: 0 auto;
background: red;
}
#wrap {
width: 800px;
margin: 0 auto;
overflow: hidden;
}
#aside {
width: 200px;
float: left;
background: blue;
}
#content {
width: 600px;
float: left;
background: green;
}
</style>
</head>
<body>
<div id="header">
<h1>Header</h1>
</div>
<div id="wrap">
<div id="aside">
<h1>Aside</h1>
</div>
<div id="content">
<h1>Content</h1>
</div>
</div>
</body>
</html>
9. class 속성 값으로 style 주기
1) Basic
<!DOCTYPE html>
<html>
<head>
<title>CSS3 Selector Basic</title>
<style>
/* class 속성값으로 select를 가지는 태그의 color 속성에 red 키워드로 적용*/
.select { color: red; }
</style>
</head>
<body>
<ul>
<li class="select">Lorem ipsum</li>
<li>Lorem ipsum</li>
<li class="select">Lorem ipsum</li>
<li>Lorem ipsum</li>
</ul>
</body>
</html>
2) 여러 class 의 속성을 가져다 사용
<!DOCTYPE html>
<html>
<head>
<title>CSS3 Selector Basic</title>
<style>
/* class 속성값으로 item을 가지는 태그의 color 속성에 red 키워드로 적용*/
.item { color: red; }
/* class 속성값으로 header를 가지는 태그의 background-color 속성에 blue 키워드로 적용*/
.header { background-color: blue; }
</style>
</head>
<body>
<h1 class="item header">Lorem ipsum</h1>
</body>
</html>
3) 특정 태그 및 클래스에 style 적용
<!DOCTYPE html>
<html>
<head>
<title>CSS3 Selector Basic</title>
<style>
/* li 태그 중 class 속성값으로 select를 가지는 태그의 color 속성에 red 키워드를 적용*/
li.select { color: red; }
</style>
</head>
<body>
<h1 class="select">Lorem ipsum</h1>
<ul>
<li class="select">Lorem ipsum</li>
<li>Lorem ipsum</li>
<li>Lorem ipsum</li>
<li>Lorem ipsum</li>
</ul>
</body>
</html>
4) style 과 태그의 속성을 일치시키자.
<!DOCTYPE html>
<html>
<head>
<title>CSS3 Selector Basic</title>
<style>
/* input 태그 중에서 type 속성값을 text로 가지는 태그의 background 속성 적용*/
input[type=text] {background: red; }
</style>
</head>
<body>
<form>
<input /> // type을 지정하지 않으면 기본 text가 되지만 css 적용안됨
<input type="text" />
</form>
</body>
</html>
5) 스타일 속성 세분화 - img 확장자
<!DOCTYPE html>
<html>
<head>
<title>CSS3 Selector Basic</title>
<style>
/* img 태그 중에서 src 속성값이 png로 끝나는 태그의 border 속성에 3px solid red 속성 적용*/
img[src$=png] { border: 3px solid red; }
/* img 태그 중에서 src 속성값이 png로 끝나는 태그의 border 속성에 3px solid red 속성 적용*/
img[src$=jpg] { border: 3px solid green; }
/* img 태그 중에서 src 속성값이 png로 끝나는 태그의 border 속성에 3px solid red 속성 적용*/
img[src$=gif] { border: 3px solid blue; }
</style>
</head>
<body>
<img src="jajq.png" width="200" height="250" />
<img src="node.jpg" width="200" height="250" />
<img src="ux.gif" width="200" height="250" />
</body>
</html>
* Tip - 확장자 말고도 다양한 옵션이 있음
img[src$=jpg] { border: 3px solid green; } // 특정 값으로 끝남
img[src^=jpg] { border: 3px solid green; } // 특정 값으로 시작
img[src~=jpg] { border: 3px solid green; } // 특정 값을 단어로 포함
img[src*=jpg] { border: 3px solid green; } // 특정 값을 포함
'Study > 웹보안' 카테고리의 다른 글
| [06] php 및 mysql 설치, 인증, SQL, get & post, http 헤더 (0) | 2015.05.07 |
|---|---|
| [05] 간단한 웹페이지 작성, index.html, main.css (0) | 2015.05.07 |
| [04] Linux 초기설정, web 개요, html, webserver 구축 (0) | 2015.05.07 |
| [03] 자/후손 선택자, action, a, 부정 속성, px, %, em, css 색상, 배경 이미지, 가시속성(inline & block), 투명도, box, font, 위치속성, z-index (0) | 2015.05.07 |
| [01] 사전 준비 (0) | 2015.05.07 |
