[JSP] 12강 - 상세 페이지 구현 + 특수 문자 처리

 

본 포스팅은

정보 제공용이 아닌

유튜브 동빈나님의 JSP 게시판 만들기 강좌 12강을

바탕으로 보고 배운 것을 직접 정리해본 포스트 입니다.

 

---

 

** 아마 상세 페이지가 가장 쉽지 않나 싶다.

특수 문자 처리는 처음해보는데 이것만으로도 웹해킹 기법인 크로스 사이트 스크립팅(cross site scripting)에 대처가 가능하다는 것을 알게 되었다.

그러고보면 웹프로그래밍을 하면서 단순히 요청 응답의 동작만이 아닌 저런 보안에 대해서도 매우 중요한 만큼 많은 공부를 해야할 것 같은 생각이 들었던 시간이었다.

 

---

 

** view.jsp

<%
	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);
		
	%>

• 일단 jsp 상단에서 userID와 bbsID에 대한 초기값 설정을 해준다.
• userID는 이따 아래서 글 작성자와 userID가 같을 경우 수정&삭제 버튼이 보이도록 하기 위함이다. 다르면 보이지 않는다.
• bbsID의 초기값은 0인데 0인 게시물은 존재하지 않는다.
• 이 페이지를 접근할 때는 글의 bbsID를 반드시 가져오게 해두었기 때문에 초기값인 0인 경우는 잘못된 경로로 접근한 것이므로 뒤로 돌려보내준다.
• bbsID를 인자로 BbsDOA의 getBbs 메서드를 호출하고 돌려받은 Bbs클래스를 bbs라는 인스턴스에 저장한다.

 

 

<!--  상세 페이지 -->
<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>
				</tr>
			</thead>	
			<tbody>
				<tr>
					<td style="width: 20%;"> 글 제목 </td>
					<td colspan="2"><%= bbs.getBbsTitle() %></td>
				</tr>
				<tr>
					<td>작성자 </td>
					<td colspan="2"><%= bbs.getUserID() %></td>
				</tr>
				<tr>
					<td> 글 제목 </td>
					<td colspan="2"><%= bbs.getBbsDate() %></td>
				</tr>
				<tr>
					<td> 내용 </td>
					<td colspan="2" style="min-height: 200px; text-align:left;"><%= bbs.getBbsContent() %></td>
				</tr>
			</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-info">수정</a>
				<a href="deleteAction.jsp?bbsID=<%=bbsID %>" class="btn btn-danger">삭제</a>
		<% 	
        }
		%>
		<a href="wirte.jsp" class="btn btn-primary pull-right">글쓰기</a>
		
	</div>
</div>

 

• bbs에서 제목, 작성자, 글 제목, 내용을 끄집어 내준다.
• 아래쪽에 글쓴이와 현재 접속해있는 userID가 같을 경우 수정과 삭제 할 수 있는 링크도 만들어준다.
• 수정 삭제 링크의 부트스트랩 색상은 내가 따로 임의로 바꾸어주었다.

 

[Bootstrap] Color (색상)

 

 

 

 

 

** 결과 화면

 

상세페이지 - 로그인 시

 

상세페이지 - 비로그인 시

 

 

 

** 특수문자 처리

 

위처럼만 코드를 작성해두면 < , >, 엔터, 빈문자열 등이 제목이나 내용에 적혀있는 경우 브라우저는 이것이 글의 특수문자인지 HTML의 태그인지 구분할 수 없어 작성한 대로 제대로 글이 보이지 않는다. 

 

<tbody>
	<tr>
		<td style="width: 20%;"> 글 제목 </td>
		<td colspan="2"><%= bbs.getBbsTitle().replaceAll(" ", "&nbsp;").replaceAll("<", "&lt;").replaceAll(">", "&gt").replaceAll("\n", "<br >") %></td>
	</tr>
	<tr>
		<td>작성자 </td>
		<td colspan="2"><%= bbs.getUserID() %></td>
	</tr>
	<tr>
		<td> 글 제목 </td>
		<td colspan="2"><%= bbs.getBbsDate() %></td>
	</tr>
	<tr>
		<td> 내용 </td>
		<td colspan="2" style="min-height: 200px; text-align:left;"><%= bbs.getBbsContent().replaceAll(" ", "&nbsp;").replaceAll("<", "&lt;").replaceAll(">", "&gt").replaceAll("\n", "<br >") %></td>
	</tr>
</tbody>

 

위처럼 .replaceAll("바꿀 문자", "대체할 문자")을 통해 저러한 혼동을 줄 수 있는 기호들을 HTML의 특수 기호로 바꿔주면 작성한대로 출력이 된다. 리스트의 제목 부분에도 같은 작업을 해주어야한다. 

 

만약 이런 작업을 해주지 않는다면 제대로 출력이 안될뿐더러 크로스 사이트 스크립팅(XSS)의 해킹에 노출되게 된다.

XSS는 SQL Injection과 함께 웹 상에서 가장 기초적인 취약점 공격 방법의 일종으로 악의적인 사용자가 공격하려는 사이트에 스크립트를 넣는 기법을 말한다. 특히 이런 게시판이나 댓글, 닉네임 등에 스크립트를 넣어 서버에 저장되게 하는 방식을 Stored XSS라고 한다.

 

사이트 간 스크립팅

 

가령

 

이렇게 자바스크립트로 제목을 작성한 경우

 

게시판 불러왔을 때 이처럼 악의적인 자바스크립트가 실행될 수 있다.

 

bbs.jsp의 제목 부분에도 이와같은 특수문자 처리 했을 때 악의적인 자바스크립트가 실행되지 않는 것을 볼 수 있다.