0312 오전수업

글등록의 제목에 스크립트코드를 치면 스크립트가 실행되어버린다.

(XSS 공격같은...)

<를 &jtlt 이런식으로 바꾸는거임

 

근데 일단 이건 보류한다

 

디테일화면

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
    
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<link rel="stylesheet" href="https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css">

  <!-- Content Wrapper. Contains page content -->
  

     <!-- Main content -->
    <section class="content container-fluid">
		<div class="row justify-content-center">
			<div class="col-md-9">
				<div class="card card-outline card-primary">
					<div class="card-header">
						<h3 class="card-title">상세보기</h3>
					</div>
					<div class="card-body">
						<div class="form-group col-sm-12">
							<label for="title">제 목</label>
							<input type="text" class="form-control" id="title" value="${pds.title}" readonly />							
						</div>	
						<div class="col-sm-12 row">
							<div class="form-group col-sm-4" >
								<label for="writer">작성자</label>
								<input type="text" class="form-control" id="writer" value="${pds.writer}" readonly />
							</div>		
							
							<div class="form-group col-sm-4" >
								<label for="regDate">작성일</label>
								<input type="text" class="form-control" id="regDate" 
									value="<fmt:formatDate value="${pds.regDate}" pattern="yyyy-MM-dd" />" readonly />
							</div>	
							<div class="form-group col-sm-4" >
								<label for="viewcnt">조회수</label>
								<input type="text" class="form-control" id="viewcnt" value="${pds.viewcnt}"
									 readonly />
							</div>	
						</div>	
						<div class="form-group col-sm-12">
							<label for="content">내 용</label>
							<div id="content">${pds.content}</div>	
						</div>
						<div class="form-group col-sm-12">
							<div class="card card-outline card-success">
								<div class="card-header">
									<h3>첨부파일</h3>
								</div>			
								<div class="card-footer">
									<div class="row">
									
									</div>
								</div>				
							</div>
						</div>
												
					</div>
					<div class="card-footer">
					
							<button type="button" id="modifyBtn" class="btn btn-warning">Modify</button>						
					    	<button type="button" id="removeBtn" class="btn btn-danger">REMOVE</button>
					   
					    <button type="button" id="listBtn" class="btn btn-primary" onclick="CloseWindow();">CLOSE </button>
					</div>									
				</div><!-- end card -->				
			</div><!-- end col-md-12 -->
		</div><!-- end row  -->		
		
    </section>
    <!-- /.content -->
  </div>
  <!-- /.content-wrapper -->

 

 

작성자가 아니면 modify, remove 버튼 안나오게

<c:if test="${loginUser.id eq pds.writer }">
							<button type="button" id="modifyBtn" class="btn btn-warning">Modify</button>						
					    	<button type="button" id="removeBtn" class="btn btn-danger">REMOVE</button>
					 </c:if> 

 

 

---

detail_js 인클루드

 <%@ include file = "./detail_js.jsp" %>

여기에 모디파이화면넘어가는 클릭이벤트같은거줄거임

---

일단디테일

	<h3>첨부파일</h3>
								</div>			
								<div class="card-footer">
									<div class="row">
										<c:forEach items="${pds.attachList }" var="attach">
											<span>${attach.fileName }</span>
										</c:forEach>
									</div>
								</div>				

이제 이걸 클릭했을때..

 

이걸눌럿을ㄸ떄 ano 넘기면 파일다운로드될거임

<span><a href="getFile.do?ano=${attach.ano}">${attach.fileName }</a></span>

 

이제 모양만 만들면 된다

 

---

<div class="card-footer">
									<div class="row">
										<c:forEach items="${pds.attachList }" var="attach">
											<div class="col-md-4 col-sm-4 col-xs-12" style="cursor:pointer;">
												<div class="info-box"> 
													<span class="info-box-icon bg-yellow">
														<i class="fa fa-copy"></i>
													</span>
												<div class="info-box-content">
													<span class="info-box-text">
														<fmt:formatDate value="${attach.regDate }" pattern="yyyy-MM-dd"/>
													</span>
													<span class = "info-box-number">${attach.fileName }</span>
													</div>
												</div>
											</div>
										</c:forEach>
									</div>
								</div>				

 

 

<div class="col-md-4 col-sm-4 col-xs-12" style="cursor:pointer;" onclick="location.href='<%=request.getContextPath()%>/pds/getFile.do?ano=${attach.ano }';">

