이 영역을 누르면 첫 페이지로 이동
나눔코딩 블로그의 첫 페이지로 이동

나눔코딩

페이지 맨 위로 올라가기

나눔코딩

01. 크롬 개발자 도구를 이용하여 Ajax 회원가입이 가능한가?

  • 2020.07.07 11:23
  • 10. Spring/실험
OS Windows 10 Home 64bit 버전 1903 (OS 빌드 18362.836)
FrameWork Spring Boot
DB H2

 

회원가입 전 DB

DB 와 JAVA 에 유효성검사를 하지 않았으며

패스워드 부분만 JavaScript 로 5글자 이상만 가입할 수 있게 설정하였습니다.

 

코드
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="shortcut icon" href="#">
    <meta charset="UTF-8">
    <title>회원가입 페이지</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
 
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
    <link href="//maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
 
    <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
 
<div class="container mt-5">
    <form id="sign_up_form" class="form-block">
        <div class="form-group">
            <label for="userId"><b>아이디</b> </label>
            <input type="text" class="form-control" id="userId" name="userId">
        </div>
        <div class="form-group">
            <label for="password"><b>패스워드</b> </label>
            <input type="password" class="form-control" id="password" name="password">
        </div>
        <div class="form-group">
            <label for="email"><b>이메일</b> </label>
            <input type="email" class="form-control" id="email" name="email">
        </div>
        <button id="btn_ok" type="submit" class="btn btn-primary">회원가입</button>
    </form>
</div>
 
<script>
 
    $("#btn_ok").click(function (e) {
        e.preventDefault();
 
        var userId = $("[name=userId]").val();
        var password = $("[name=password]").val();
        var email = $("[name=email]").val();
 
        var data = {
            'userId':userId,
            'password':password,
            'email':email
        };
        var sendData = JSON.stringify(data);
 
        if (password.length < 5) {
            alert('패스워드가 4글자 이상이여야 합니다!');
            return;
        }
 
        $.ajax({
            url: "/users",
            type: 'POST',
            data: sendData,
            contentType: "application/json; charset=utf-8;",
            success: function (data) {
                console.log(data);
            },
            error: function (xhr, err) {
                console.log(xhr + '\n' + err);
            }
        });
    })
</script>
 
</body>
</html>
Colored by Color Scripter
cs

 

실험 1 (기본 전송)

이미지 클릭

JavaScript 로 패스워드 5글자 이상만 가입할 수 있도록 하였기 때문에

위 화면과 같은 모습을 볼 수 있다.

 

실험 2 (Chrome Console 을 통한 Ajax 전송)

이미지 클릭

JavaScript 로 막았지만 Chrome 개발자 콘솔을 이용하여

url 과 보낼 파라미터명들만 안다면

코드만 가지고 회원가입이 충분히 가능하다

 

실험 3 (다른 페이지에서 Chrome Console 을 통한 Ajax 전송)

이미지 클릭

회원가입 페이지가 아님에도 보낼 url 주소를 맞춰주면 '실험 2'와 같이

회원가입을 할 수 있는 모습을 보여준다.

 

실험 4 (html 문서 편집을 이용한 방법)

이미지 클릭

<script> 부분만 수정을 해보았지만 기존에 스크립트 그대로 남아있는 모습을 보여준다.

 

이미지 클릭

수정이 아닌 새로운 버튼을 추가하여 했더니 정상적으로 회원가입이 되는 모습을 보여준다

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<button id="btn_ok2" type="button" class="btn btn-danger" onclick='
 
        var data = {
            "userId":"root4",
            "password":"root",
            "email":"theheydaze@daum.net"
        };
 
        var sendData = JSON.stringify(data);
 
        $.ajax({
        url: "/users",
        type: "POST",
        data: sendData,
        contentType: "application/json; charset=utf-8;",
        success: function (data) {
        console.log(data);
        },
        error: function (xhr, err) {
        console.log(xhr + "\n" + err);
        }
        });
        '>버튼2</button>
Colored by Color Scripter
cs

 

실험 5 (다른 웹 사이트에서  Chrome Console 을 통한 Ajax 전송)

ajax 로 전송 시

url : 'http://[공인아이피]:8080/[해당주소]

로 바꿔주어야 한다

 

공유기라 포트포워딩 설정하고 해야하기때문에 실험 5는 패스...

http://localhost:8080/ 등은 안됩니다

 

결론

