본문 바로가기

FE54

token, XSS, CSRF 이번 글은 로그인 관련 작업하면서 알게 된 보안 관련 내용 정리다. 토큰으로 이루어진 로그인, 이를 가로채려는 해커의 노련함 등 로그인을 이룰 때 단순하게 생각하지 말 것을 기억하게 하는 문서인 셈이다. token 토큰은 크게 접근 토큰, 보안 토큰, 세션 토큰 등으로 분류한다. 이중 로그인에서 보는 접근 토근이 가장 많이 사용된다. 간략히 어떤 특정 기능이나 데이터에 접근하는 대상에게 권한을 부여하는 데 사용된다. 접근 토큰을 많이 볼 수 있는 것은 JWT(JSON Web Token)다. JWT(https://jwt.io)는 유저 정보를 담은 객체를 문자열로 만들어 암호화한 후 암호화된 키를 브라우저에 주는 형식으로 사용한다. 받아온 암호화된 키는 브라우저 저장소에 저장했다가 유저 정보가 필요한 API.. 2022. 10. 25.
Shallow Routing 리액트와 같은 싱글 페이지 어플리케이션은 전체 페이지를 업로드 후 특정 부분을 돌아다니며 보여주는 개념이다. 이때 새로고침 화면도 바뀌지만, 주소도 바뀌어야 사용자가 덜 헷갈릴 수 있다. 이를 돕는 게 shallow routing이다. 리액트의 프레임워크격인 Next.js에서 useRouter로 해당 기능을 지원한다. import { useRouter } from "next/router"; export default function RouterPage(){ const onClickToPage = () => { router.push(url, as, option) } return( 안녕하세요 )} 안녕하세요 버튼을 누르면 특정 페이지로 이동하게 한 코드다. 여기서 onClickToPage를 router.pu.. 2022. 10. 25.
Browser’s Rendering Process 어떤 브라우저를 쓰든 UX/UI 취향의 문제로만 치부하고 있다면, 아직도 개발자가 아니다. 브라우저에서 화면을 그리는 방식은 브라우저마다 다르기 때문이다. 웹 프론트를 만든다면 꼭 인식하고 있어야할 게 브라우저 렌더링 프로세스다. 그나마 HTML5에서는 이론으로나마 렌더링 방법을 표준화했다. 이과정을 Critical Rendering Path로도 부른다. 물론, 표준화 채택여부는 각 브라우저에게 있다. 웹페이지 표현 순서 1. 사용자가 주소를 입력하면 브라우저는 DNS 서버로 접속해 IP주소를 찾아온다. 2. 웹페이지를 그리기 위한 자료를 해당 서버에 요청한다. 3. 서버는 요청 확인 후 브라우저에게 웹페이지 자료를 전송한다. 4. 브라우저는 해당 IP주소로 부터 밭은 웹페이지 정보를 조립해 보여준다. .. 2022. 10. 24.
LazyLoad & PreLoad 웹을 최적화 하는데는 여러가지 방법이 있다. 이번엔 그 여러 방법중 LazyLoad와 PreLoad를 정리해둔다. 두 친구는 말 그대로 늦게 불러오기와 미리 불러오기다. 웹을 화면에 로딩할 때 느린게, 좋을까 빠른게 좋을까? 당연히 후자다. 질문의 수준이 떨어진다고 뭐라해도 무방할 정도다. LazyLoad와 PreLoad는 이 당연한 것을 돕는다. LazyLoad 특정 페이지에 들어갈 때 이미지가 많다고 다 업로드할 때까지 페이지가 안뜬다면 어떨까? 매우 답답해하며 바로 뒤로가기를 누른다. 필자가 자주그랬다. 뜨는걸 기다리는 게 해당 콘텐츠를 보기 원하는 마음보다 더 크게 다가왔기 때문이다. 이때 필요한 게 LazyLoad다. LazyLoad는 한번에 다 받아오지 않고 필요한 콘텐츠를 그때그때 받아 띄운.. 2022. 10. 24.
권한 분기 권한 분기. 표현 자체는 엄청 딱딱하고 어려운 듯보인다. 실상은 우리가 매일 마주하는 친구다. 어디 들어갈 때마다 로그인하라고 경고하는 그것들. 그게 모두 권한 분기다. 권한 분기의 대표가 방금 말했듯 로그인 여부에 따라 페이지 공개여부를 결정하는 거다. 지난 번 HOF와 HOC를 정리하면서 예시로 들었던 게 바로 권한 분기였다. 권한 분기를 찾아보니 생각보다 권한 분기가 많았다. 로그인은 물론, 우리가 네이버카페나 다음카페서 자주 본 등급별 게시판도 권한 분기다. 목적에 따라, 신분에 따라 접근 권한을 제어하는 모든 게 권한 분기다. 쇼핑몰의 판매자용 사이트, 배달의 민족의 사장님 전용 앱 등 같은 서버를 두고 다른 사이트가 존재하는 것도 권한 분기다. 일반인의 입장에서 '관계자외 출입금지'가 개발자에.. 2022. 10. 23.

티스토리툴바