이렇게 해도된다 같은depts라

 

모디파이화면

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>

    
    
<body>
   <!-- Main content -->
    <section class="content container-fluid">
		<div class="row justify-content-center">
			<div class="col-md-9">
				<div class="card card-outline card-primary">
					<div class="card-header">
						<h3>자료 수정</h3>
					</div><!--end card-header  -->
					<div class="card-body">
						<form enctype="multipart/form-data" role="form" method="post" action="modify.do" name="modifyForm">
							
							<input type='hidden' name="pno" value="" />
						
							<div class="form-group">
								<label for="writer">작성자</label> 
								<input type="text" id="writer" readonly
									name="writer" class="form-control" value="">
							</div>
							<div class="form-group">
								<label for="title">제 목</label> 
								<input type="text" id="title" value=""
									name='title' class="form-control" placeholder="제목을 쓰세요">
							</div>
							<div class="form-group">
								<label for="content">내 용</label>
								<textarea id="content" name="content"></textarea>
							</div>
							
							<div class="form-group">								
								<div class="card card-outline card-success">
									<div class="card-header">
										<h3 style="display:inline;line-height:40px;">첨부파일 : </h3>
										&nbsp;&nbsp;<button class="btn btn-primary" 
										type="button" id="addFileBtn">Add File</button>
									</div>									
									<div class="card-footer fileInput">
										<ul class="mailbox-attachments d-flex align-items-stretch clearfix">
										
										</ul>
										<br/>														
									</div>
								</div>
							</div>
							
						</form>
					</div><!--end card-body  -->
					<div class="card-footer">
						<button type="button" class="btn btn-warning" id="modifyBtn">수 정</button>
						&nbsp;&nbsp;&nbsp;&nbsp;
						<button type="button" class="btn" id="cancelBtn">취 소</button>
					</div><!--end card-footer  -->
				</div><!-- end card -->				
			</div><!-- end col-md-12 -->
		</div><!-- end row -->
    </section>
    <!-- /.content -->


</body>

 

 

이제 detail_js (모디파이로 넘어가려고)

<%@ page language="java" contentType="text/html; charset=EUC-KR"
    pageEncoding="EUC-KR"%>
<form role = "form">
	<input type="hidden" name="pno" value="${pds.pno }">
</form>


<script>
	window.onload=function(){
		var formObj = $("form[role='form']");
		$("#modifyBtn").on("click",function(){
			formObj.attr("action","modifyForm.do");
			formObj.submit();
		});
		$("#removeBtn").on("click",function(){
			formObj.attr("action","remove.do");
			formObj.attr("mothod","post");
			formObj.submit();
		});
	}
</script>

이제 수정화면 열리고

 

안에 내용나오게

 

 

	<script>
		window.onload=function(){
			summernote_start($('#content'),'<%=request.getContextPath()%>');
		}
	</script>

 

 

내용에 <script> 넣고 해도 디테일에서는 서머노트가 알아서 &어쩌고로 바꿔주는데

모디파이 누르면 스크립트 코드가 튀어나옴

스마트에디터가 오지랖떨어서그럼

그래서 강제로 el문의 펑션을 써서 바꿔줘야함 (이런현상떄문에 만들어진 펑션임)

 

이엘문에서 펑션쓸수있게하는.. 

 

이 컨텐트를 그대로 떄려박으면 안되고

<textarea id="content" name="content">${fn:escapeXml(pds.content)}</textarea>

이렇게 수정

 

그럼 수정눌러도

스크립트가 실행되지않고 내용에 잘 들어감

 

근데 이 글 맨처음에 적은것처럼 제목에 적은건 아직 해결안됨

 

---

잘라내기.. jsp 추가할거임

수정에서

파일추가 삭제

원래파일과 수정으로 추가된파일 더해서 5개이하

해야됨

 

<%@ page language="java" contentType="text/html; charset=EUC-KR"
    pageEncoding="EUC-KR"%>
<script>
		window.onload=function(){
			summernote_start($('#content'),'<%=request.getContextPath()%>');
		}
	</script>

 

첨부파일에 대한 버튼등의 이벤트를 핸들링해야함

 

이버튼누르면 인풋태그추가되도록

여기에 인풋태그들 들어와야하고

 

원래 있던 파일리스트는'

아까 디테일햇듯이 마크업을 직접할거임

