Peep

프론트에서 안전하게 로그인 처리하기

보안에 위협이 되는 문제

1. XSS (Cross Site Scriptiong)

공격자가 <input>태그나 url등에 Javascript를 삽입해 실행되도록 공격한다.

악성데이터를 실행하거나 사이트의 전역 변수를 이용해 API 요청을 하여 사이트의 로직인 척 행동하여 악의적인 행동을 한다.

2. CSRF (Cross Site Request Forgery)

서버에서 클라이언트 도메인을 통제하고 있지 않으면 공격자가 다른 사이트에서 API 요청을 할 수 있다.

이때 공격자가 사용자만이 가능한 행위(수정, 삭제, 등록 등)들을 할 수 있다.

(이러한 행위로인해 최악의 상황 -> 비밀번호, 송금 등에 접근)

원본 글 요약

• JWT(JSON Web Token)로 유저 인증
• Refresh Token은 httpOnly
• Access Token은 JSON payload
• Access Token은 지역변수로 저장
• 새로고침이나 브라우저 종료 후 재접속(mount) 처리, 각각의 API 이용 
  • 최초 접근 API
  • 재 접근 API
• 재 접근 시 Refresh Token과 Access Token을 새로 발급 받을 수 있도록 한다.
• CSRF, XSS 공격에서 다소 안전하나 XSS는 어떤식으로든 취약점이 생길 수 있어 서버에서도 같이 처리 필요

Access Token, Refresh Token이란?

• OAuth(Open Auth)에서 나온 개념이며 두개를 묶어 사용자 토큰이라고 부른다.
• Access Token은 보안상 짧은 유효기간, Refresh Token은 긴 유효기간을 가지고 있다.
• Access Token이 만료되면 Refresh Token을 통해 Access Token을 갱신한다.
• 왜 두개가 필요한지에 대해서는 Stack overflow 글 참고 하면 되고 참고 링크에서도 확인가능하다.
• 보안상 두가지를 사용하는 것으로 이해하면된다.

-참고 https://dreamaz.tistory.com/22

보안관련 작업을 해본적도 관심도 없었던 나에게 보안에 얕게나마 관심을 가지게해주는 좋은 글이었다.

원본 글

https://velog.io/@yaytomato/%ED%94%84%EB%A1%A0%ED%8A%B8%EC%97%90%EC%84%9C-%EC%95%88%EC%A0%84%ED%95%98%EA%B2%8C-%EB%A1%9C%EA%B7%B8%EC%9D%B8-%EC%B2%98%EB%A6%AC%ED%95%98%EA%B8%B0

성착취 방지 기법 소개

• 안전한 서비스 이용에 대한 사용자 가이드 마련
• 사용자에게 업로드 기능이 있을 경우 신고 및 제재 조치 마련
  • 다운로드 방지 및 스크린 캡처 차단등을 제공
• 공유 기능이 있을 경우 해시 값등을 활용해 공유되는 게시물에 대한 문제 대처 시스템 마련
• 메시지, 통화, 영상통화, 대화등이 가능한 경우 즉각 대응할 수 있는 신고, 내용 저장등을 마련
• 사용자 차단, 허용되지 않은 사용자로부터 수신 거부 설정 및 메세지 차단에 대한 시스템 마련
  • 보안 강화 (URL, .apk, .dmg등 확장자가 포함된 메세지 차단)
• '비공개' 또는 공개 값을 '최소화'로하며 사용자가 직접 공개 범위를 설정하도록 제공
  • '전체공개'시 주의사항 명시

성착취관련해서 보안적으로 처리해야하는 부분에대해 쉽고 간략하게 설명해주는 유익한 글이었습니다.

저는 맥을 안써봐서 .dmg 확장자 파일에대해 처음 알게되었습니다.

맥 전용 프로그램 확장자이며 파일을 실행시키면 마운팅되고 안에 데이터들을 설치하는 파일이라고합니다.

쉽게 말하면 .exe 파일과 같은 압축된 패키지 파일입니다.

압축 패키지파일로 보안위협이 많기 때문에 주의해야합니다.

