개발자

개발자 모드 함수 실행 방지

2024년 04월 18일조회 623

안녕하세요. 스스로 개발자라고도 하기 민망한 신입 개발자입니다. 이번에 자바스크립트를 이용한 쿠폰 다운로드 로직을 구현하면서 예전 사람이 만들어 놓은 코드를 참고하면서 문제가 발생했습니다. 기존 방식은 프론트단에 있는 데이터를 ajax에 담아 서버 측에서 검증을 받은 후 쿠폰 다운로드 함수를 실행하여 쿠폰을 다운로드 받아왔습니다. 예시) 로그인체크 함수 (ajax로 로그인 검증 함수로 보냄) 응답이 성공일시 -> 참여이력체크 함수 (ajax로 로그인 검증 함수로 보냄 -> 반복 -> 검증 전부 성공시 쿠폰 다운로드 함수 실행 여기서 문제는 개발자 모드 콘솔창에 쿠폰 다운로드 함수를 호출하면 검증과정 없이 쿠폰이 다운로드 받아지는 것입니다. 이것을 방지하기 위해 서버단에서는 세션, 토큰을 사용하는 방법이 있다는 것은 찾았지만 클라이언트 측, 즉 자바스크립트 코드로 개발자 모드에서 함수를 무단으로 호출하는 것을 방지하는 방법이 있을까요? 밑에 원하는 해결 방안을 적어 놓겠습니다 1. 개발자 모드 실행 시 경고창, 창 이동 방법 - 이 방법은 제외입니다. 2. 클로저 사용 - 익명 함수로 다운로드 함수를 작성 시 검증 과정 마지막에 호출하지 못하더군요. 제가 클로저를 잘못 이해하고 사용한다 생각하니 클로저로 해결할 수 있는 방법이 있다면 가르쳐주시면 감사하겠습니다. 3. 그 이외에 방법 자바스크립트 코드로 해결하는 방법이 있으면 좋겠습니다.

이 질문이 도움이 되었나요?
'추천해요' 버튼을 누르면 좋은 질문이 더 많은 사람에게 노출될 수 있어요. '보충이 필요해요' 버튼을 누르면 질문자에게 질문 내용 보충을 요청하는 알림이 가요.
profile picture
익명님의 질문

답변 4

백승훈님의 프로필 사진

검증 전부 성공시 true 혹은 하나라도 실패시 false를 주는 함수 혹은 기능을 만들고 쿠폰 다운로드 함수 내부에 위의 검증이 성공하면 -> 다음로직 실패하면 -> return 으로 함수종료 하면 제일 간단할 것 같습니다.

1function couponModule() {
2    let isVerified = false; // 초기 검증 상태는 false
3
4    // 검증 함수
5    function verifyUser(callback) {
6        // AJAX 요청을 통해 사용자 검증 로직 수행
7        // 검증 성공 시
8        isVerified = true;
9        callback();
10    }
11
12    // 쿠폰 다운로드 함수
13    function downloadCoupon() {
14        if (!isVerified) {
15            console.log("검증되지 않은 접근입니다.");
16            return; // 검증되지 않았을 때 함수 종료
17        }
18        console.log("쿠폰 다운로드 중...");
19        // 쿠폰 다운로드 로직 구현
20    }
21
22    return {
23        verifyUser: verifyUser,
24        downloadCoupon: downloadCoupon
25    };
26}
27
28const coupon = couponModule();
29coupon.verifyUser(function() {
30    coupon.downloadCoupon();
31});
profile picture

익명

작성자

2024년 04월 18일

함수를 모듈화해서 성공 여부에 따라 다운로드 함수를 콜백하는 방법이 맞나요? 제가 잘 몰라서 ㅎㅎ. 이 방법은 생각 못했는데 감사합니다.

ALavigne님의 프로필 사진

프론트에 있는 코드는 어떻게 하든 다 뚫리는걸로 아는데 로직을 백엔드에 놓는게 맞는거 아닐까요

profile picture

익명

작성자

2024년 04월 29일

네 프론트단에서 아무리 숨겨놓아도 결국 뚫리는걸로 알고 있습니다. 그래서 세션과 토큰 방식을 이용하는데 프론트단에서도 최대한 방지하고 싶어서요

방준우님의 프로필 사진

기존 통신방식이 자동문인 상태에서는 클라에서 아무리 꼬아놔도 좀 더 귀찮게 할 뿐 뚫립니다 서버랑 암호화, 검증 프로토콜 만들어야됩니다 네트워크 요청이 노출되서 암호화해야하는데 클라에서 암호화해도 ... 백엔드를 건들일 수 없다면 복호화를 못하니 무용지물이죠 서버리스를 만들어서 서버리스를 거쳐서 복호화된 요청을 보내는 것도 방법일 것 같네요 그럼에도 암호화 로직이 클라이언트코드에 있기 때문에 좀 파고 들면 암호화 로직 찾아서 적용할 수 있게 되겠죠 어떻게 해도 .. 몇번 찔러보면 함수 실행할 수 있는 수준에 도달할겁니다 검증 없이 함수 실행하면 쿠폰 발급인게 너무 쉽습니다 유저 식별 가능한 검증로직을 서버에 짜는게 맞는 것 같습니다 콘솔 입력 구분하는 로직조차 content type으로 모듈에서 실행된 건지 콘솔에서 요청된 건지 서버에서 구분하는 로직이라 적용이 안되네요..

성현님의 프로필 사진

늦은 감이 있지만 도움을 드리고 싶어 왔습니다. 참고 : 1. 작성된 코드는 오직 보안 관련 코드만 작성 되었습니다. 응용하여 사용하시면 됩니다. 2. 보안을 위해 프로그래밍이 완료되어 더 추가될게 없다고 생각되는 민감한 파일은 주석 제거후 암호화 하는것이 안전 합니다. 3. 코드는 테스트 되지 않았습니다. 참고용으로만 되어 있습니다. 원리 : Ex : getCoupon()을 하면 즉시 쿠폰을 받을 수 있는 함수가 있다 하면, 거기에 공격자가 알 수 없게 보안 키를 추가 했습니다. 일종의 자물쇠를 추가한거죠. iife이므로 콘솔을 이용해 변수을 알 수 없고, 함수 역시 그러므로 뚫릴 확률이 적습니다. math.random 등은 보안성 문제가 있기에 js 내장 crypto 모듈을 사용하였습니다. ( 오류 발생시 require을 사용해 보세요 )

1!(function(){ // iife로 먼저 보호
2  let uuid = crypto.randomUUID() // crypto의 randomUUID을 이용해 값 얻기
3  let secNum = crypto.getRandomValues(new Uint32Array(3)).join("")
4  
5function coupon(secKey){
6  if(uuid !== secKey || !secKey){ // secKey 확인
7    return
8 }  
9  
10  download(uuid,secNum) // 인증 완료 후 값 전달.
11}
12
13/*
14   ** TODO. 보안을 위해 이 주석과 다른 주석을 삭제하고, 코드를 인코딩 해 주세요.
15secKey = 1차 보호 * randomUUID
16secNum = 2차 보호 * getRandomValues
17*/
18function download(sk,sn){
19     if(sk !== uuid || !sk){
20       return
21     } else if(sn !== secNum || !sn){
22       return 
23     }
24     
25     /*  {...}  */
26}
27  
28})()

지금 가입하면 모든 질문의 답변을 볼 수 있어요!

현직자들의 명쾌한 답변을 얻을 수 있어요.

또는

이미 회원이신가요?

AI 답변
커리어리 AI 봇 프로필 이미지

커리어리 AI 봇

GPT가 달아주는 답변입니다.

2024년 04월 18일

JavaScript 코드를 사용하여 브라우저 콘솔에서의 함수 실행을 완전히 막는 것은 본질적으로 불가능합니다. 이는 클라이언트 사이드 스크립트 언어로서 JavaScript의 보안 모델과 관련되어 있습니다. 그러나, 익명 함수와 클로저를 사용하여 전역 범위에서 코드에 접근하는 것을 훨씬 더 어렵게 만들 수 있습니다: ```javascript (function() { function yourFunction() { // Your code here } })(); ``` 위와 같이 작성하면 `yourFunction`은 전역 범위가 아닌 익명 함수의 범위에서만 실행 가능합니다. 따라서, 콘솔에서 직접 액세스하거나 호출할 수 없습니다. 다시 말하지만, 이 방법도 JavaScript 코드가 고급 사용자로부터 완전히 안전하게 보호되지 않습니다. 이러한 문제를 완전히 해결하기 위해서는 서버 측 검증과 인증 메커니즘이 필요합니다. 예를 들어, 서버 단에서 세션 또는 토큰을 사용하여 요청이 유효한지 확인할 수 있습니다. 즉, 권한이 없는 사용자가 원치 않는 동작을 수행하지 못하도록 해야합니다. 이는 프론트엔드만으로는 구현할 수 없는 보안 메커니즘입니다. 결국, JavaScript를 통한 클라이언트 사이드 보안은 두번째 방어선일 뿐, 첫번째와 가장 중요한 방어선은 서버 사이드에서의 인증과 권한 검사입니다.

목록으로

지금 가입하면 모든 질문의 답변을 볼 수 있어요!