foreach로 어태리치스트 뿌릴거임

 

디테일과 다른점은 첨부를 지울수도잇어야함

썸네일 만들떄 그부분까지 고려해야함

 

 

a태그에 필요한 내용을 심는거임

필요한 속성을 만들어서 데이터들을 심을수있따 제목에 스크립트코드를 치면 스크립트가 실행되어버린다.

 

(XSS 공격같은...)

 

<를 &jtlt 이런식으로 바꾸는거임

 

 

 

근데 일단 이건 보류한다

 

 

 

디테일화면

 

<%@ page language="java" contentType="text/html; charset=UTF-8"

    pageEncoding="UTF-8"%>

    

<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>

<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>

<link rel="stylesheet" href="https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css">

 

  <!-- Content Wrapper. Contains page content -->

  

 

     <!-- Main content -->

    <section class="content container-fluid">

  <div class="row justify-content-center">

   <div class="col-md-9">

    <div class="card card-outline card-primary">

     <div class="card-header">

      <h3 class="card-title">상세보기</h3>

     </div>

     <div class="card-body">

      <div class="form-group col-sm-12">

       <label for="title">제 목</label>

       <input type="text" class="form-control" id="title" value="${pds.title}" readonly />       

      </div> 

      <div class="col-sm-12 row">

       <div class="form-group col-sm-4" >

        <label for="writer">작성자</label>

        <input type="text" class="form-control" id="writer" value="${pds.writer}" readonly />

       </div>  

       

       <div class="form-group col-sm-4" >

        <label for="regDate">작성일</label>

        <input type="text" class="form-control" id="regDate" 

         value="<fmt:formatDate value="${pds.regDate}" pattern="yyyy-MM-dd" />" readonly />

       </div> 

       <div class="form-group col-sm-4" >

        <label for="viewcnt">조회수</label>

        <input type="text" class="form-control" id="viewcnt" value="${pds.viewcnt}"

          readonly />

       </div> 

      </div> 

      <div class="form-group col-sm-12">

       <label for="content">내 용</label>

       <div id="content">${pds.content}</div> 

      </div>

      <div class="form-group col-sm-12">

       <div class="card card-outline card-success">

        <div class="card-header">

         <h3>첨부파일</h3>

        </div>   

        <div class="card-footer">

         <div class="row">

         

         </div>

        </div>    

       </div>

      </div>

            

     </div>

     <div class="card-footer">

     

       <button type="button" id="modifyBtn" class="btn btn-warning">Modify</button>      

          <button type="button" id="removeBtn" class="btn btn-danger">REMOVE</button>

        

         <button type="button" id="listBtn" class="btn btn-primary" onclick="CloseWindow();">CLOSE </button>

     </div>         

    </div><!-- end card -->    

   </div><!-- end col-md-12 -->

  </div><!-- end row -->  

  

    </section>

    <!-- /.content -->

  </div>

  <!-- /.content-wrapper -->



 

 

 

 

작성자가 아니면 modify, remove 버튼 안나오게

 

<c:if test="${loginUser.id eq pds.writer }">

       <button type="button" id="modifyBtn" class="btn btn-warning">Modify</button>      

          <button type="button" id="removeBtn" class="btn btn-danger">REMOVE</button>

      </c:if> 



 

 

 

 

detail_js 인클루드

 

 <%@ include file = "./detail_js.jsp" %>

여기에 모디파이화면넘어가는 클릭이벤트같은거줄거임

 

일단디테일

 

 <h3>첨부파일</h3>

        </div>   

        <div class="card-footer">

         <div class="row">

          <c:forEach items="${pds.attachList }" var="attach">

           <span>${attach.fileName }</span>

          </c:forEach>

         </div>

        </div>    

이제 이걸 클릭했을때..

 



 

 

이걸눌럿을ㄸ떄 ano 넘기면 파일다운로드될거임

 



<span><a href="getFile.do?ano=${attach.ano}">${attach.fileName }</a></span>

 

 



이제 모양만 만들면 된다

 

 

 

<div class="card-footer">

         <div class="row">

          <c:forEach items="${pds.attachList }" var="attach">

           <div class="col-md-4 col-sm-4 col-xs-12" style="cursor:pointer;">

            <div class="info-box"> 

             <span class="info-box-icon bg-yellow">

              <i class="fa fa-copy"></i>

             </span>

            <div class="info-box-content">

             <span class="info-box-text">

              <fmt:formatDate value="${attach.regDate }" pattern="yyyy-MM-dd"/>

             </span>

             <span class = "info-box-number">${attach.fileName }</span>

             </div>

            </div>

           </div>

          </c:forEach>

         </div>

        </div>    

 

 



 

 

