10. Spring/실험

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

THE HEYDAZE 2020. 7. 7. 11:23
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>
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>
cs

 

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

ajax 로 전송 시

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

로 바꿔주어야 한다

 

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

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

 

결론

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

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