자바스크립트에 암호 저장하는 방법

자바스크립트에 암호 저장하는 방법

작성일 2024.04.02댓글 3건
    게시물 수정 , 삭제는 로그인 필요

안녕하세요 자바스크립트에 대해서 기초만 알고 있는 기초학습자의 질문입니다.

단순 학습목적이고 민감한 데이터를 다루지 않습니다.



login.html 페이지를 만들고 id와 password 폼을 두 개를 만들어서 사용자에게 받은 정보를 확인해서

if문을 통해

(username === "admin" && password === "admin") 조건식을 만족하는 경우

window.loacation.href = "index.html"; 을 통해 로그인에 성공한 경우에만 index 파일로 넘어가게 구현했습니다.

그런데 아무래도 js 파일에 id와 패스워드를 저렇게 저장하면 개발자도구에서 노출이 될 텐데
조금 더 안전하게 저장할 수 있는 방법이 있을까요?

백엔드 영역인 것은 알고 있는데, 보안이 필요한 건 아니고 개인 목적이라 자바스크립트에서만 안 보이거나 저렇게 대놓고 id와 password가 노출이 되지 않으면 좋겠습니다.

지금 백엔드까지 배울 필요성은 없어서...

방법이 있을까요?



profile_image 익명 작성일 -

자바스크립트 난독화를 원하는 것 같습니다.

javaScript obfuscator 로 검색하면 웹에서 바로 사용할 수 있는 페이지들이 많이 뜨니, 여러 개를 사용해보시고 원하는 것을 사용 하면 될 것 같습니다.

