'전체 보기'에 해당되는 글 186건
- 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.05.07 [01] 사전 준비
- 2015.05.07 [37-40] DFS 분산 파일 시스템, ftp, ftps, Webserver
- 2015.05.07 [36] DNS 동적 업데이트 및 이중화
- 2015.05.07 [35] DHCP 인증 with AD
- 2015.05.07 [34] 메일서버 + VPN 문제 (2) _ VPN 설정, DHCP Local 멀티넷, DHCP 원격 멀티넷
- 2015.05.07 [33] 메일서버 + VPN 문제 (1) _ Nmail 설치
- 2015.05.07 [32] DNS 전달자, 조건부 전달자
- 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 |
- 2015.03.09
1. 사전 준비
Visual Studio Express 2013 for Web 설치
https://www.visualstudio.com/en-us/products/visual-studio-express-vs.aspx
File - Browser with 에서 Chrome 으로 변경
HTML 할 수 있어야 한다
(HTML 여러가지 테크들 배울것이다)
* DNS 수푸풀
네이버에 비번쳣는데 암호가틀렸다 그 화면나오면 보통 내가 잘못쳤구나 하지?
그걸 이용해서 해킹할 수 있다
해커는 실제 네이버와 동일한 웹페이지 하나 만들고, 사람들이 이 웹페이지에 와서
ID/PWD 친다. 그럼 이 정보는 해커에게 가고 암호다시쳐라라는 화면에서 다시치면
진짜 네이버로 넘어가게 해준다. 이런식으로 해킹가능
* 인터넷 vs 웹 차이점
인터넷?
-전세계를 연결하고있는 국제통신망
웹?
-인터넷 위에서 서비스를 제공하고 있는 것
* 그레이해커
-나쁜녀석들을 캐내기 위한 해커
* 보안 뉴스 사이트
네이버에 데일리시큐 치면 나온다.
%%%%%%%%%%%% (속성값들 여러가지 예제 코드있는 사이트)
w3schools.com
%%%%%%%%%%%%
'Study > 웹보안' 카테고리의 다른 글
- 2015.03.05
1. DFS 분산 파일 시스템
[ 분산 파일 시스템(distributed file system)_네임스페이스 문제 ]
# 시나리오 : itbank 회사에 파일서버를 2대를 운영 중에 있었습니다. 파일서버 이용자
들은 2대의 파일서버를 이용할 때 2대의 IP를 번갈아 가며 이용해야 하기에 불편함을
가지고 있었습니다. 해서 시스템 관리자인 여러분은 물리적으로 상이한 2대의 시스템의
공유 자원을 논리적으로 하나의 공유 디렉토리로 묶기로 결정.
# DFS 네임스페이스를 이용하여 2대의 파일서버를 논리적으로 하나의 영역으로 묶어
서비스하세요.
1. Server1 파일 서버 구축(공유)
- 1G 하드디스크 2개 추가 후 X, Y 드라이브로 문자 할당
- X 드라이브 공유 ( administrator 모든 권한 )
) X 드라이브 않에 Server1_X.txt 생성
- Y 드라이브 공유 ( administrator 모든 권한 )
) Y 드라이브 않에 Server1_Y.txt 생성
2. Server2 파일 서버 구축(공유)
- 1G 하드디스크 2개 추가 후 X, Y 드라이브로 문자 할당
- X 드라이브 공유 ( administrator 모든 권한 )
) X 드라이브 않에 Server2_X.txt 생성
- Y 드라이브 공유 ( administrator 모든 권한 )
) Y 드라이브 않에 Server2_Y.txt 생성
3. Server3 DFS Server 구축
- 네임 스페이스 이름 : itbank
- DFS 디렉토리 트리 : itbank\server1\X (Server1의 X 드라이브를 대상으로)
\Y (Server1의 Y 드라이브를 대상으로)
itbank\server2\X (Server2의 X 드라이브를 대상으로)
\Y (Server2의 Y 드라이브를 대상으로)
===========================================================
확인 :
Client1에서 Server3의 공유자원 접근 후 server1, server2 디렉토리가 모두 보이나 확인
[Tip]
1) 서버관리자 - 역할 추가 - 파일 서비스 - 분산 파일 시스템
2) ip 주소 적고 찾으면 됨
2. FTP
[방법]
관리도구 - 역할 추가 - IIS - FTP 추가 설치
IIS 관리자 - 사이트 - Default 웹서버 중지
- 사이트 우클릭 - FTP 사이트 추가 - 원하는 설정 적용 (기본 연결로 설정)
고급 보안이 포함 된 방화벽 - tcp의 20, 21, 1025-65535 포트 개방
[Client 접속 방법]
cmd - ftp ftp서버IP 입력
[ FTP 기본 문제 ]
# Server1 User 추가 : test1, test2
1. Server1에 FTP 서버 구축
- C:\
- SSL 인증 없음
- test1 읽기/쓰기 권한
- test2 읽기 권한
- FTP 메세지
) 배너 : 오셨습니까.
) 시작 : 파일 전송 서비스를 시작합니다.
) 끝내기 : 파일 전송 서비스를 종료합니다.
- FTP 디렉토리 목록 스타일 : UNIX
확인 :
# Server2에서 FTP 접속
- test1 : 파일 업로드 및 다운로드 가능하면 성공
- test2 : 파일 다운로드 가능하면 성공. 업로드는 불가능
# 배너 메세지 확인
# 디렉토리 목록 스타일 UNIX 인지 확인
[ FTP(가상 디렉토리 및 홈 디렉토리) 문제 ]
# Server1 FTP Server
# Local User 추가 : samadal, ddasig
# C:\LocalUser 디렉토리 생성
# C:\LocalUser\samadal 디렉토리 생성 후 디렉토리 안에 samadal.txt 생성
# C:\LocalUser\ddasig 디렉토리 생성 후 디렉토리 안에 ddasig.txt 생성
# C:\전역 디렉터리 생성 후 디렉토리 안에 전역입니다.txt 생성
1. FTP Server 설정
- SSL 인증 없음
- 모든 사용자 : 읽기/쓰기
- FTPROOT 디렉토리 : C:\LocalUser
- FTP 사용자 격리 : 사용자 이름 실제 디렉터리(격리 안 함)
- 가상 디렉토리 : C:\전역
별칭 : itbank
확인 :
# samadal 계정 FTP 접속 후 상위 디렉토리로 이동 가능시 성공
# ddasig 계정 FTP 접속 후 상위 디렉토리로 이동 가능시 성공
# 두 계정 모두 itbank라는 가상 디렉토리 접근 가능하면 성공
[ FTP(접근통제 및 계정 홈디렉토리) 문제 ]
# Server1 FTP Server
# Local User 생성 : ddasig, samadal
# C:\LocalUser 않에 ddasig, samadal 디렉토리 생성
1. FTP Server 설정
- SSL 인증 없음
- 지정되지 않은 클라이언트에 대한 액세스 : 거부
허용 항목 : 100.100.100.130(Client1)
- 사용자 이름 디렉터리에서 시작(격리)
- 모든 사용자 : 읽기/쓰기 권한 부여
- FTPROOT 디렉토리 : C:\
확인 :
# Server2에서 ftp 서버 접속 차단되면 성공
# Client1에서 ddasig, samadal 접속하여 접속된 경로가 어딘지 확인(pwd)
# 자신의 홈 디렉토리에서 상위 디렉토리(FTPRoot 디렉토리)로 이동 안 되면 성공
3. FTPS
[일반 FTP 의 보안상 취약점]
Wireshark 설치 - 랜카드 설치 후 패킷 감시 시작
한글 내용의 txt 파일 다운로드 시 FTP-DATA 라는 프로토콜로 해당 내용을 확인할 수 있다.
FTP DATA 를 아래쪽에서 눌러서 확인해보면 16진수로 나온다. FTP DATA 우클릭 - COPY - BYTE - Offset Hex
복사한 HEXA 코드를 프로그램 이용하여 디코딩 해보면 내용을 그대로 볼 수 있다.
즉 암호화가 되지 않아 스누핑 당했을 시 내용이 그대로 노출된다.
따라서 SSL 프로토콜을 이용하여 보안 및 무결성(변조 여부 확인)을 향상시켜줘야 한다.
하지만 리눅스에서 사용 시 Samba를 이용해야 하기 때문에 잘 사용하진 않는다.
[방법]
IIS 관리자 - HOSTNAME - 서버 인증서 - 자체 인증된 인증서 만들기 - 이름 넣고 확인
FTP 서버 - FTP SSL 설정 - 만들어 놓은 SSL 인증서 선택 - SSL 연결에 128비트 암호화 사용 - 적용
1) SSL 연결 허용 : SSL 해도 안해도 연결 허용
2) SSL 연결 필요 : SSL만 이용
FTP 의 바인딩 설정에서 IP 주소가 * 혹은 본인의 IP 인지 확인
[ FTPS 문제 ]
# 브릿지 설중 후 진행
1. Server1에 IIS 역할 추가(FTP 게시 포함)
2. 기본 웹 사이트 중지 또는 제거
3. FTP 게시 추가
- 사이트 이름 : 자유
- FTPRoot 디렉토리 : 자유
- 연결 바인딩 : 모든 IP
- 포트 21
- SSL 필요
- 기본 인증 : 모든 사용자 읽기/쓰기 권한
4. 인증서 제작
- IIS -> 서버 인증서 -> 자체 서명된 인증서 만들기
) 인증서 이름 : 자유
5. FTP SSL 인증서 선택 후 128비트 암호화
확인 :
리얼 PC에 FileZilla 실행 후 FTPS 서버 접속 후
인증서 받은 후 보안 통신 되는지 확인
4. Webserver
역할추가 - IIS 기본 설치 - Hostname - 사이트 - Default Web Site 제거
C:\inetpub\wwwroot 안에 IIS의 기본 페이지가 만들어져 있다. 안에 내용물 삭제
이 곳에 test.htm 파일을 생성
<title>정지웅</title><br>
<h1>안녕하세요</h1>
사이트 우클릭 - 웹 사이트 추가 - 원하는 설정 - 웹사이트 - 기본 문서 - test.htm 설정 (위에부터 우선순위 있으며 필요 없는것 삭제)
(포트번호 바꿨다면 방화벽에서 해당 포트 개방 필요)
Client에서 웹으로 접속해보면 내가 띄우고자 하는 페이지가 나온다.
'Study > WinServer' 카테고리의 다른 글
| [36] DNS 동적 업데이트 및 이중화 (0) | 2015.05.07 |
|---|---|
| [35] DHCP 인증 with AD (0) | 2015.05.07 |
| [34] 메일서버 + VPN 문제 (2) _ VPN 설정, DHCP Local 멀티넷, DHCP 원격 멀티넷 (0) | 2015.05.07 |
| [33] 메일서버 + VPN 문제 (1) _ Nmail 설치 (0) | 2015.05.07 |
| [32] DNS 전달자, 조건부 전달자 (0) | 2015.05.07 |
- 2015.02.27
1. DNS 동적 업데이트
DNS 레코드 관리의 편의성을 위해 시스템들의 호스트네임을 자동으로 업데이트 할 수 있다.
[DNS 동적 업데이트 문제]
[Tip]
1) AD 내에 있는 PC 들은 PC들의 ip 변경이나 PC 이름 변경 시 자동으로 DNS 서버에 업데이트 된다.
[DNS 동적 업데이트 문제2]
[DNS 동적 업데이트 및 DNS 이중화 문제]
[Tip]
1) Server1 에 AD 설치
2) Server2 에 AD Join 및 DHCP Server 설치
3) DHCP 옵션 구성 시 DNS 정보 및 15번의 DNS 도메인 이름 필히 입력
4) DHCP 범위 속성 - DNS 에 들어가서 항상 DNS A 및 PTR 레코드를 동적으로 업데이트 체크
5) Client 는 AD에 접속되어있지 않아도 DHCP 서버를 통해 연결되어 있기 때문에 DNS 에 자동 업데이트 된다.
6) 단, AD 가 없으면 보안상의 위험이 있다.
'Study > WinServer' 카테고리의 다른 글
| [37-40] DFS 분산 파일 시스템, ftp, ftps, Webserver (0) | 2015.05.07 |
|---|---|
| [35] DHCP 인증 with AD (0) | 2015.05.07 |
| [34] 메일서버 + VPN 문제 (2) _ VPN 설정, DHCP Local 멀티넷, DHCP 원격 멀티넷 (0) | 2015.05.07 |
| [33] 메일서버 + VPN 문제 (1) _ Nmail 설치 (0) | 2015.05.07 |
| [32] DNS 전달자, 조건부 전달자 (0) | 2015.05.07 |
- 2015.02.26
1. DHCP 인증
DHCP는 Broadcast 로 패킷을 주고 받기 때문에 공격자가 쉽게 공격할 수 있다.
때문에 인증된 DHCP 서버가 필요한데 이 때 Active Directory를 이용하여 인증된 서버를 구축하면 된다.
즉, Server와 Client 가 같은 Active Directory의 Forest에 있으면 된다.
[DHCP 인증 문제]
[Tip]
1) 인증할 DHCP Server 및 Client 는 AD 에 Join 한다.
2) 공격자가 DHCP 로 뿌려줄 대역대에 맞춰 해당 Server 의 IP도 맞춰야 한다.
'Study > WinServer' 카테고리의 다른 글
| [37-40] DFS 분산 파일 시스템, ftp, ftps, Webserver (0) | 2015.05.07 |
|---|---|
| [36] DNS 동적 업데이트 및 이중화 (0) | 2015.05.07 |
| [34] 메일서버 + VPN 문제 (2) _ VPN 설정, DHCP Local 멀티넷, DHCP 원격 멀티넷 (0) | 2015.05.07 |
| [33] 메일서버 + VPN 문제 (1) _ Nmail 설치 (0) | 2015.05.07 |
| [32] DNS 전달자, 조건부 전달자 (0) | 2015.05.07 |
- 2015.02.25
[메일서버 및 vpn 실습]
[Tip] - VPN
1) Server3 에 VPN 역할 추가 및 설정
2) 사용 위한 계정에 원격 로그인 허용
1. DHCP Local 멀티넷
1개의 SW 장비 내에 ip 개수가 모자라 다른 ip 대역을 대범위로 묶어 DHCP 에서 분배하는 것
=> 이전에 실습 함
2. DHCP 원격 멀티넷
다른 Subnet에 있는 장치들에게도 ip 를 설정하는 것
[DHCP 원격 멀티넷 문제]
[Tip]
1) Server1 에 DHCP 역할 추가 및 대범위 설정
2) Server2 에는 릴레이 에이전트 관련 역할추가 및 설정
3) Server3 에 VMnet1 스위치 2개 물려서 2개 받아오는지 확인, Client1 에 VMnet2 스위치 2개 물려서 릴레이 에이전트 테스트
'Study > WinServer' 카테고리의 다른 글
| [36] DNS 동적 업데이트 및 이중화 (0) | 2015.05.07 |
|---|---|
| [35] DHCP 인증 with AD (0) | 2015.05.07 |
| [33] 메일서버 + VPN 문제 (1) _ Nmail 설치 (0) | 2015.05.07 |
| [32] DNS 전달자, 조건부 전달자 (0) | 2015.05.07 |
| [31] DHCP 대범위 문제(Server 에서 라우팅 설정), DHCP 이용한 DNS 이중화 (0) | 2015.05.07 |
- 2015.02.24
[메일서버 및 vpn 실습]
[Nmail 설치 Tip]
1) apmsetup 설치
2) nmail 을 C:\ 에 풀기 (C:\NmailPHP)
3) C:\NmailPHP\nmail_dir_set.bat 파일을 관리자 권한으로 실행
4) C:\NmailPHP\_php.bat_sample\php_APMSETUP7.bat 파일을 C:\Windows\php.bat 으로 복사
5) C:\APM_Setup\Server\MySQL5\data\my.ini 에서 max_allowed_packet = 64M 로 만든 다음 해당 파일도 C:\Windows에 복사
6) 미리 주어진 ioncube_loader_win_5.2.dll 을 C:\APM_Setup\Server\PHP5\ext\ 위치에 복사
7) C:\NmailPHP\nmail_install.bat 파일을 관리자 권한으로 실행
8) Alias 설정 혹은 document root directory 를 C:\NmailPHP\nmail 로 지정
9) 방화벽 인바운드 규칙 - 80번 포트 개방
10) 도구 - 인터넷 옵션 - 보안 - 신뢰할 수 있는 사이트 에 해당 도메인을 넣어야 정상적으로 보임
'Study > WinServer' 카테고리의 다른 글
| [35] DHCP 인증 with AD (0) | 2015.05.07 |
|---|---|
| [34] 메일서버 + VPN 문제 (2) _ VPN 설정, DHCP Local 멀티넷, DHCP 원격 멀티넷 (0) | 2015.05.07 |
| [32] DNS 전달자, 조건부 전달자 (0) | 2015.05.07 |
| [31] DHCP 대범위 문제(Server 에서 라우팅 설정), DHCP 이용한 DNS 이중화 (0) | 2015.05.07 |
| [30] DHCP 분할범위, DHCP 대범위 (0) | 2015.05.07 |
- 2015.02.23
1. 전달자
[실습]
Server1 : DMZ Zone에 있는 DNS Server, Server2를 전달자로 설정하여 로컬 서버에서 찾을 수 없는 DNS 정보는 Server2에 질의
Server2 : 내부 망에 있는 DNS Server
Server2에 조회할 영역 생성
Server1 : 동작 - 속성 - 전달자 - Server2 ip 지정
일반적으로는 내부망의 DNS에 KT 등의 DNS 를 전달자로 지정하는 경우가 많다.
[DNS 전달자 문제]
1. Server1, Server2에 DNS 역할 추가
2. Server2 DNS 영역 추가(ddasig.com)
- A 레코드 : 10.10.10.10(itbank)
- CNAME 레코드 : ftp
- CNAME 레코드 : web
3. Client1 에서 로컬 영역 연결 네트워크 설정에서 DNS 서버 IP 설정을 Server1 아이피로 설정
4. Server1 DNS Server에 전달자로 Server2 지정
=======================================
확인 : Client1에서 nslookup 또는 ping 으로 조회 가능한지 확인
- itbank.ddasig.com
- ftp.ddasig.com
- web.ddasig.com
[Tip]
1) ping은 안되지만 nslookup은 된다.
2) Server1에서 Server2의 FQDN 정보를 얻어오려면 Server1에서 Server2의 ip에 대한 DNS 정보를 입력하면 된다.
2. 조건부 전달자
Local DNS Server가 모르는 모든 DNS 쿼리에 대해 문의하는 것이 아니라 특정 조건에 대한 DNS 정보만 질의하는 것
[사용 이유]
1) 자주 사용하는 사이트의 DNS를 따로 빼서 부하 감소 위해 사용 - 별 차이 없음
2) 보안적인 이유 - 보안이 필요한 특정 ip에 대한 DNS를 따로 빼둠
[실습]
Server2 에 조회할 영역 설정
Server1 에서 조건부 전달자 설정 - 조회할 이름 기재 - Server2 ip 입력
Client1 에서 해당 도메인 검색
[DNS 조건부 전달자 문제]
(전달자 lab으로 만드신 영역 또는 설정 전부 삭제 후 진행)
1. Server1, Server2 DNS 역할 추가
2. Server2 DNS 영역 추가(itbank1xx.com)
- A 레코드 : 20.20.20.20 (dns)
3. Client1에서 로컬 영역 연결 네트워크 설정에서 DNS 서버 IP 설정을 Server1 아이피로 설정
4. Server1 DNS 서버에서 조건부 전달자 등록
- dns.itbank1xx.com 조회시 Server2로 전달
================================================
확인 : Client1에서 nslookup 또는 ping 으로 조회 가능한지 확인
- dns.itbank1xx.com
[DNS 조건부 전달자 문제2]
[Tip]
1) Server1과 Client1은 Bridge 모드로 진행, Server1 - Server2 는 VMnet1 로 연결
2) Server1 에서 조건부전달자 설정 시 samsung.com 인 대표 호스트 네임으로 지정
'Study > WinServer' 카테고리의 다른 글
| [34] 메일서버 + VPN 문제 (2) _ VPN 설정, DHCP Local 멀티넷, DHCP 원격 멀티넷 (0) | 2015.05.07 |
|---|---|
| [33] 메일서버 + VPN 문제 (1) _ Nmail 설치 (0) | 2015.05.07 |
| [31] DHCP 대범위 문제(Server 에서 라우팅 설정), DHCP 이용한 DNS 이중화 (0) | 2015.05.07 |
| [30] DHCP 분할범위, DHCP 대범위 (0) | 2015.05.07 |
| [29] DHCP 듀얼망 문제, DHCP 릴레이 에이전트 및 문제 (0) | 2015.05.07 |