<div class="col-md-4 col-sm-4 col-xs-12" style="cursor:pointer;" onclick="location.href='<%=request.getContextPath()%>/pds/getFile.do?ano=${attach.ano }';">



이렇게 해도된다 같은depts라

 

 

모디파이화면

 

<%@ page language="java" contentType="text/html; charset=UTF-8"

    pageEncoding="UTF-8"%>

 

    

    

<body>

   <!-- Main content -->

    <section class="content container-fluid">

  <div class="row justify-content-center">

   <div class="col-md-9">

    <div class="card card-outline card-primary">

     <div class="card-header">

      <h3>자료 수정</h3>

     </div><!--end card-header -->

     <div class="card-body">

      <form enctype="multipart/form-data" role="form" method="post" action="modify.do" name="modifyForm">

       

       <input type='hidden' name="pno" value="" />

      

       <div class="form-group">

        <label for="writer">작성자</label> 

        <input type="text" id="writer" readonly

         name="writer" class="form-control" value="">

       </div>

       <div class="form-group">

        <label for="title">제 목</label> 

        <input type="text" id="title" value=""

         name='title' class="form-control" placeholder="제목을 쓰세요">

       </div>

       <div class="form-group">

        <label for="content">내 용</label>

        <textarea id="content" name="content"></textarea>

       </div>

       

       <div class="form-group">        

        <div class="card card-outline card-success">

         <div class="card-header">

          <h3 style="display:inline;line-height:40px;">첨부파일 : </h3>

          &nbsp;&nbsp;<button class="btn btn-primary" 

          type="button" id="addFileBtn">Add File</button>

         </div>         

         <div class="card-footer fileInput">

          <ul class="mailbox-attachments d-flex align-items-stretch clearfix">

          

          </ul>

          <br/>              

         </div>

        </div>

       </div>

       

      </form>

     </div><!--end card-body -->

     <div class="card-footer">

      <button type="button" class="btn btn-warning" id="modifyBtn">수 정</button>

      &nbsp;&nbsp;&nbsp;&nbsp;

      <button type="button" class="btn" id="cancelBtn">취 소</button>

     </div><!--end card-footer -->

    </div><!-- end card -->    

   </div><!-- end col-md-12 -->

  </div><!-- end row -->

    </section>

    <!-- /.content -->

 

 

</body>

 

 

 

 

이제 detail_js (모디파이로 넘어가려고)

 

<%@ page language="java" contentType="text/html; charset=EUC-KR"

    pageEncoding="EUC-KR"%>

<form role = "form">

 <input type="hidden" name="pno" value="${pds.pno }">

</form>

 

 

<script>

 window.onload=function(){

  var formObj = $("form[role='form']");

  $("#modifyBtn").on("click",function(){

   formObj.attr("action","modifyForm.do");

   formObj.submit();

  });

  $("#removeBtn").on("click",function(){

   formObj.attr("action","remove.do");

   formObj.attr("mothod","post");

   formObj.submit();

  });

 }

</script>

이제 수정화면 열리고

 

 

 

안에 내용나오게

 

 

 

 

 



 <script>

  window.onload=function(){

   summernote_start($('#content'),'<%=request.getContextPath()%>');

  }

 </script>

 

 

 

 

내용에 <script> 넣고 해도 디테일에서는 서머노트가 알아서 &어쩌고로 바꿔주는데

 

모디파이 누르면 스크립트 코드가 튀어나옴

 



스마트에디터가 오지랖떨어서그럼

 

그래서 강제로 el문의 펑션을 써서 바꿔줘야함 (이런현상떄문에 만들어진 펑션임)

 

 

 



이엘문에서 펑션쓸수있게하는.. 

 

 



이 컨텐트를 그대로 떄려박으면 안되고

<textarea id="content" name="content">${fn:escapeXml(pds.content)}</textarea>

이렇게 수정

 

 

 

그럼 수정눌러도

 



스크립트가 실행되지않고 내용에 잘 들어감

 

 

 

근데 이 글 맨처음에 적은것처럼 제목에 적은건 아직 해결안됨

 

 

 



