Code1018

* 추가할 기능 구현 (게시판)

- 댓글 기능

- 조회수 기능

- 게시글 삭제 기능

* 추가할 기능 구현 (인증)

- 소셜 인증

------------------------------------

  오늘은 댓글 기능과 조회수 기능을 추가하였다.

  추가적으로 게시판의 모양을 테이블로 조금 더 그럴싸하게 만들었다.

< 게시판 표 작성 >

  게시판 모델 HTML을 가져와 사용했고, 컨텐츠는 전달받는 post에서 뽑아서 뿌려주었다.

< 게시판 모양 >

  다음으로 댓글 기능을 추가하였다.

다음은 댓글 Model이다.

< Comment Model >

  writer를 Profile과 연결해주었다. 또 post와도 연결해주었다.

  다음은 템플릿에서 댓글 출력 코드이다. 

< 댓글 출력 코드 >

  Comment 모델에서 post를 외부키로 연결할 때 related_name을 comments로 정의해주어서 comments로 접근할 수 있다.

  여기에 사진은 캡쳐하지 않았지만 comment.comment_writer로 닉네임을 출력할 수 있었던 이유는 내가 Profile 모델을 정의하면서 __str__ 을 overwrite해서 닉네임을 출력하게 만들었기 때문이다.

< 댓글 출력 화면 >

  다음으로 댓글 쓰기 기능을 만들었다. 쓰기의 경우 기존 detail 보는 템플릿에서 폼을 추가해주고 해당 폼을 처리해줄 view를 만드는 과정으로 진행했다.

< form 생성 >

  post 와도 외부키가 연결되어있기 때문에 post의 pk가 필요하다.

< comment_write view >

  POST 메서드일 경우만 처리하게 만들었다. 이 경우 post를 pk로 뽑아내고 현재 로그인한 사용자의 user를 가져와 연결된 Profile을 작성자와 연결해준다. 그 후 각 내용을 Comment 로 생성해주면 된다.

< 테스트 댓글 작성 >

< 댓글 작성 확인 >

  다음으로 댓글의 개수를 출력해주었다.

< 댓글 수 >

  이 댓글 수를 새주는 것은 all 대신 count를 이용하면 되었다.

  다음으로! 조회수 기능이다.! 

나는 Detail View(CBV)를 사용하였는데, 인터넷에 보니 CBV를 사용할 경우 처리해야할 게 많아서 보통 다른 lib를 이용한다고 들었다. 그런데 내가 일단 구현해 보았다.

< 조회수 증가 함수 생성 >

  @property를 이용하면 템플릿에서도 사용할 수 있다. 조회수를 1 늘리고 저장한다.

< 템플릿에 삽입 >

  이렇게 되면 해당 화면이 불려질때마다 해당 post의 조회수가 1씩 증가한다.

< 조회수 증가 테스트 >

  테스트해보니 문제가있었다...

해당 템플릿이 로드 될 때마다 조회수가 증가하다보니, F5를 연달아 누르면 조회수가 막 올라간다... 

  이 기능을 세션을 가지고 처리했던 것 같은데 자세히 다시 알아보고 처리해야겠다.

* 추가할 기능 구현 (게시판)

- 댓글 수정기능

- 조회수 조작 방지 기능

- 게시글 삭제 기능

* 추가할 기능 구현 (인증)

- 소셜 인증

  Django 프로젝트에서 게시판 프로젝트를 시작한다. 인증 부분에서 소셜인증, 회원정보 수정을 제외하고는 전부 구현하였다. (나머지 기능은 차차 구현할 것이다.)

  오늘은 게시판에서 게시글들을 출력하고 게시글을 들어가서 확인하는 것까지 구현하였다.

  먼저 시간 설정을 해주었다. Post 모델을 정의하여 게시글을 만들었다. 이 때 작성일시를 자동으로 현재 날짜시간을 기록하게 하였는데, 이 때 settings.py 에서 설정해주어야할 것이 있다.

< settings.py 설정 >

  이 변수를 False로 설정해야 settings.py에서 설정한 시간대를 프로젝트 전체에서 사용할 수 있다.

  Post 모델을 정의하였다.

< Post 모델 >

  이 모델은 게시글이다. 작성자를 CharField로 설정한 이유는 사용자의 프로필에서 nickname을 가져와서 문자열로 저장하려고 하기 위해서이다.