Chrome Console 을 이용하여 회원가입이 가능하다. 

(물론 보안이 위 화면처럼 엄청 취약할 때)

저작자표시 (새창열림)

'10. Spring > 실험' 카테고리의 다른 글

??. Spring 5 (스프링 5) - Dto 클래스는 Service 계층에 넘기는 것이 맞는가?  (0) 2021.08.20
03. 스프링 부트 (Spring Boot 2) - JPA Test 시 유의사항 @Where  (0) 2021.05.30
02. 100명의 사용자가 동시에 요청을 하면 서버는 올바르게 처리하는가?  (0) 2020.07.08

댓글

이 글 공유하기

  • 구독하기

    구독하기

  • 카카오톡

    카카오톡

  • 라인

    라인

  • 트위터

    트위터

  • Facebook

    Facebook

  • 카카오스토리

    카카오스토리

  • 밴드

    밴드

  • 네이버 블로그

    네이버 블로그

  • Pocket

    Pocket

  • Evernote

    Evernote

다른 글

  • ??. Spring 5 (스프링 5) - Dto 클래스는 Service 계층에 넘기는 것이 맞는가?

    ??. Spring 5 (스프링 5) - Dto 클래스는 Service 계층에 넘기는 것이 맞는가?

    2021.08.20
  • 03. 스프링 부트 (Spring Boot 2) - JPA Test 시 유의사항 @Where

    03. 스프링 부트 (Spring Boot 2) - JPA Test 시 유의사항 @Where

    2021.05.30
  • 02. 100명의 사용자가 동시에 요청을 하면 서버는 올바르게 처리하는가?

    02. 100명의 사용자가 동시에 요청을 하면 서버는 올바르게 처리하는가?

    2020.07.08
다른 글 더 둘러보기

정보

나눔코딩 블로그의 첫 페이지로 이동

나눔코딩

  • 나눔코딩의 첫 페이지로 이동

검색

메뉴

  • 홈
  • 태그
  • 방명록

