[작성일: 2023. 04. 20]
게시글 보기 기능 구현
실제로 해당 글에 들어갔을 때 글의 내용을 보여주는 view 화면이 필요하다.
BbsDAO에 글 내용을 불러올 수 있는 함수를 추가하면 된다.
글 작성 페이지는 write.jsp 파일을 복사해서 수정한 다음 만들어준다.
게시글 기능을 테스트 시 특수문자나 공백을 작성하면 글 내용이 정상적으로 출력되지 않는다.
기본적으로 HTML 코드는 <>를 이용해서 태그를 사용하기 때문에 데이터베이스에 넣은 글자에 <>가 들어가 있다면 웹 브라우저는 HTML 기호인지, 출력하는 용도인지 알지 못한다.
그렇기 때문에 특수문자를 출력하는 부분을 제대로 처리해주어야 게시글 보기 기능이 완벽하게 구현될 수 있다.
[소스코드]
#bbsDAO
- 맨 아래에 하나의 글을 불러올 수 있는 getBbs 함수 추가
package bbs; import java.sql.Connection; import java.sql.DriverManager; import java.sql.PreparedStatement; import java.sql.ResultSet; import java.util.ArrayList; public class BbsDAO { private Connection conn; private ResultSet rs; // 정보를 담을 객체 public BbsDAO() { try { String dbURL = "jdbc:mariadb://localhost:3399/bbs"; // 내 컴퓨터에 설치된 mariadb 서버의 bbs 데이터베이스에 접속 String dbID = "root"; String dbPassword = "1234"; Class.forName("org.mariadb.jdbc.Driver"); // 매개체 라이브러리 conn = DriverManager.getConnection(dbURL, dbID, dbPassword); } catch(Exception e) {e.printStackTrace();} } public String getDate() { // 현재 시간을 가져올 함수 String SQL = "SELECT NOW()"; try { PreparedStatement pstmt = conn.prepareStatement(SQL); rs = pstmt.executeQuery(); if(rs.next()) { return rs.getString(1); // 현재의 날짜를 반환함. } }catch(Exception e) {e.printStackTrace();} return ""; // 빈 문자열 리턴으로 데이터 베이스 오류를 알려줌. } public int getNext() { String SQL = "SELECT bbsID FROM bbs ORDER BY bbsID DESC"; try { PreparedStatement pstmt = conn.prepareStatement(SQL); rs = pstmt.executeQuery(); if(rs.next()) { return rs.getInt(1) + 1; // 1을 더해서 다음 게시글이 보일 수 있도록 함. } return 1; // 현재가 첫 게시물인 경우 }catch(Exception e) {e.printStackTrace();} return -1; // 데이터 베이스 오류를 알려줌. } public int write(String bbsTitle, String userID, String bbsContent) { String SQL = "INSERT INTO bbs VALUES(?, ?, ?, ?, ?, ?);"; try { PreparedStatement pstmt = conn.prepareStatement(SQL); pstmt.setInt(1, getNext()); // 다음에 쓰여야 할 게시글 번호 pstmt.setString(2, bbsTitle); pstmt.setString(3, userID); pstmt.setString(4, getDate()); pstmt.setString(5, bbsContent); pstmt.setInt(6, 1); return pstmt.executeUpdate(); }catch(Exception e) {e.printStackTrace();} return -1; // 데이터 베이스 오류를 알려줌. } public ArrayList<Bbs> getList(int pageNumber) { // ArrayList를 이용하여 Bbs를 담아낼 수 있도록 함. String SQL = "SELECT * FROM bbs WHERE bbsID < ? AND bbsAvailable = 1 ORDER BY bbsID DESC LIMIT 10"; // bbsID가 특정한 숫자보다 작을 때, 삭제가 되지 않아 Available이 1인 글만 가져올 수 있도록, bbsID로 내림차순, 10개까지만 가져오기 ArrayList<Bbs> list = new ArrayList<Bbs>(); try { PreparedStatement pstmt = conn.prepareStatement(SQL); pstmt.setInt(1, getNext() - (pageNumber - 1) * 10); // 작성될 번호의 글 번호에서부터 계산 rs = pstmt.executeQuery(); while(rs.next()) { Bbs bbs = new Bbs(); bbs.setBbsID(rs.getInt(1)); bbs.setBbsTitle(rs.getString(2)); bbs.setUserID(rs.getString(3)); bbs.setBbsDate(rs.getString(4)); bbs.setBbsContent(rs.getString(5)); bbs.setBbsAvailable(rs.getInt(6)); list.add(bbs); } }catch(Exception e) {e.printStackTrace();} return list; } public boolean nextPage(int pageNumber) { // 게시글이 10개라면 다음페이지라는 버튼이 없어야 함. // 페이징 처리 String SQL = "SELECT * FROM bbs WHERE bbsID < ? AND bbsAvailable = 1"; try { PreparedStatement pstmt = conn.prepareStatement(SQL); pstmt.setInt(1, getNext() - (pageNumber - 1) * 10); rs = pstmt.executeQuery(); if(rs.next()) { return true; } }catch(Exception e) {e.printStackTrace();} return false; } // 하나의 글 내용을 불러올 수 있는 함수 추가 public Bbs getBbs(int bbsID) { String SQL = "SELECT * FROM bbs WHERE bbsID = ?"; // bbsID가 특정한 숫자인 경우 어떠한 행위를 진행할 수 있도록 해줌. try { PreparedStatement pstmt = conn.prepareStatement(SQL); pstmt.setInt(1, bbsID); rs = pstmt.executeQuery(); if(rs.next()) { Bbs bbs = new Bbs(); bbs.setBbsID(rs.getInt(1)); bbs.setBbsTitle(rs.getString(2)); bbs.setUserID(rs.getString(3)); bbs.setBbsDate(rs.getString(4)); bbs.setBbsContent(rs.getString(5)); bbs.setBbsAvailable(rs.getInt(6)); return bbs; } }catch(Exception e) {e.printStackTrace();} return null; // 해당 글이 존재하지 않는 경우 null 반환 } }
#bbs.jsp
- 글 제목 부분에 악성 스크립트 방지를 위해 replaceAll 추가(특수문자 치환)
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <%@ page import="java.io.PrintWriter" %> <%@ page import="bbs.BbsDAO" %> <%@ page import="bbs.Bbs" %> <%@ page import="java.util.ArrayList" %> <!-- 게시판 목록을 출력하기 위함 --> <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width", initial-scale="1"> <link rel="stylesheet" href="css/bootstrap.css"> <title>JSP 게시판 웹 사이트</title> <style type="text/css"> a, a:hover { color:#000000; text-decoration: none; } </style> </head> <body> <% String userID = null; if(session.getAttribute("userID")!=null) { userID = (String)session.getAttribute("userID"); } int pageNumber = 1; // 기본페이지 if(request.getParameter("pageNumber") != null) { pageNumber = Integer.parseInt(request.getParameter("pageNumber")); } %> <!-- 네비게이션 구현(바) --> <nav class="navbar navbar-default"> <!-- 네비게이션 --> <div class="navbar-header"> <!-- 네이게이션 상단 부분 --> <!-- 네비게이션 상단 박스 영역 --> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false"> <!-- 모바일 상태에서 오른쪽에 메뉴가 나옴. --> <!-- 오른쪽 메뉴 바에서 선 3개 --> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="main.jsp">JSP 게시판 웹 사이트</a> </div> <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> <ul class="nav navbar-nav"> <!-- 네비게이션 바의 메뉴 --> <li><a href="main.jsp">메인</a></li> <li class="active"><a href="bbs.jsp">게시판</a></li> <!-- 메인과 게시판으로 이동 --> </ul> <% if(userID == null) { %> <ul class="nav navbar-nav navbar-right"> <li class="dropdown"> <a href="#" class=dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">접속하기<span class="caret"></span></a> <!-- 임시주소링크 #을 기재함. --> <ul class="dropdown-menu"> <li><a href="login.jsp">로그인</a></li> <li><a href="join.jsp">회원가입</a><li> </ul> </li> </ul> <% } else { %> <ul class="nav navbar-nav navbar-right"> <li class="dropdown"> <a href="#" class=dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">회원관리<span class="caret"></span></a> <!-- 임시주소링크 #을 기재함. --> <ul class="dropdown-menu"> <li><a href="logoutAction.jsp">로그아웃</a></li> </ul> </li> </ul> <% } %> </div> </nav> <div class="container"> <div class="row"> <table class="table table-striped" style="text-align: center; border: 1px solid #dddddd"> <!-- 게시판에 글 목록들이 홀수와 짝수가 번갈아가며 색상이 변경됨. --> <thead> <tr> <th style="background-color: #eeeeee; text-align: center;">번호</th> <th style="background-color: #eeeeee; text-align: center;">제목</th> <th style="background-color: #eeeeee; text-align: center;">작성자</th> <th style="background-color: #eeeeee; text-align: center;">작성일</th> </tr> </thead> <tbody> <% BbsDAO bbsDAO = new BbsDAO(); ArrayList<Bbs> list = bbsDAO.getList(pageNumber); for(int i=0; i<list.size(); i++){ %> <tr> <!-- 게시글이 실제로 출력될 부분 --> <td><%=list.get(i).getBbsID() %></td> <td><a href="view.jsp?bbsID=<%=list.get(i).getBbsID() %>"> <%=list.get(i).getBbsTitle().replaceAll(" ", " ").replaceAll("<","<") .replaceAll(">",">").replaceAll("\n","<br>") %></a></td> <!-- 제목을 눌렀을 때는 해당 게시글의 내용을 보여준다. --> <td><%=list.get(i).getUserID() %></td> <td><%=list.get(i).getBbsDate().substring(0, 11) + list.get(i).getBbsDate().substring(11,13) + "시" + list.get(i).getBbsDate().substring(14,16) + "분" %></td> </tr> <% } %> </tbody> </table> <!-- 페이지 버튼 --> <% if(pageNumber != 1){ %> <a href="bbs.jsp?pageNumber=<%=pageNumber -1 %>" class="btn btn-success btn-arraw-left">이전</a> <% } if(bbsDAO.nextPage(pageNumber + 1)){ %> <a href="bbs.jsp?pageNumber=<%=pageNumber +1 %>" class="btn btn-success btn-arraw-left">다음</a> <% } %> <a href="write.jsp" class="btn btn-primary pull-right">글쓰기</a> </div> </div> <script src="//code.jquery.com/jquery-3.6.4.min.js"></script> <script src="js/bootstrap.js"></script> </body> </html>
#view.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <%@ page import="java.io.PrintWriter" %> <%@ page import="bbs.Bbs" %> <%@ page import="bbs.BbsDAO" %> <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width", initial-scale="1"> <link rel="stylesheet" href="css/bootstrap.css"> <title>JSP 게시판 웹 사이트</title> </head> <body> <% String userID = null; if(session.getAttribute("userID")!=null) { userID = (String)session.getAttribute("userID"); } // 매개변수 및 기본셋팅 int bbsID = 0; if(request.getParameter("bbsID") != null) { bbsID = Integer.parseInt(request.getParameter("bbsID")); } if(bbsID == 0) { PrintWriter script = response.getWriter(); script.println("<script>"); script.println("alert('유효하지 않은 글입니다.')"); script.println("location.href = 'bbs.jsp'"); script.println("</script>"); } Bbs bbs = new BbsDAO().getBbs(bbsID); %> <!-- 네비게이션 구현(바) --> <nav class="navbar navbar-default"> <!-- 네비게이션 --> <div class="navbar-header"> <!-- 네이게이션 상단 부분 --> <!-- 네비게이션 상단 박스 영역 --> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false"> <!-- 모바일 상태에서 오른쪽에 메뉴가 나옴. --> <!-- 오른쪽 메뉴 바에서 선 3개 --> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="main.jsp">JSP 게시판 웹 사이트</a> </div> <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> <ul class="nav navbar-nav"> <!-- 네비게이션 바의 메뉴 --> <li><a href="main.jsp">메인</a></li> <li class="active"><a href="bbs.jsp">게시판</a></li> <!-- 메인과 게시판으로 이동 --> </ul> <% if(userID == null) { %> <ul class="nav navbar-nav navbar-right"> <li class="dropdown"> <a href="#" class=dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">접속하기<span class="caret"></span></a> <!-- 임시주소링크 #을 기재함. --> <ul class="dropdown-menu"> <li><a href="login.jsp">로그인</a></li> <li><a href="join.jsp">회원가입</a><li> </ul> </li> </ul> <% } else { %> <ul class="nav navbar-nav navbar-right"> <li class="dropdown"> <a href="#" class=dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">회원관리<span class="caret"></span></a> <!-- 임시주소링크 #을 기재함. --> <ul class="dropdown-menu"> <li><a href="logoutAction.jsp">로그아웃</a></li> </ul> </li> </ul> <% } %> </div> </nav> <div class="container"> <div class="row"> <table class="table table-striped" style="text-align: center; border: 1px solid #dddddd"> <!-- 게시판에 글 목록들이 홀수와 짝수가 번갈아가며 색상이 변경됨. --> <thead> <tr> <th colspan="3"style="background-color: #eeeeee; text-align: center;">게시판 글 보기 양식</th> <!-- 2개의 열을 사용할 수 있도록 colspan 사용 --> </tr> </thead> <tbody> <tr> <td style="width: 20%;">글 제목</td> <td colspan="2"><%= bbs.getBbsTitle().replaceAll(" ", " ").replaceAll("<","<") .replaceAll(">",">").replaceAll("\n","<br>") %></td> </tr> <tr> <td>작성자</td> <td colspan="2"><%= bbs.getUserID() %></td> </tr> <tr> <td>작성일자</td> <!-- 글이 작성된 시간이므로 bbs 페이지에서 그대로 복사해옴. --> <td colspan="2"><%=bbs.getBbsDate().substring(0, 11) + bbs.getBbsDate().substring(11,13) + "시" + bbs.getBbsDate().substring(14,16) + "분" %></td> </tr> <tr> <td>내용</td> <td colspan="2" style="min-height: 200px; text-align: left"> <%= bbs.getBbsContent().replaceAll(" ", " ").replaceAll("<","<") .replaceAll(">",">").replaceAll("\n","<br>") %></td> </tbody> </table> <a href="bbs.jsp" class="btn btn-primary">목록</a> <!-- 해당 글의 작성자가 본인이라면 해당 글을 수정, 삭제할 수 있도록 함. --> <% if(userID != null && userID.equals(bbs.getUserID())){ %> <a href="update.jsp?bbsID=<%= bbsID %>" class="btn btn-primary">수정</a> <a href="deleteAction.jsp?bbsID=<%= bbsID %>" class="btn btn-primary">삭제</a> <% } %> </div> </div> <script src="//code.jquery.com/jquery-3.6.4.min.js"></script> <script src="js/bootstrap.js"></script> </body> </html>
[실행화면]
love라는 ID로 로그인 해서 user1이 작성한 글을 보게 되면 글은 정상적으로 보이지만 수정과 삭제 버튼이 없는 것을 확인할 수 있다.
love라는 아이디로 작성한 글에 들어가면 수정과 삭제 버튼이 생긴 것을 확인할 수 있다.
물론 수정버튼과 삭제버튼이 존재만 할 뿐 누르면 기능을 구현하지 않았기 때문에 아무것도 동작하진 않는다.
목록을 누르면 게시판 화면으로 다시 돌아가는 기능은 구현되어 있다.
특수문자를 읽을 수 있도록 처리를 해주었기 때문에 특수문자 또한 잘 출력되는 것을 볼 수 있다.
추가적으로 특수문자와 관련해서 중요한 게 하나 있다면 웹 패킹 공격에 해당하는 것으로 크로스 사이트 스크립팅 공격이 있다.
게시판에 글을 작성할 때 스크립트 문장을 삽입하며 글을 보고 있는 사람한테 영향을 끼칠 수 있는 해킹 기법이다.
만약 특수문자 처리가 잘 되지 않았다면 다음과 같은 문제가 발생할 수 있다.
우선 글 제목에 <script> alert('Hello World'); </script> 를 삽입 후 글쓰기 버튼을 눌러보았다.
게시판의 메인 화면에 들어가게 됐을 때 Hello World라는 경고창이 발생한다.
이게 바로 크로스 사이트 스크립트 공격의 가장 기본적인 형태이다.
글 제목이 보이지 않게 되고 스크립트 문장이 그대로 들어가기 때문에 문제가 발생한다.
새로고침을 하더라도 계속해서 스크립트 문장이 실행된다.
해당 문제는 코드에 작성되어 있듯이 글 내용 뿐만 아니라 글 제목에서도 특수문자를 치환해주는 방법을 이용해서 해결해주어야 한다.
replaceAll로 특수문자 치환 코드를 작성해주면 더이상 경고창이 뜨지 않고 글 제목에 스크립트 문장이 그대로 적용되는 것을 볼 수 있다.
보안은 아주 중요하기 때문에 꼭 필요한 작업이라는 것을 기억해야 한다.
🐣 입문 개발자가 작성한 글이므로 틀린 내용이나 오타가 있을 수 있습니다.
🐣 출처: https://youtu.be/SC7EP8ID9D8