< urls.py >

  다음으로 urls.py를 설정해준다. 기본적인 게시글 리스트와 디테일을 만들었다. 그리고 추가적으로 글 쓰기와, 글 수정을 만들었다.

< CBV를 이용한 View >

  글 리스트와 디테일은 CBV를 이용하여 쉽게 구현하였다.

< 게시글 목록 보기 >

< 게시글 자세히 보기 >

  다음으로 글 작성하는 것을 만들었다. CreateView (CBV)를 이용할 수 있었지만, 나는 작성자에 사용자의 프로필에 있는 닉네임을 넣어줄 것이고 또한 메세지를 출력해주고 싶었기에 직접 view를 만들었다.

< post_write view >

  글쓰기 뷰를 만들고 테스트해보았다.

< 글 작성 테스트 >

< 글 작성 성공 메세지 알람 >

< 글 작성 리스트에서 확인 >

< 글 작성 내용 보기로 확인 >

  다음으로 작성한 글에 대한 내용을 수정하는 것이다.

< post_update view >

  여기서 인증부분이 필요했다. 글은 아무나 수정하면 안되기 때문이다. 로그인한 사용자의 정보에서 프로필을 가져와 프로필에 있는 닉네임과 게시글 작성자를 비교하여 같으면 수정을 허락하고 같지 않으면 경고를 해준다.

< 글 수정 테스트 >

< 글 수정 성공 메세지 알람 >

< 글 수정 확인 >

  오늘 일지의 마지막으로는 유저 확인기능에 대해서 정리할 것이다. 게시글에서 작성자가 나오는데 해당 작성자에 대해 알아볼 수 있는 기능을 추가하기로 했다. 작성자를 클릭하면 작성자의 정보가 나오게 하는 것이다.

< user_select_info view >

  개인 정보 확인하는 것을 그대로 따왔다.

< urls 추가 >

  개인정보의 경우 로그인정보를 이용하여 정보를 가져오면 되지만 다른 사용자의 정보를 출력하기 위해서는 해당 사용자의 정보를 넘겨줘야한다. 그래서 나는 작성자를 넘겨 주기로 했다.

< 작성자 확인 테스트 >

  tfa 를 클릭해보았다.

< 다른 사용자 정보 확인 >

  다른 사용자의 정보를 확인 할 수 있었다.

=============================

* 추가할 기능 구현 (게시판)

- 댓글 기능

- 조회수 기능

- 게시글 삭제 기능

* 추가할 기능 구현 (인증)

- 소셜 인증

XSS( Cross Site Scripting )
- javascript를 이용한 대표적인 취약점이다.
  스크립트로 작성된 코드는 클라이언트의 웹브라우저에서 실행이 된다.

인터넷 웹 화면이 뜨는 과정은 웹 서버에서 우리 앞의 웹 브라우저로 코드가 날라오고 웹 브라우저는 그 코드를 실행하여 화면에 보여주는 것이다. 이 때 넘어오는 값에 스크립트 코드를 넣는 것이다.
 -> 주 타겟 : 불특정 다수(클라이언트)

ex) 예를 들어 게시판에 아래와 같은 글을 업로드 하는 것이다.
<script>alert("공격성공")</script>
(Enter가 들어가면 안된다.)
-> 공격을 하려면 자바스크립트로 원하는 코드를 만들 수 있어야한다.

스크립트 코드가 실행 되는지 확인하기 위하여 alert() 을 사용하여
코드가 실행 된다면 악의적인 코드가 실행될 가능성이 있다고 판단하여
취약점이라고 간주한다.

우리가 만든 제로보드 게시판에 XSS 공격을 해보겠다.

(스크립트 작성)

(게시판 화면)

게시판에 공격자의 글이 올라온 것을 확인 할 수 있다.

만약 이 글을 클릭한다면

(악성 코드 실행)

공격자가 작성한 스크립트 코드가 실행된다.

(글 화면)

글 내용에는 아무 글도 보이지 않는다.
왜냐하면 스크립트코드로 간주되었기 때문이다.

이런 방식으로 게시판 혹은 서버에 저장해두어 다른 사람들이 열람하여
코드가 실행되게 하는 방식을 Stored XSS 라고 한다.

다른 방법으로는 reflected XSS가 있다.