"가장 위험한 맥용 멀웨어 슐레이어, 최신 버전 등장해" 보안뉴스 바로가기

원본

https://teen-it.kr/for-service

페이지를 꾸미기 전에 플러그인을 설치를 해보도록 하겠습니다.

테마는 집 전체 구조라 생각하면 플러그인은 가구라고 생각하면 됩니다.

슬라이드 플러그인, 사이드 메뉴 플러그인 등등..

[플러그인 > 새로추가]

추천, 인기, 추천됨, 즐겨찾기에서 플러그인 확인 및 다운로드 받을 수 있고 

키워드 검색을 통해 다운받을 수 있습니다.

1. WPS Hide Login

관리자 페이지 접속할때

www.okayoon.com/wp-admin으로 들어오는데, 

이게 보안에 안좋다고 합니다. 

다 똑같은 wp-admin 이기 때문에 일반 사용자도 관리자 로그인 페이지 접근이 수월하다는거죠.

이것 만으로도 보안에 문제가 있기 때문에 일단 저 부분을 수정하는 플러그인을 다운 받겠습니다.

검색창에 WPS Hide Login 검색

지금설치 후 활성화

활성화를 누르면 플러그인 > 설치된 플러그인으로 페이지가 이동됩니다.

그리구 WPS Hide Login 플러그인이 활성화되어 있는 모습이 확인 가능 합니다.

Setting 클릭

클릭 시 설정>일반으로 이동 됩니다.

(설정>일반에서 수정 가능)

WPS Hide Login 영역이 추가 되었고 설정하는 부분이 생겼습니다!

Login Url : wp-admin 대신 어떤 경로로 로그인 페이지를 접근할지

Redirection Url : 잘못된 url로 접근 시 어떤 경로로 보낼지

저는 테스트를 위해 hello로 설정하겠습니다. 

*현재는 변경했습니다.

이제 로그인 페이지는 

www.okayoon.com/hello 로 접근 가능합니다.

www.okayoon.com/wp-admin으로 접속하면 

www.okayoon.com/404로 이동되며 페이지가 없음을 알립니다.

https://okayoon.tistory.com/entry/fingerprintjs-%EB%B8%8C%EB%9D%BC%EC%9A%B0%EC%A0%80-%EC%A7%80%EB%AC%B8

<script type="text/javascript" src="/public/javascripts/jquery.min.js"></script>

// 브라우저 분기
<!--[if !IE ]> -->
<script type="text/javascript" src="/public/javascripts/lib/fingerprint2.js"></script>
<!-- <![endif]-->
<!--[if gt IE 8]>
<script type="text/javascript" src="/public/javascripts/lib/fingerprint2.js"></script>
<![endif]-->

<script>
  // fingerprint2.js
  (function() {
    var $input = $('#fingerPrintKey');
    if($input.length < 1) return false;

    // 브라우저 분기2 (ie8 이하일때 지원 불가 예외 처리...)
    (브라우저 ie이면) ? $input.parent().hide() : getFingerPrintCode();

    function getFingerPrintCode(){
      var fingerPrint = new Fingerprint2();
      
      fingerPrint.get(function (code) {
      	$input.val(code);
      })
    }
  })();
</script>

+ 이슈 추가

IE11에서 듀얼모니터일 경우 2번 모니터로 볼 경우 주 모니터(1번 모니터)의 값만 받아오는 현상.

fringerprint2.js에서 해상도를 어떻게 가져오는지를 먼저 파악하기위해 js파일의 라인428에 있는 getScreenResolution 메서드를 확인해봤는데, window.screen을 통해 모니터의 해상도를 구하고 있었다.

이것을 토대로 검색을 해본 결과 IE11 브라우저 버그인 것 같다.

IE11에서는 주 모니터의 옵션만 가져오는 것으로 보인다.

window.screen 테스트

크롬, 엣지

1번 모니터

2번 모니터

각각 다른 widtn, height값을 확인할 수 있다.

IE11

1번 모니터

2번 모니터

동일한 값을 확인할 수 있고, 이 값이 주모니터의 값이란 것을 확인할 수 있다.