암호화

 

1. 프론트 엔드에서 암호화

// SignUp.vue

signUp(){
	const hashedPw = CryptoJS.SHA256(this.user.password).toString();
	// hashedPw = a665a45920422f9d417e4867efdc4fb8a04a1f3fff1fa07e998e86f7f7a27ae3

        this.$http.post(`/api/user/signUp`, {
          user: {
            userName: this.user.username,
            userID: this.user.userid,
            password: hashedPw,
          }
        })
        .then((res) => {
          if(res.data.success){  
            alert("회원가입이 정상적으로 완료되었습니다.")
          }else{
            alert("회원가입에 실패하였습니다.")
          }
        })
        .catch(function (error) {
        })

 }

처음에는 이렇게 암호화를 해서 서버로 비밀번호를 보냈다. 암호화된 값을 보내면 해커가 중간에 탈취를 해도 상관없다고 생각했는데, 이게 왠걸… 해시 크래커 사이트(https://crackstation.net/)에서 해시를 크랙하니 비밀번호를 바로 확인 할 수 있었다.. 두둥탁

그래서 key를 이용해서 암호화하는 방법으로 변경했다. 나는 환경변수파일(.env)파일에 key값을 따로 보관하고 회원가입이나 로그인 시에 key(VUE_APP_KEY)를 이용해서 암호화를 한다음 서버로 데이터를 보내주었다.

• 참고로 Vue.js에서는 process.env 객체를 사용할 때, 위치를 명시해주지 않아도 된다;)  .env파일에서 변수명 앞에  VUE_APP_ 를 붙여주면 Vue CLI에서 이 변수를 process.env 객체의 속성으로 자동으로 추가시켜주기때문에  원하는 페이지에서 process.env 객체를 호출해서 사용하면 된다.

// .env 파일
VUE_APP_KEY = "aa0c420700179a6783af1e"

// SignUp.vue

signUp(){
	const hmac = CryptoJS.HmacSHA256(this.user.password, process.env.VUE_APP_KEY);
	const hmacString = hmac.toString(CryptoJS.enc.Hex);
        // hmacString = a665a45920422f9d417e4867efdc4fb8a04a1f3fff1fa07e998e86f7f7a27ae3

        this.$http.post(`/api/user/signUp`, {
          user: {
            userName: this.user.username,
            userID: this.user.userid,
            password: hmacString,
          }
        })
        .then((res) => {
          if(res.data.success){  
            alert("회원가입이 정상적으로 완료되었습니다.")
          }else{
            alert("회원가입에 실패하였습니다.")
          }
        })
        .catch(function (error) {
        })

 }