이 방법은 다음 XSS 취약점을 보면서 확인하겠다.
다음 XSS가 가능한 부분은 많지만
그 중에 회원가입란의 아이디 중복체크하는 페이지다.

(중복 체크 페이지)

이 페이지의 주소를 살펴보면
url을 통해서 값이 전달되고 있는 것을 확인 할 수 있는데
이 변수에 스크립트 코드를 넣어 실행하면
바로 실행이 된다.

(url을 통한 스크립트 코드)

(실행 화면)

실행하게 되면 IE에서
XSS를 발견하여 조치를 취해주었다.

우리는 공격을 확인 할 것이므로 잠시 이 설정을 해제해 주도록 하겠다.

(인터넷 옵션)

인터넷 옵션에서 보안탭을 들어간다.

(사용자 지정 수준 클릭)

사용자 지정 설정 수준에 들어가면
아래 부분에 XSS 필터 사용 항목이 있는데
사용 안 함으로 클릭해 주면 된다.

(사용 안함 클릭)

그런 상태로
아까와의 같은 url로 접속을 하면

(실행 화면)

스크립트 코드가 실행 된것을 확인 할 수 있다.

이 방식이 아까 Stored XSS와 다른 점은
저장되는게 아니라 바로 돌아온다. 입력된 그자리에서 실행된다는 것이다.

즉
<script>alert(" target="_blank">http://100.100.100.129/zboard/check_user_id.php?user_id=<script>alert("xss")</script>
 링크를 활용해서 공격할 수 있다.
바로 이런 방법이 reflected XSS 이다.

이 공격을 더 유용하게 만드는 것은 shorten url 이다.
url을 짧게 만들어준다.

(shorten url)

그렇다면
XSS에 대한 대책은 어떤 것이 있을 까?

<script> 문을 게시 글 이외에
어떤 곳에서도 올리지 못하게 해두어야한다.

제로보드의 코드를 조금 수정해 보겠다.
게시판 글을 쓰는 곳에서 코드를 확인해보니
write_ok.php 파일로 데이터들을 전송하는 것을 확인 할 수 있다.

(보내는 곳 확인)

그렇다면
우리가 손봐야할 파일은
write_ok.php이다.

(write_ok.php 수정)

먼저 게시판 글쓰기의 소스코드를 확인해보면
게시 글이 변수 memo를 통해 넘어오는 것을 확인 할 수 있다.

(게시글 변수)

그러므로 우리는
write_ok.php 파일 맨 앞에
<script> 단어가 있으면 XSS 공격으로 간주하는 코드를 추가할 것이다.

(코드 추가)

코드 추가 후 공격을 해보겠다.

(XSS 공격)

(차단)

차단 된 것을 확인 할 수 있다.

하지만 방어가 있으면 다시 또 다른 공격을 하는 법..

이 코드를 우회할 수 있다면? (아주간단하게..)

(우회? 공격)

아주 간단하게 첫 script 를 대문자로 작성했다.

(우회 XSS 공격)

(공격 성공)

공격이 성공했다..
아주 간단하게 성공됬다.

이는 아까의 코드에서 문자열 검색에서 i를 추가해주면
대소문자 전부 체크해준다.

(코드 수정)

그렇게 되면

(우회 공격)

(차단)

간단한 우회도 차단할 수 있게 된다.

하지만 우회하는 방법은 수없이 많다.
그러므로 시큐어코딩(안전한코딩)이 쉬운 일은 아니다..!

제로보드 설정까지 완료했으므로
이제 제로보드를 이용하여
게시판을 만들어보겠다.

관리자 계정으로 로그인 하고
왼쪽 상단에 Add Group을 눌러준다.

(Add Group 클릭)

클릭 후 그룹 이름을 써주고
확인을 누른다. (기본으로 설정해준다.)

(그룹 생성)

그룹이 생성된 모습이다.

(그룹 생성 모습)

여기서 왼쪽 상단에 게시판 항목에 Add를 클릭한다.

(게시판 Add)

게시판 Add 입력 항목이다.
여기서 이름을 작성해주고
기본 보호 설정을 해제 해 줄것이다. (먼저 웹 취약점을 공부하기 위해서)

(게시판 작성 페이지)

HTML 설정을 모두 허용으로 바꾸어준다.

(HTML 설정)

업로드 기능을 체크하여 자료실 기능을 사용으로 바꾸어준다.

(업로드 허용)

그리고 게시판 생성을 누르면
아래와 같이 게시판이 생성된 모습이 보인다.

(게시판 생성 후 모습)

이 페이지는 게시판의 목록을 볼 수 있다.

방금 우리가 만든 게시판을 확인해보자.

Preview를 클릭하여 본다.

(게시판 모습)

우리가 제로보드를 이용하여 만든 게시판의 모습이다.

회원가입을 하여 글을 작성해보겠다.! (테스트)

(회원가입)

그 후 로그인 하여 글을 작성해보겠다.

(글 작성)

보면 글이 잘 써지는 걸 확인해 볼 수 있다.

(작성된 모습)

글 목록에서도 보인다!

(게시판 목록 모습)

여기까지 게시판을 만들었다.

이제 이 게시판을 이용하여 웹 취약점을 살펴 보겠다. :)

