웹 브라우저 새로고침(F5) 시 데이터 전송 안 되게 하는 문제

장고 프레임워크를 사용한 웹 서버(로컬 서버)에서 폼 데이터 전송 응답을 받고 웹 브라우저 새로고침(F5 키) 시 폼 데이터가 계속 전송되는 문제가 발행하여 여러 방법을 시도했으나 해결이 안되었음. 방법이 없는 건 아닐텐데...

 

 

웹 브라우저 새로고침 시 데이터 전송이 안 되어야 하는데...

 

[발생된 문제]

장고(django)를 활용하는 간단한 웹 서비스 테스트를 위해 클라이언트 브라우저의 폼을 아래처럼 get 방식으로 전송을 했다. 

<div class="container">
    <h5 class="my-3 border-bottom pb-2"> 복불복 번호 뽑기</h5>
    <form method="get">
        <div class="mb-3">
            <label for="mosu" class="form-label">모수(총 개수(인원))</label>
            <input type="text" class="form-control" name="mosu" id="mosu" value="{{ mosu|default_if_none:'' }}">  
        </div>
        <div class="mb-3">
            <label for="ext_num" class="form-label">뽑을 번호 개수</label>
            <input type="text" class="form-control" name="ext_num" id="ext_num"
                   value="{{ ext_num|default_if_none:'' }}"> 
        </div>
        <div class="mb-3">
            <label for="content" class="form-label">결과는...</label>
            <input class="form-control" name="content" id="content" value="{{ result|default_if_none:'' }}" size="50%">
        </div>
        <button type="submit" class="btn btn-primary">실행하기</button>
    </form>
</div>

장고의 views.py에서 요청 처리한 후 name=mosu와 name=ext_num은 공백('')값을 전송하고 name=content 값만 처리된 결과를 받아 보여주는 방식으로 코딩을 했는데...

 

※ <form method="post"> 태그 밑에 {% csrf_token %} 추가 시에도 아래 내용은 동일함

※  장고는 post 방식으로 데이터 전송 시 csrf_token이라는 것을 사용하는데, 이것은 csrf 취약점을 이용한 악의적인 공격을 방어해 주는 역할을 하는 것임

웹 브라우저 입력 폼

웹 브라우저 새로고침(F5, 리로드) 시, 폼의 input value는 공백이지만, URL의 매개변수 값은 입력한 값이 계속 남아있고, 아래처럼 결과 값이 계속 전송되어 온다.

결과 값 계속 보임

 

인터넷에서 문제 해결 방법을 검색하여 자바스크립트 구문을 아래처럼 적용해봤으나 해결 안됨

<script>
    console.log("location.pathname: " + location.pathname);
    window.onkeydown = function() {
        var kcode = event.keyCode;
        if(kcode == 116) {
            history.replaceState({}, null, location.pathname);
            // history.replaceState(stateObj, title[, url])
        }
    }
</script>

 

폼 get 방식에 csrf를 아래처럼 적용해서 해보았고,

 

폼을 post 방식으로 수정하여 적용해봤으나 문제는 동일하게 발생함

post 방식 변경 후

 

다만, post 방식에서는 아래 이미지 처럼 메시지 팝업창이 노출된 점이 달랐음

양식 다시 제출 확인

 

문제 해결 후 다시 포스팅 예정...