잘라내기.. jsp 추가할거임

수정에서

 

파일추가 삭제

 

원래파일과 수정으로 추가된파일 더해서 5개이하

 

해야됨

 

 

 



<%@ page language="java" contentType="text/html; charset=EUC-KR"

    pageEncoding="EUC-KR"%>

<script>

  window.onload=function(){

   summernote_start($('#content'),'<%=request.getContextPath()%>');

  }

 </script>

 

 

첨부파일에 대한 버튼등의 이벤트를 핸들링해야함

 

 

 



이버튼누르면 인풋태그추가되도록



여기에 인풋태그들 들어와야하고

 

 

원래 있던 파일리스트는'

 

아까 디테일햇듯이 마크업을 직접할거임

 

foreach로 어태리치스트 뿌릴거임

 

 

 

디테일과 다른점은 첨부를 지울수도잇어야함

 

썸네일 만들떄 그부분까지 고려해야함

 

 

 

 

 

a태그에 필요한 내용을 심는거임

 

필요한 속성을 만들어서 데이터들을 심을수있따

 

<%@ page language="java" contentType="text/html; charset=EUC-KR"
    pageEncoding="EUC-KR"%>
<script>
		window.onload=function(){
			summernote_start($('#content'),'<%=request.getContextPath()%>');
			
			//파일 삭제 버튼
			$('div.fileInput a[name="attachedFile"]> button').on('click',function(event){
				alert('x file btn click');
				
				return false; //앵커태그까지 이벤트가 전이되지않ㅇ는다.
				
			});
			
			//파일추가버튼
			$('#addFileBtn').on('click',function(event){
				alert("add file btn");
			});
		}
	</script>

 

x 버튼 누르면 해당 div 화면에서 지우고 딜리트파일인풋태그 추가함

 

컨펌하지않으면 지우지않음

일단 화면에서는 지우고 히든으로 넣어서 폼태그 바로밑에 프리펜드

//파일 삭제 버튼
			$('div.fileInput a[name="attachedFile"] > button').on('click',function(event){
				//alert('x file btn click');
				
				var parent = $(this).parent('a[name="attachedFile"]';);
				if(!confirm(parent.attr("attach-fileName")+"파일을 삭제하시겠습니까?")) return false;
				
				var ano = parent.attr("attch-no");
				
				$(this).parents('li.attach-item').remoce();
				
				var input=$('<input>').attr({"type":"hidden", "name" : "deleteFile", "value":ano});
				$('form[role="form"]').prepend(input);
				
				return false; //앵커태그까지 이벤트가 전이되지않ㅇ는다.
				
			});

첨부파일로 되어잇는 갯수

 

	
			//파일추가버튼
			$('#addFileBtn').on('click',function(event){
				//alert("add file btn");
				var attachedFile = $('a[name="attachedFile"]').length;
				var inputFIle=$('input[name="uploadFile"]').length;
				
				var attachCount = attachedFile + inputFile;
				
				if(attachCount >= 5){
					alert("파일추가는 5개까지만 가능합니다");
					return;
				}
				
				var input=$('<input>').attr({"type":"file","name":"uploadFile"}).css("display","inline");
				var div=$('<div>').addClass("inputRow");
				div.append(input).append("<button style='border:0; outline:0' class='badge bg-red' type='button'>X</button>");
				div.appendTo('.fileInput');
			});
			
			$('.fileInput').on('change','input[type="file"]',function(event){
				if(this.files[0].size>1024*1024*40){
					alert("파일용량이 40MB를 초과하였습니다.");
					this.value="";
					$(this).focus();
					return false;
				}
			});

 

첨부파일에 대한 부분이엇고

 

이제 서브밋에 대한 부분

modify_js에 스크립트하나더파서

<script>
$('#modifyBtn').on('click',function(e){
	//alert("modify btn click");
	
	var form=document.modifyForm;
	
	//제목유무
	if($("input[name='title']").val()==""){
		alertI(input.name=_"은 필수입니다.");
		$("input[name='title']").focus();
		return;
	}
	
	//파일유무
	var files = $('input[name="uploadFile"]');
	for(var file of files){
		console.log(file.name + " : "+ file.value);
		if(file.value==""){
			alert("파일을 선택하세요.");
			file.focus();
			return false;
		}
	}
})
</script>

 

 

이제 수정까지 다 끝남

 

[