간단하게 사용해본 예시 ( https://utf-8.jp/public/aaencode.html )

<input type="text" id="t_id"><br> <input type="password" id="t_pass"><br> <button _onclick="login()">login</button> <script> function login(){ t_id.value == "t" && t_pass.value =="12" ? window.location.href = "index.html" : alert("no"); } </script>

login부분 난독화

function login(){ ゚ω゚ノ= /`m´)ノ ~┻━┻ //*´∇`*/ ['_']; o=(゚ー゚) =_=3; c=(゚Θ゚) =(゚ー゚)-(゚ー゚); (゚Д゚) =(゚Θ゚)= (o^_^o)/ (o^_^o);(゚Д゚)={゚Θ゚: '_' ,゚ω゚ノ : ((゚ω゚ノ==3) +'_') [゚Θ゚] ,゚ー゚ノ :(゚ω゚ノ+ '_')[o^_^o -(゚Θ゚)] ,゚Д゚ノ:((゚ー゚==3) +'_')[゚ー゚] }; (゚Д゚) [゚Θ゚] =((゚ω゚ノ==3) +'_') [c^_^o];(゚Д゚) ['c'] = ((゚Д゚)+'_') [ (゚ー゚)+(゚ー゚)-(゚Θ゚) ];(゚Д゚) ['o'] = ((゚Д゚)+'_') [゚Θ゚];(゚o゚)=(゚Д゚) ['c']+(゚Д゚) ['o']+(゚ω゚ノ +'_')[゚Θ゚]+ ((゚ω゚ノ==3) +'_') [゚ー゚] + ((゚Д゚) +'_') [(゚ー゚)+(゚ー゚)]+ ((゚ー゚==3) +'_') [゚Θ゚]+((゚ー゚==3) +'_') [(゚ー゚) - (゚Θ゚)]+(゚Д゚) ['c']+((゚Д゚)+'_') [(゚ー゚)+(゚ー゚)]+ (゚Д゚) ['o']+((゚ー゚==3) +'_') [゚Θ゚];(゚Д゚) ['_'] =(o^_^o) [゚o゚] [゚o゚];(゚ε゚)=((゚ー゚==3) +'_') [゚Θ゚]+ (゚Д゚) .゚Д゚ノ+((゚Д゚)+'_') [(゚ー゚) + (゚ー゚)]+((゚ー゚==3) +'_') [o^_^o -゚Θ゚]+((゚ー゚==3) +'_') [゚Θ゚]+ (゚ω゚ノ +'_') [゚Θ゚]; (゚ー゚)+=(゚Θ゚); (゚Д゚)[゚ε゚]='\\'; (゚Д゚).゚Θ゚ノ=(゚Д゚+ ゚ー゚)[o^_^o -(゚Θ゚)];(o゚ー゚o)=(゚ω゚ノ +'_')[c^_^o];(゚Д゚) [゚o゚]='\"';(゚Д゚) ['_'] ( (゚Д゚) ['_'] (゚ε゚+(゚Д゚)[゚o゚]+ (゚Д゚)[゚ε゚]+(゚Θ゚)+ ((o^_^o) +(o^_^o))+ (゚ー゚)+ (゚Д゚)[゚ε゚]+(゚Θ゚)+ (o^_^o)+ ((゚ー゚) + (o^_^o))+ (゚Д゚)[゚ε゚]+(゚Θ゚)+ ((゚ー゚) + (゚Θ゚))+ (゚Θ゚)+ (゚Д゚)[゚ε゚]+(゚Θ゚)+ (゚ー゚)+ (゚ー゚)+ (゚Д゚)[゚ε゚]+((゚ー゚) + (゚Θ゚))+ ((o^_^o) +(o^_^o))+ (゚Д゚)[゚ε゚]+(゚Θ゚)+ ((o^_^o) +(o^_^o))+ ((o^_^o) +(o^_^o))+ (゚Д゚)[゚ε゚]+(゚Θ゚)+ (゚ー゚)+ (゚Θ゚)+ (゚Д゚)[゚ε゚]+(゚Θ゚)+ ((゚ー゚) + (゚Θ゚))+ (゚ー゚)+ (゚Д゚)[゚ε゚]+(゚Θ゚)+ ((o^_^o) +(o^_^o))+ ((゚ー゚) + (゚Θ゚))+ (゚Д゚)[゚ε゚]+(゚Θ゚)+ (゚ー゚)+ ((゚ー゚) + (゚Θ゚))+ (゚Д゚)[゚ε゚]+(゚ー゚)+ (c^_^o)+ (゚Д゚)[゚ε゚]+((゚ー゚) + (o^_^o))+ ((゚ー゚) + (゚Θ゚))+ (゚Д゚)[゚ε゚]+((゚ー゚) + (o^_^o))+ ((゚ー゚) + (゚Θ゚))+ (゚Д゚)[゚ε゚]+(゚ー゚)+ (c^_^o)+ (゚Д゚)[゚ε゚]+(゚ー゚)+ ((o^_^o) - (゚Θ゚))+ (゚Д゚)[゚ε゚]+(゚Θ゚)+ ((o^_^o) +(o^_^o))+ (゚ー゚)+ (゚Д゚)[゚ε゚]+(゚ー゚)+ ((o^_^o) - (゚Θ゚))+ (゚Д゚)[゚ε゚]+(゚ー゚)+ (c^_^o)+ (゚Д゚)[゚ε゚]+(゚ー゚)+ ((o^_^o) +(o^_^o))+ (゚Д゚)[゚ε゚]+(゚ー゚)+ ((o^_^o) +(o^_^o))+ (゚Д゚)[゚ε゚]+(゚ー゚)+ (c^_^o)+ (゚Д゚)[゚ε゚]+(゚Θ゚)+ ((o^_^o) +(o^_^o))+ (゚ー゚)+ (゚Д゚)[゚ε゚]+(゚Θ゚)+ (o^_^o)+ ((゚ー゚) + (o^_^o))+ (゚Д゚)[゚ε゚]+(゚Θ゚)+ ((o^_^o) +(o^_^o))+ (c^_^o)+ (゚Д゚)[゚ε゚]+(゚Θ゚)+ (゚ー゚)+ (゚Θ゚)+ (゚Д゚)[゚ε゚]+(゚Θ゚)+ ((o^_^o) +(o^_^o))+ (o^_^o)+ (゚Д゚)[゚ε゚]+(゚Θ゚)+ ((o^_^o) +(o^_^o))+ (o^_^o)+ (゚Д゚)[゚ε゚]+((゚ー゚) + (゚Θ゚))+ ((o^_^o) +(o^_^o))+ (゚Д゚)[゚ε゚]+(゚Θ゚)+ ((o^_^o) +(o^_^o))+ ((o^_^o) +(o^_^o))+ (゚Д゚)[゚ε゚]+(゚Θ゚)+ (゚ー゚)+ (゚Θ゚)+ (゚Д゚)[゚ε゚]+(゚Θ゚)+ ((゚ー゚) + (゚Θ゚))+ (゚ー゚)+ (゚Д゚)[゚ε゚]+(゚Θ゚)+ ((o^_^o) +(o^_^o))+ ((゚ー゚) + (゚Θ゚))+ (゚Д゚)[゚ε゚]+(゚Θ゚)+ (゚ー゚)+ ((゚ー゚) + (゚Θ゚))+ (゚Д゚)[゚ε゚]+(゚ー゚)+ (c^_^o)+ (゚Д゚)[゚ε゚]+((゚ー゚) + (o^_^o))+ ((゚ー゚) + (゚Θ゚))+ (゚Д゚)[゚ε゚]+((゚ー゚) + (o^_^o))+ ((゚ー゚) + (゚Θ゚))+ (゚Д゚)[゚ε゚]+(゚ー゚)+ ((o^_^o) - (゚Θ゚))+ (゚Д゚)[゚ε゚]+((o^_^o) +(o^_^o))+ (゚Θ゚)+ (゚Д゚)[゚ε゚]+((o^_^o) +(o^_^o))+ ((o^_^o) - (゚Θ゚))+ (゚Д゚)[゚ε゚]+(゚ー゚)+ ((o^_^o) - (゚Θ゚))+ (゚Д゚)[゚ε゚]+(゚ー゚)+ (c^_^o)+ (゚Д゚)[゚ε゚]+((゚ー゚) + (o^_^o))+ ((゚ー゚) + (o^_^o))+ (゚Д゚)[゚ε゚]+(゚ー゚)+ (c^_^o)+ (゚Д゚)[゚ε゚]+(゚Θ゚)+ ((o^_^o) +(o^_^o))+ ((゚ー゚) + (o^_^o))+ (゚Д゚)[゚ε゚]+(゚Θ゚)+ ((゚ー゚) + (゚Θ゚))+ (゚Θ゚)+ (゚Д゚)[゚ε゚]+(゚Θ゚)+ ((゚ー゚) + (゚Θ゚))+ ((o^_^o) +(o^_^o))+ (゚Д゚)[゚ε゚]+(゚Θ゚)+ (゚ー゚)+ (゚ー゚)+ (゚Д゚)[゚ε゚]+(゚Θ゚)+ ((゚ー゚) + (゚Θ゚))+ ((゚ー゚) + (o^_^o))+ (゚Д゚)[゚ε゚]+(゚Θ゚)+ ((o^_^o) +(o^_^o))+ ((゚ー゚) + (o^_^o))+ (゚Д゚)[゚ε゚]+((゚ー゚) + (゚Θ゚))+ ((o^_^o) +(o^_^o))+ (゚Д゚)[゚ε゚]+(゚Θ゚)+ ((゚ー゚) + (゚Θ゚))+ (゚ー゚)+ (゚Д゚)[゚ε゚]+(゚Θ゚)+ ((゚ー゚) + (゚Θ゚))+ ((゚ー゚) + (o^_^o))+ (゚Д゚)[゚ε゚]+(゚Θ゚)+ (゚ー゚)+ (o^_^o)+ (゚Д゚)[゚ε゚]+(゚Θ゚)+ (゚ー゚)+ (゚Θ゚)+ (゚Д゚)[゚ε゚]+(゚Θ゚)+ ((o^_^o) +(o^_^o))+ (゚ー゚)+ (゚Д゚)[゚ε゚]+(゚Θ゚)+ ((゚ー゚) + (゚Θ゚))+ (゚Θ゚)+ (゚Д゚)[゚ε゚]+(゚Θ゚)+ ((゚ー゚) + (゚Θ゚))+ ((゚ー゚) + (o^_^o))+ (゚Д゚)[゚ε゚]+(゚Θ゚)+ ((゚ー゚) + (゚Θ゚))+ ((o^_^o) +(o^_^o))+ (゚Д゚)[゚ε゚]+((゚ー゚) + (゚Θ゚))+ ((o^_^o) +(o^_^o))+ (゚Д゚)[゚ε゚]+(゚Θ゚)+ ((゚ー゚) + (゚Θ゚))+ (c^_^o)+ (゚Д゚)[゚ε゚]+(゚Θ゚)+ ((o^_^o) +(o^_^o))+ ((o^_^o) - (゚Θ゚))+ (゚Д゚)[゚ε゚]+(゚Θ゚)+ (゚ー゚)+ ((゚ー゚) + (゚Θ゚))+ (゚Д゚)[゚ε゚]+(゚Θ゚)+ (゚ー゚)+ ((o^_^o) +(o^_^o))+ (゚Д゚)[゚ε゚]+(゚ー゚)+ (c^_^o)+ (゚Д゚)[゚ε゚]+((゚ー゚) + (o^_^o))+ ((゚ー゚) + (゚Θ゚))+ (゚Д゚)[゚ε゚]+(゚ー゚)+ (c^_^o)+ (゚Д゚)[゚ε゚]+(゚ー゚)+ ((o^_^o) - (゚Θ゚))+ (゚Д゚)[゚ε゚]+(゚Θ゚)+ ((゚ー゚) + (゚Θ゚))+ (゚Θ゚)+ (゚Д゚)[゚ε゚]+(゚Θ゚)+ ((゚ー゚) + (゚Θ゚))+ ((o^_^o) +(o^_^o))+ (゚Д゚)[゚ε゚]+(゚Θ゚)+ (゚ー゚)+ (゚ー゚)+ (゚Д゚)[゚ε゚]+(゚Θ゚)+ (゚ー゚)+ ((゚ー゚) + (゚Θ゚))+ (゚Д゚)[゚ε゚]+(゚Θ゚)+ ((゚ー゚) + (o^_^o))+ (c^_^o)+ (゚Д゚)[゚ε゚]+((゚ー゚) + (゚Θ゚))+ ((o^_^o) +(o^_^o))+ (゚Д゚)[゚ε゚]+(゚Θ゚)+ ((゚ー゚) + (゚Θ゚))+ (c^_^o)+ (゚Д゚)[゚ε゚]+(゚Θ゚)+ ((o^_^o) +(o^_^o))+ (゚ー゚)+ (゚Д゚)[゚ε゚]+(゚Θ゚)+ ((゚ー゚) + (゚Θ゚))+ ((゚ー゚) + (゚Θ゚))+ (゚Д゚)[゚ε゚]+(゚Θ゚)+ ((゚ー゚) + (゚Θ゚))+ (゚ー゚)+ (゚Д゚)[゚ε゚]+(゚ー゚)+ ((o^_^o) - (゚Θ゚))+ (゚Д゚)[゚ε゚]+(゚ー゚)+ (c^_^o)+ (゚Д゚)[゚ε゚]+((゚ー゚) + (o^_^o))+ ((o^_^o) - (゚Θ゚))+ (゚Д゚)[゚ε゚]+(゚ー゚)+ (c^_^o)+ (゚Д゚)[゚ε゚]+(゚Θ゚)+ (゚ー゚)+ (゚Θ゚)+ (゚Д゚)[゚ε゚]+(゚Θ゚)+ ((゚ー゚) + (゚Θ゚))+ (゚ー゚)+ (゚Д゚)[゚ε゚]+(゚Θ゚)+ (゚ー゚)+ ((゚ー゚) + (゚Θ゚))+ (゚Д゚)[゚ε゚]+(゚Θ゚)+ ((o^_^o) +(o^_^o))+ ((o^_^o) - (゚Θ゚))+ (゚Д゚)[゚ε゚]+(゚Θ゚)+ ((o^_^o) +(o^_^o))+ (゚ー゚)+ (゚Д゚)[゚ε゚]+((゚ー゚) + (゚Θ゚))+ (c^_^o)+ (゚Д゚)[゚ε゚]+(゚ー゚)+ ((o^_^o) - (゚Θ゚))+ (゚Д゚)[゚ε゚]+(゚Θ゚)+ ((゚ー゚) + (゚Θ゚))+ ((o^_^o) +(o^_^o))+ (゚Д゚)[゚ε゚]+(゚Θ゚)+ ((゚ー゚) + (゚Θ゚))+ ((゚ー゚) + (o^_^o))+ (゚Д゚)[゚ε゚]+(゚ー゚)+ ((o^_^o) - (゚Θ゚))+ (゚Д゚)[゚ε゚]+((゚ー゚) + (゚Θ゚))+ (゚Θ゚)+ (゚Д゚)[゚ε゚]+((゚ー゚) + (o^_^o))+ (o^_^o)+ (゚Д゚)[゚o゚]) (゚Θ゚)) ('_'); }

결과

profile_image 익명 작성일 -

안전한 방법으로 사용자의 로그인 정보를 저장하는 것은 매우 중요합니다. JavaScript 코드 내에 평문으로 아이디와 비밀번호를 저장하는 것은 보안상 매우 취약합니다. 대신에 안전한 방법으로 사용자의 로그인 정보를 저장할 수 있는 몇 가지 방법이 있습니다.

1. **세션 스토리지 또는 로컬 스토리지**: 사용자의 브라우저에 내장된 웹 스토리지 기능을 활용하여 아이디와 비밀번호를 안전하게 저장할 수 있습니다. 아이디와 비밀번호를 암호화해서 저장하고, 필요할 때마다 복호화하여 사용할 수 있습니다.

```javascript

// 아이디와 비밀번호 암호화하여 저장

localStorage.setItem('username', encrypt(username));

localStorage.setItem('password', encrypt(password));

// 로그인 시 복호화하여 확인

if (decrypt(localStorage.getItem('username')) === 'admin' decrypt(localStorage.getItem('password')) === 'admin') {

// 성공적으로 로그인한 경우

}

```

2. **쿠키**: 서버 측에서 쿠키를 사용하여 사용자의 로그인 정보를 안전하게 저장할 수 있습니다. 쿠키는 브라우저에 저장되며, 서버 측에서만 접근 가능하도록 설정할 수 있습니다.

3. **패스워드 해싱**: 사용자의 비밀번호를 해싱하여 저장하면, 실제 비밀번호를 저장하지 않고 해시된 값만을 저장함으로써 보안을 높일 수 있습니다.

```javascript

// 비밀번호 해싱하여 저장

const hashedPassword = hash(password);

localStorage.setItem('password', hashedPassword);

// 로그인 시 해시된 비밀번호와 비교

if (verify(password, localStorage.getItem('password'))) {

// 성공적으로 로그인한 경우

}

```

이러한 방법들을 사용하여 사용자의 로그인 정보를 안전하게 저장할 수 있습니다. 보다 안전한 방법으로 정보를 저장하고, 사용자의 개인정보를 보호하는 것이 중요합니다.

profile_image 익명 작성일 -

++안녕하세요. 부족하지만 도움이되기를 바라며 답변드립니다. 참고해 주시면 감사하겠습니다.

자바스크립트에 암호를 저장하는 데에는 다음과 같은 몇 가지 방법이 있습니다.

암호화: 암호화 알고리즘을 사용하여 암호를 암호화한 다음 localStorage 또는 IndexedDB와 같은 브라우저 저장소에 저장합니다.

해시: 해시 함수를 사용하여 암호를 일방적으로 해시합니다. 해시는 암호화된 암호와 유사하지만 복호화할 수 없습니다.

HSTS(HTTP Strict Transport Security): HSTS 헤더를 사용하여 모든 연결을 HTTPS로 강제 적용하여 데이터를 암호화합니다.

CORS(Cross-Origin Resource Sharing): CORS 헤더를 사용하여 외부 소스에서 페이지에 액세스하지 못하도록 합니다.

감사합니다.

자바스크립트 소스보는방법

... 방법은 1. 메모장에 새로운 html파일 만들고 body에 자바스크립트로된 동영상 파일명과 와를 넣고 저장... 안녕하세요 보통 암호로 된 스크립트는 꼭 끝에...

동영상 주소 알수있는법

... 이해하는거랑 자바스크립트 이거 혼자서 공부할수 있는... 없도록 암호화해놓은 주소입니다. 이런 암호화해논... 동영상을 저장하는 방법을 사용하면됩니다. 6. 만약 주소를...

html encoding에 대해서 알고 싶습니다.

... 저장하고 인터넷 창으로 열어보면 Pler라는 문자열이 나온다는 것을 알고 있습니다. 이런 암호를 html... Char Code 변환하는 자바스크립트 방법은 아래와...

xp를 새로깔았는데 wuv3is.dll을...

... 다음의 방법을 순서대로 시행해보자. 1.... 페이지의 자바 스크립트에 오류가 있을 때 나타나는데, 이... 자 암호를 입력 3. 확인 버튼을 누르면 '내용 관리자가...

HTML 웹페이지 만들고 있는데

... 입력하고 저장하기 누르면 로그인 성공 이라고 팝업창... 올바른 아이디와 암호를 가지고 있는 주체가 누가 되어야 할지가 문제입니다. 자바스크립트로 구현한다고 하면...

홈페이지에 비밀번호거는것에대한...

... com"; } else{ alert("암호도 모르면서 입장하려 하시다니 이 뻔뻔한 사람! ^^;; "); f.pass.focus(); } } 저장 - 파일... js 는 자바 스크립트 파일의 형식(확장자)입니다

고1 컴공 소프트웨어학과 선택과목

... 공부방법도 알려주세용 (사이트보다는 답변으로... -데이터베이스 변경사항 발생 시 기존 기록을 저장하고... HTML,CSS,자바스크립트가 중요한 역할을 합니다. -백엔드...