저번까지 만들었던
로그인 및 회원가입 페이지를 이용할 것이다.

회원가입 후 로그인을 하여
사용자들이 여러가지 기능을 사용할 수 있게 할것이다.

1. 스케쥴 관리
2. 출석게시판
3. 자유게시판
4. 포인트 순위
5. Shop

이런 기능의 메뉴들을 만들 것이다.
그 기능의 일환으로 스케쥴 관리를 오늘 대략적으로 짜보겠다.

그에 앞서 홈페이지의 메인 페이지를 구성해봐야한다.

다양한 기능들의 페이지가 필요하므로
폴더를 만들어서 관리를 할 것이다.!

(폴더 생성)

그 후 main 페이지 코드이다.

(메인 페이지 코드)

여기서 div 등 을 이용해
간단하게 보기좋게 디자인하였다.
(더 자세하고 정교하게 디자인은 나중으로...!)

코드에는 각 내용의 버튼들이 있고
그 버튼이 눌렸을때 각 해당 main 페이지로 이동하도록 코드를 구성했다.

실행 화면이다.

(메인 페이지)

여기서 나의 정보의 개인정보 수정을 클릭하면

(개인정보페이지)

아직 내용은 없지만 무슨 페이지인지만 헤더에 적어 놓았다.
마찬가지로

(출석 게시판 페이지)

출첵 게시판 등등
다른 페이지도 헤더에 어떤 페이지인지만 써놓고
페이지 파일을 만들어 두었다.
이제 우리는 이 내용들을 채워갈 것이다.

먼저 스케쥴 관리 게시판!
이름은 거창하지만

To do LIst 게시판이라고 생각하면 된다.
해야할 것들을 적어 두는 게시판으로 활용할 것이다.

우선 테이블을 만들어준다.!

(테이블 생성)

todo의 테이블을 만들어 주었다.

(테이블 모습)

여기서 id 값으로 사용자들을 구별하여
해당 id의 내용들만 뽑아서 보여줄 것이다.

스케쥴관리의 메인 페이지부터 작성해볼것이다!

(스케쥴관리 메인)

제일 먼저 해당 아이디로부터 개인 정보를 받아와서 출력해줄 것이다.
그래서 포인트가 몇점인지
그리고 ID가 무엇인지 받아와야 그 ID로 해당 todo 테이블에서 데이터를 꺼내올 수 있기 때문이다.

그 후
select * from todo where id =?
명령문 ?에 입력받은 id를 넣어주어 해당 ID의 데이터만 뽑아 올 것이다.

(select * from todo where id =?)

그 후 받아온 내용을 페이지에 뿌려준다.
단,
아무 내용이 없을 경우
해야할 일이 없다고 출력해준다.

(화면에 뿌려주기)

그리고 아직은 기능은 없지만
해야할 일을 추가하거나
해야할 일을 삭제하거나
해야할 일을 수정하는 기능이 있는
버튼이 필요하다.

(버튼 생성)

버튼 3개를 만들어주었다.

여기까지 스케쥴관리 메인 페이지를 확인해 보겠다.

먼저 메인페이지에서 스케쥴관리를 클릭한다.

(스케쥴 관리 클릭)

(스케쥴 관리 페이지)

페이지에는 입력받은 이름으로부터 "이름"님의 해야할 일이 출력되고
해당 id의 포인트 그리고 아직은 데이터가 없으므로
해야할 일이 없다고 출력되는 것을 확인 할 수 있다.