카테고리

  • 분류 전체보기 (316)
    • ∞. 읽은 거리 (3)
    • ∞. 기술 면접 (61)
      • 1. 자료구조 (0)
      • 2. 네트워크 (9)
      • 3. 운영체제 (11)
      • 4. 데이터베이스 (13)
      • 5. 디자인 패턴 (0)
      • 6. 알고리즘 (0)
      • 7. 자바 (15)
      • 8. 자바스크립트 (7)
      • 9. 스프링 (5)
      • 10. 시큐리티 (1)
      • 11. 기타 (0)
      • 12. Vue (0)
    • ∞. 웹개발 유용한 사이트 (14)
    • ∞. 트러블 슈팅 + TIL (7)
    • 00. 출발 (9)
    • 01. 엑셀 (9)
      • 기초 (4)
      • 컴활 1급 (4)
      • VBA (0)
    • 02. 엑세스 (9)
      • 기초 (5)
      • 컴활 1급 (4)
    • 04. Oracle (1)
      • 기초 (1)
    • 03. JAVA (8)
      • 기초 (7)
      • 객체지향 프로그래밍 (0)
    • 05. HTML (13)
      • 기초 (1)
      • css (10)
      • sass (0)
      • less (0)
    • 06. Javascript (16)
      • 기초 (13)
      • ES6 모듈 (2)
      • Canvas (0)
    • 07. JSP (0)
      • 기초 (0)
    • 08. jQuery (0)
      • 기초 (0)
    • 09. BootStrap (1)
      • 기초 (0)
      • v4 - Layout (1)
    • 10. Spring (30)
      • 기초 (3)
      • 실험 (4)
      • MVC (1)
      • BOOT (6)
      • Security (10)
      • Lib (Library) (2)
      • 벤치마킹 (0)
      • JUnit5 (2)
      • DevTools (0)
      • Socket (1)
      • Batch (0)
      • Mobile (0)
      • WebFlux (0)
      • Cloud (0)
      • Thymleaf (0)
      • Actuator (0)
      • 성능 테스트 (1)
    • 11. JetBrains (34)
      • 기초 (1)
      • IntelliJ IDEA (33)
      • WebStorm (0)
      • Pycham (0)
    • 12. API (0)
      • 기초 (0)
      • 네이버 API (0)
      • 카카오 API (0)
      • 구글 API (0)
      • 인스타그램 API (0)
    • 13. AutoHotkey (1)
    • 14. Python (8)
      • 기초 (3)
      • Selenium (2)
      • Beautiful Soup (0)
      • openpyxl (1)
      • Pyqt5 (0)
      • Deep learning (open CV) (0)
      • Geocoder (0)
      • Anaconda (0)
      • DeepLearning (0)
      • Jupyter Nootbook (0)
    • 14.5. R (0)
    • 15. JMeter (0)
      • 다운로드 (0)
    • 16. Vue JS (23)
      • 기초 (3)
      • Vue 2 (15)
      • Vue 3 (5)
      • Vuetify 2.5.8 (0)
    • 17. Git (12)
      • 기초 (8)
      • ItelliJ IDEA (4)
      • SourceTree (0)
    • 18. AWS (5)
      • 기초 (2)
      • Jira (3)
    • 19. Naver Cloud Platform (0)
    • 20. Google Cloud Platform (0)
      • 기초 (0)
      • stt & tts (0)
    • 21. Kotlin (0)
    • 22. Android (0)
      • 기초 (0)
      • Java (0)
      • Kotlin (0)
      • Flutter FrameWork (0)
    • 23. Clean Code [JAVA] (1)
    • 24. BuildTool (1)
      • Maven (1)
      • Gradle (0)
    • 25. 자료 구조와 알고리즘 (18)
      • JAVA (1)
      • Java Script (1)
      • 프로그래머스 (0)
      • 백준 알고리즘 (0)
      • 나의 알고리즘 (14)
      • Brilliant 공부 (0)
    • 26. React (1)
      • 기초 (0)
      • 강의 정리 (1)
    • 27. PostMan (0)
      • 기초 (0)
    • 28. 프로그래머스 (9)
    • 29. Leet Code (0)
    • 30. MySQL (3)
      • 기초 (2)
      • 문제 (1)
    • 73. GraphQL (0)
    • 74. Nuxt JS (0)
    • 75. Electron (0)
    • 76. UX &amp; UI Design Tool (0)
      • 기초 (0)
      • Axure (0)
      • Sketch (0)
      • Figma (0)
    • 77. MarkDown (1)
      • 기초 (1)
    • 78. Tomcat (1)
      • 메모 (1)
    • 79. Element JS (0)
    • 80. Parallax JS (0)
      • 기초 (0)
    • 81. Player JS (0)
      • 기초 (0)
    • 82. Smart Maker (0)
    • 83. Vim (0)
      • 기초 (0)
    • 84. Linux (0)
      • 기초 (0)
      • Centos 7 (0)
      • Ubuntu (0)
    • 85. Node JS (2)
      • 기초 (1)
      • WebRTC (0)
      • NVM (1)
    • 86. Propeller JS (0)
    • 87. FullPage JS (0)
      • 기초 (0)
    • 88. 아두이노 (0)
    • 89. Tensorflow (0)
    • 90. 웹 패킷 분석 (0)
    • 91. 크롬 개발자도구 (0)
    • 92. 디자인 패턴 (7)
      • 생성(Creational) (3)
      • 구조(Structral) (1)
      • 행위(Behavioral) (2)
      • SOLID 패턴 (0)
    • 95. Linux Shell Script (0)
    • 96. 구글 애널리스틱 (0)
    • 97. ffmpeg (0)
    • 98. ShareX (1)
    • 자료실 (0)
    • 기타 (2)

최근 글

인기 글

댓글

공지사항

아카이브

태그

  • 졵
  • 엑셀 분석작업
  • 엑셀 표시형식
  • 엑셀 가운데맞춤
  • 깁
  • 엑셀 글씨
  • 엑셀 기본작업
  • 엑셀 기타작업

나의 외부 링크

  • 비전공자 개발자
  • 자바 디자인 패턴
  • 자바 디자인 패턴
  • 스프링 블로그
  • 해킹보안 & 웹 관련
  • ERD 생성
  • 전문 기술 블로그
  • Servlet에 대한 개념없이 스프링을 했네요?
  • 스프링 FitlerChainList
  • 알고리즘 파워 블로그

정보

THE HEYDAZE의 나눔코딩

나눔코딩

THE HEYDAZE

블로그 구독하기

  • 구독하기
  • RSS 피드

방문자

  • 전체 방문자
  • 오늘
  • 어제

티스토리

  • 티스토리 홈
  • 이 블로그 관리하기
  • 글쓰기
Powered by Tistory / Kakao. © THE HEYDAZE. Designed by Fraccino.

티스토리툴바