개발일지

XSS란?

Cross site scripting의 약자로 원래 css라고 부르는 것이 맞지만 우리가 아는 Cascading style sheets(Css)때문에 Xss로 불리게 되었다.

xss는 웹메일이나 게시판등에 자바스크립트와 같은 스크립트 파일을 해커가 삽입하여 다른 유저에게 피해를 끼치는 것을 뜻한다.

예를 들어 우리가 만든 게시판이 있을때 한사용자 A가 게시판에서 글을 작성하여 서버는 이를 받아 DB에 저장하였다고 치자.

그러고 다른 사용자 B가 A의 글을 읽었을때 해커가 미리 심어둔 xss공격으로 게시판 글에 다른 스크립트 파일이 들어가 있어 사용자 B는 해커가 심어둔 스크립트 파일이 실행 되게된다.

발생 할 수 있는 피해

1. 쿠키 정보 및 세션 ID획득
   해커가 만약 스크립트 파일에 해커 본인의 url로 쿠기값을 보내는 코드를 삽입했으면 쿠기값이 해커에게 날라가고 그 안에 만약 세션Id값이 들어가 있을 경우 세션 Id마저 털리게 된다 😱
2. 악성 코드 다운로드
   xss자체로는 프로그램을 다운 할 수 없지만, 만약 해커가 프로그램을 다운 할 수 있는 url을 스크립트 파일로 걸어 놓았다면...?
3. 거짓 페이지 노출
   사이트와 전혀 상관없는 페이지를 노출 시킬 수 있다.

해결방법

◆ 입력 값 치환
XSS 공격은 기본적으로 <script> 태그를 사용하기 때문에 XSS 공격을 차단하기 위해 태그 문자(<, >) 등 위험한 문자 입력 시 문자 참조(HTML entity)로 필터링하고, 서버에서 브라우저로 전송 시 문자를 인코딩하는 것이다. HTML 문자 참조란 ASCII 문자를 동일한 의미의 HTML 문자로 변경하는 과정이다. 예를 들어, 문자 “<”는 동일한 의미의 HTML “&lt;” 로 변경한다. HTML 엔터티는 대부분의 인터프리터(특히, 브라우저)에서 특수한 의미를 가지지 않으며, 단순한 문자로 처리된다. 이렇게 인코딩하면 사용자는 <script>가 <script>로 보이지만 HTML 문서에서는 &lt;script&gt; 로 나타나서 브라우저에서 일반 문자로 인식하고 스크립트로 해석되어 실행되지는 않는다.

스크립트란? : 스크립트는 보통 인간 운영자에 의해 행하여질 수 있는 일련의 작업의 자동화이다

-->  요약 : 정규식을 이용한 파라미터 값 필터링 (방어력 Level 1~10에서 3정도..?)

◆ 보안 라이브러리 사용

역시 젤 편한 방법으로는 만들어진 라이브러리를 갖다가 사용하는것이다👍(그것도 대기업에서 만들어진 보안 라이브러리를...!)

대표적인 것으로는 OWASP Antisamy이나 NAVER Lucy XSS Filter, ESAPI 등이 있다!!

참고자료 

http://blog.plura.io/?p=7614 

https://www.youtube.com/watch?v=LfI6TAchgT4&list=PLDV-cCQnUlIbH2r12z_ZE2xAChDw3nASv&index=10 

리액트 컴포넌트

먼저 리액트 컴포넌트란 웹어플리케이션, 웹페이지에서 독립적이고 재사용이 가능한 단위로(박스 단위로) 나뉘어진 블럭을 말한다. (최대한 독립적이고 재사용이 가능한 작은 단위로 만들어 나가면 👍) 

따른 이야기로 잠깐 새자면 집을 설계할때 리액트는 서버에서 노드js처럼 하나의 블럭들을 본인 입맛대로 처음부터 뼈대를 잡아갈수 있다. 이와 반대로 프론트에서 엥귤러와 서버에서의 대표적인 스프링의 경우 집을 설계할때 기초적인 뼈대를 제공받고 그 뼈대에 맞게 하나하나씩 본인이 살을 붙히면 된다 (내 생각에는 스프링,엥귤러는 처음에 지켜야할 룰이나 배워야할 기초적인 것들이 많아 프로그래밍을 입문할때에는 많은 사람들이 벅차하는 것 같고 노드와 리액트의 경우 시작은 간단하지만 대규모 프로젝트같은 경우 지켜야할 룰이나 다른사람의 코드를 읽기 어렵다는 단점이 있어 이를 보완하기 위해 여러 디자인 패턴이나 컴포넌트를 최대한 독립적이고 간단하게 만드는것같다)

다시 리액트 컴포넌트로 돌아와 리액트 라이브러리를 이용해서 컴포넌트를 만들 수 있는 방법은 클래스형, 함수형 두가지가 있다.

클래스형  컴포넌트

먼저 클래스형 컴포넌트의 경우 리액트에서 제공하는 React.Component 클래스를 상속하는 클래스를 만들어 UI가 어떻게 표기 될것인지 정의하는 redner()함수를 구현해야한다. 

컴포넌트 안에서 기억되야 하는 상태들을 관리해주기 위해 this.state를 사용하며 this.state의 값이 변경되면 해당 컴포넌트가 리랜더링이 발생한다. 

함수형  컴포넌트

함수형 컴포넌트는 클래스형 컴포넌트 처럼 componet를 상속받지 않아도 사용이 가능하고 컴포넌트 안에서 기억되야 하는 상태관리를 위해 useState함수를 이용하게 된다. 

클래스형 컴포넌트는 함수형 컴포넌트에 비해 단점들이 있는데 

1. 코드가 길고 복잡하다.
   constructor, this, binding 등 지켜야 할 규칙이 많아서 코드가 복잡하고 길어진다. 클래스 자체가 Life Cycle method로 인해 기본적으로 사이즈가 있다.
2. Logic의 재사용이 어렵다.
   클래스형 컴포넌트에서는 High-Order Components(HOC)로 컴포넌트 자체를 재사용 할 수는 있지만 부분적인 DOM 관련 처리나 API사용 및 state을 다루는 등의 logic에 있어서는 경우에 따라 같은 로직을 2개 이상의 Life Cycle method에 중복해서 넣어야하는 등 재사용에 제약이 따른다.
   이에 반해 hooks를 활용한 함수형 컴포넌트에서는 원하는 기능을 함수로 만든 후(hook) 필요한 곳에 훅 집어 넣어주기만 하면 되기 때문에 로직의 재사용이 수월해진다.

리액트훅(Hook)

함수형 컴포넌트에 리액트의 다른 기능들을 갈고리처럼 연결해주는것을 뜻함.

함수형 컴포넌트에 비해 가지는 이러한 단점들에도 불과하고, 그동안 클래스형 컴포넌트를 사용했던 이유는 위에서 언급했듯이 state관리와 Life cycle method의 사용때문이였다.

하지만 리액트 훅에서 state를 관리할 수 있는 useState함수와 리액트 컴포넌트 생명주기(Life cycle)를 관리할 수 있는 useEffect함수의 등장으로 기존 클래스형 컴포넌트의 단점들을 보완한 어쩌면 상위호환 버전인 함수형 컴포넌트가 많은 사람들에게 각광을 받게 된다.

그럼 다음 포스트에서는 useState함수와 useEffect함수에 대해 알아보겠다.

쿠키와 세션을 사용하는 이유

(cookie는 클라이언트에 정보를 저장하는 기술, session은 서버에 정보를 저장하는 기술이다.)

• http 프로토콜의 취약점을 해결해 주기위해서 사용한다 
• HTTP 프로토콜 환경에서 서버는 클라이언트가 누구인지 확인해야한다 그 이유는 HTTP 프로토콜이 connectionless, stateless한 특성이 있기 때문이다. 
  
  • connectionless(비연결 지향) : 클라이언트가 서버로 부터 데이터를 요청한 후 데이터가 성공적으로 응답이 되면 연결을 바로 끊어 버리는 형식 
  • stateless(상태없음) : 통신이 끝나면 상태를 유지하지 않는 특성(상태 정보를 유지시키지 않음

http프로토콜의 이런 취약점을 해결 하기위해  쿠키와 세션을 사용하는 것이다!

1. 사용자 정보를 기억하기 위해
2. 클라이언트에서 서버로 인증하기 위한 절차 반복을 줄이기 위해

그렇다면 쿠키와 세션이란 무엇일까?

쿠키 

• 쿠키는 클라이언트 로컬(local)에 저장되는 키와 값(key, value)이 들어있는 작은 데이터 파일이다.
• 쿠키는 클라이언트의 상태 정보를 로컬에 저장했다가 참조한다.
• 만료 날짜/시간을 지정하지 않으면, '메모리에 있는 동안' 계속 유효하다고 판단하도록 세션 쿠키에 저장되고, 만료 날짜/시간을 지정하면 프로세스가 종료되더라도 특정 만료날짜/시간까지 유효하므로 지속 쿠키에 저장된다.지속 쿠키는 파일로 저장되므로 브라우저가 종료되어도 쿠키는 남아있게 된다.
• 세션 쿠키는 브라우저 메모리에 저장되므로 브라우저가 종료되면 쿠키는 사라지게 된다.

쿠키의 구성요소

• 이름(name) : 각각의 쿠키를 구별하는 데 사용되는 이름
• 값(values) : 쿠키의 이름과 관련된 값
• 유효시간(expires) : 쿠키의 유지시간
• 도메인(domain) : 쿠키를 전송할 도메인
• 경로 (path): 쿠키를 전송할 요청 경로

쿠키의 동작 방식

• 클라이언트가 페이지를 요청
• 서버에서 쿠키를 생성
• HTTP 헤더에 쿠키를 포함 시켜 응답
• 브라우저가 종료되어도 쿠키 만료 기간이 있다면 클라이언트에서 보관하고 있음
• 같은 요청을 할 경우 HTTP 헤더에 쿠키를 함께 보냄
• 서버에서 쿠키를 읽어 이전 상태 정보를 변경 할 필요가 있을 때 쿠키를 업데이트 하여 변경된 쿠키를 HTTP 헤더에 포함시켜 응답

쿠키 사용예시

• 방문 사이트에서 로그인 시, "아이디와 비밀번호를 저장하시겠습니까?"
• 쇼핑몰의 장바구니 기능
• 팝업에서 "오늘 더 이상 이 창을 보지 않음" 체크

세션

• 세션은 쿠키를 기반하고 있지만, 사용자 정보 파일을 브라우저에 저장하는 쿠키와 달리 세션은 서버 측에서 관리한다(클라이언트에게 세션 ID발급해서 클라이언트는 쿠키로 저장 이 때문에 쿠키를 기반한 방식이라함)
• 사용자의 대한 정보를 서버에 두기 때문에 쿠키 방식보다 보안에 더 장점이 있으나 사용자가 늘어날수록 서버 메모리의 큰 부담을 줘 성능 저하를 일으킬 수 있다.
  (추가 8.3) 사용자의 대한 정보를 메모리 > 하드디스크 > db(빨리 가져올 수 있는 순서)에 골라서 저장할 수 있다 
  메모리에 저장하는 경우 휘발성인 메모리의 특성상 서버가 꺼지면 사용자의 정보가 전부 사라진다
  그래서 레디스같은 메모리형 데이터베이스에 저장시키는데 이마저도 서버 에러가 발생하면 데이터가 전부 날라가는 문제점이있다!

• 위의 이유로 서버를 여러대 두고 사용 세션방식을 이용 할 수 있으나 이 방법 또한 문제가 있다. 서버가 예를 들어 A,B,C가 있을시에 클라이언트가 처음 세션ID를 A라는 서버에서 발급받고 B라는 서버에 요청을 보내게 되면 B서버에서는 A서버에서 발급해준 세션ID를 알 지 못함으로 적절한 응답을 해줄 수 없다.

세션 동작 방식

• 클라이언트가 서버에 접속 시 세션 ID를 발급 받는다.
• 클라이언트는 세션 ID에 대해 쿠키를 사용해서 저장하고 가지고 있다.
• 클라리언트는 서버에 요청할 때, 이 쿠키의 세션 ID를 서버에 전달해서 사용함
• 서버는 세션 ID를 전달 받아서 별다른 작업없이 세션 ID로 세션에 있는 클라언트 정보를 가져온다.
• 클라이언트 정보를 가지고 서버 요청을 처리하여 클라이언트에게 응답함

쿠키와 세션의  차이점

• 저장 위치
  • 쿠키는 클라이언트(브라우저)에 메모리 또는 파일에 저장하고, 세션은 서버 메모리에 저장된다.
• 보안
  • 쿠키는 클라이언트 로컬(local)에 저장되기도 하고 특히 파일로 저장되는 경우 탈취, 변조될 위험이 있고, Request/Response에서 스나이핑 당할 위험이 있어 보안이 비교적 취약하다. 반대로 Session은 클라이언트 정보 자체는 서버에 저장되어 있으므로 비교적 안전하다.
• 라이프 사이클
  • 쿠키는 앞서 설명한 지속 쿠키의 경우에 브라우저를 종료하더라도 저장되어 있을 수 있는 반면에 세션은 서버에서 만료시간/날짜를 정해서 지워버릴 수 있기도 하고 세션 쿠키에 세션 아이디를 정한 경우, 브라우저 종료시 세션아이디가 날아갈 수 있다.
• 속도
  • 쿠키에 정보가 있기 때문에 쿠키에 정보가 있기 때문에 서버에 요청시 헤더를 바로 참조하면 되므로 속도에서 유리하지만, 세션은 제공받은 세션아이디(Key)를 이용해서 서버에서 다시 데이터를 참조해야하므로 속도가 비교적 느릴 수 있다.

세션/쿠키 인증 방식

(장점)

세션/쿠키 방식은 기본적으로 쿠키를 매개로 인증을 거치며 여기서 쿠키는 세션 저장소에 담긴 유저 정보를 얻기 위한 열쇠라고 생각하면 된다. 따라서 쿠키가 담긴 http요청이 도중에 노출이 되더라도 쿠키 자체(세션ID)는 유의미한 값을 가지고 있지 않아 보안이 쿠키만을 사용한 방식보단 훨씬 좋다. 또한 사용자 A,B가 있을때 고유의 ID값을 각각 받아 서버에서 사용자의 요청이 들어와도 일일이 회원 정보를 확인 하지 않고 어떤 회원인지를 바로 확인 할 수 있어 서버 자원에 접근이 용이하다.

추가 : 해커에게 세션 id를 털리거나 id변질시 해당 세션을 삭제 할 수 있음!!!!

(단점)

장점에서 쿠키를 탈취당하더라도 안전 할수 있다고 했지만 해커가 쿠키를 훔쳐 http요청을 보내면 서버의 세션 저장소에서는 사용자라고 판단하여 정보를 뿌려주게 된다.(세션 하이재킹 공격이라고 부름)

또한 앞서 정리한 성능 문제 및 서버를 여러대로 분산시킬 시에 발생하는 문제 등이있다.

이러한 쿠키/세션 방식을 해결하기 위한 방법으로 jwt가 등장했다..

(사실 여기까지의 글은 jwt글을 쓰기위한 빌드업 이였다....)

참고사이트 

출저 : https://tansfil.tistory.com/58?category=475681 

https://interconnection.tistory.com/74

https://jeong-pro.tistory.com/80

🏀  문제

합격 😀 (내가 풀이한 코드)

function solution(N, stages) {
  let answer = [];
  let count = 0;
  let total = stages.length;
  let box = [];
  // 스테이지
  for (let i = 1; i <= N; i++) {
    // 현재 스테이지에 멈춰 있는 사람을 구하기 위해 stages배열 순회
    for (let x = 0; x < stages.length; x++) {
      if (i === stages[x]) {
        count += 1;
      }
    }
    box.push({ stage: i, lost: count / total });
    total = total - count;
    count = 0;
  }
  box = box.sort((a, b) => {
    if (b.lost === a.lost) {
      return a.stage - b.stage;
    } else {
      return b.lost - a.lost;
    }
  });
  for (let i = 0; i < box.length; i++) {
    answer.push(box[i].stage);
  }
  return answer;
}
console.log(solution(5, [2, 1, 2, 6, 2, 4, 3, 3]));

먼저 스테이지의 갯수 N만큼 스테이지 도전자들의 배열을 확인해 주기위해 for문으로 최상단을 감싸주었다.

그 다음 현재 스테이지 N을 클리어 하지못하고 멈춰잇는 사람들이 몇명이나 있나를 구해주기위해 stages의 배열을 순회 해주었고 클리어 하지 못한 사람이 있으면 count의 갯수를 늘려주었다.

그 다음 임시 저장소인 box 배열에 객체형태로 현재의 스테이지와 실패율을 계산하여 push해주었다.

그렇게 for문이 모두 돌아가고 나면 box변수에는 모든 스테이지마다 클리어하지 못한 사람들이 정렬 되지 않은 형태로 들어가게 된다.

이제 조건에 맞추어 먼저 실패율의 key값인 lost를 sort정렬로 오름차순 정렬을 해준다 여기서 실패율의 크기가 같을 시에는 스테이지가 더 낮은 쪽이 앞에 와야한다는 조건을 맞춰 주기위해 stage내림차순으로 정렬해준다.

이제 조건에 만족하는 box의 형태가 나오고 객체의 형태인 box값에서 현재 필요한 stage순서만을 추출해주기위해 for문으로 값을 추출해 answers넣어준다!!!

문제를 풀고 난 후..

• 이게 LEVEL1문제라늬... 도대체 LEVEL3정도 까지 풀라면 얼마나 더 열심히 해야할지 가늠이 안된다..
• 문제를 풀면서 느낀점인데 문제를 읽고 모든걸 다 이해해서 코드를 짜는 방식보단 어느정도 이해를 바탕으로 코드를 짜면서 틀린 부분을 수정하고 콘솔로그를 찍어보면서 조금씩 수정해 나가는 방식이 나랑 더 잘맞는것 같다.. (한번에 다 이해 못하고 푸는것도 있다...)

📌 문제  풀러가기 => https://programmers.co.kr/learn/courses/30/lessons/42889?language=javascript

🏀  문제

불합격 😥 (내가 풀이한 코드)

function solution(s) {
  let answer = "";
  let box = s.split("");
  const number = [
    { name: 0, value: "zero" },
    { name: 1, value: "one" },
    { name: 2, value: "two" },
    { name: 3, value: "three" },
    { name: 4, value: "four" },
    { name: 5, value: "five" },
    { name: 6, value: "six" },
    { name: 7, value: "seven" },
    { name: 8, value: "eight" },
    { name: 9, value: "nine" },
  ];
  const length = box.length;
  let val = "";
  for (let i = 0; i < length; i++) {
    if (parseInt(box[i])) {
      answer += box[i];
    } else {
      val += box[i];
      for (let x = 0; x < number.length; x++) {
        if (number[x].value == val) {
          answer += number[x].name;
          val = "";
        }
      }
    }
  }
  answer = parseInt(answer);

  return answer;
}

내가 쓴 코드를 보면 맨처음 문자열을 받아 split함수를 사용하여 각 원소마다 잘라주었고 잘라진 원소 배열의 모든 길이를 for문으로 돌렸다

for문 안을 보면 받아온 문자를 parseInt형으로 바꾸어주엇을때 NaN이 아닌 숫자가 나온다면 현재 받아온  문자열의 원래값(?)이 숫자라는 것을 알수있고 그렇다면 숫자를 그대로 answer에 추가하엿다 .

이제 원소가 숫자가 아닌 경우 하나의 원소를 받을때마다 객체 number에 들어잇는 value값을 비교하여 값아 지면 answer의 해당하는 숫자를 넣어주고  임시보관소인 val를 초기화 해준다 마지막으로 문자열인 answer값을 정수형으로 변환 해준다 

---> 이 코드를 제출하였을때 테스트케이스 10번을 제외하고 모든 조건을 만족하였다  나는 아직 어떤 경우에서 잘못된건지 잘 모르겠다 😓

정답 코드 ⚽️

function solution(s) {
    var answer = 0;
    s = s.replace(/one/g,'1');
    s = s.replace(/two/g,'2');
    s = s.replace(/three/g,'3');
    s = s.replace(/four/g,'4');
    s = s.replace(/five/g,'5');
    s = s.replace(/six/g,'6');
    s = s.replace(/seven/g,'7');
    s = s.replace(/eight/g,'8');
    s = s.replace(/nine/g,'9');
    s = s.replace(/zero/g,'0');
    console.log(s);
    s = Number(s);
    return s;
}

• 다른 분들은 자바스크립트 내장함수인 replace를 사용하여 해결한 것을 볼수 있다.
• replace함수는 원래 바꿀 문자열 중 가장 앞에 있는 것 하나만! 바꿔준다
• '/' 로 바꿀 문자열을 감싸준 뒤 문자열의 뒤에 'g'를 붙이면 한번에 해당하는 모든 문자열을 치환할 수 있다!

문제를 풀고 난 후..

• 정규식과 기존의 알고잇엇던 내장함수를 이용할 방법을 잘 생각해야겠다... 
• 직접 구현하려다 보니 시간도 꽤 뺏기고 어려웠던것 같다... 다음부터는 내장함수를 잘 이용해서 문제를 풀어야겠따

📌 문제  풀러가기 => https://programmers.co.kr/learn/courses/30/lessons/81301

졸업작품을 만들면서 각 디바이스별로 반응형을 처리 해주기 위해 이것 저것 찾아보았다

먼저 반응형 웹을 사용하기 위해서 밑의 코드를 html header에 포함시켜야한다!

<meta name="viewport" content="width=device-width, initial-scale=1">

디바이스 별 해상도 분기점 

/* 태블릿 728px ~ 1024px */
@media screen and (max-width: 1024px) {
    변경할 속성 {}
}

/* 모바일 728px까지 */
@media screen and (max-width: 728px) {
    변경할 속성 {}
}

나는 보통 웹을 기준으로 만들기 때문에 웹에서의 반응형은 따로 처리하지 않고 초기값으로 잡는다!

느낀점

반응형을 일일이 처리하다가는 작업할양도 굉장히 많고 의존성이 있는 태그들의 경우 처리 하기도 굉장히 복잡해

어느정도로만 반응형 처리를 하고 실제로 출시해야하는 사이트의 경우 웹 따로 모바일 따로 각자 만드는것이 가장 베스트이다..!!

(각 기기별 최적화 문제도있음)

먼저 문제를 보자

정수형 숫자를 함수에 넣어주면 값을 뒤집어 각 자리 숫자를 원소로 가지는 배열 형태로 리턴 하라는 문제이다.

내가 해결 한 방식은 다음과 같다.

1.  먼저 정수형인 n값을 문자열로 바꾼 다음 split("")함수로 띄워쓰기 없이 box 라는 변수에 값을 저장 한다

-->  box === [ '1', '2', '3', '4', '5' ] 

2. box의 길이를 length라는 변수에 저장한다. ( pop()함수를 이용하기 때문에 for문안에서 box.length의 길이가 변할수 있기때문 )

3. 변하지 않는 고정값인 length를 이용하여 box의 가장 오른쪽에 있는 원소부터 answer에 push

---> answer === ['5', '4', '3', '2', '1']

4. 다시 정수형으로 변환 해주기위해 answer의 원소를 모두 map함수를 이용하여 새로운 배열로 만들어주는데 이때 paresInt를통하여 정수 형으로 변환 

다른 사람들의 코드를 확인해보자

정수형인 n값에 n+""하면 정수형이 문자열로 타입이 바뀌게 된다. (이건 처음알았다...)

문자열로 변경된 값을 split("")을 이용하여 띄워쓰기없이 모든 원소를 분해시키고 reverse()라는 함수로 값을 뒤집어 주었다(reverse함수 알고 있었지만 자주 사용하는 함수가 아니다 보니 존재자체를 까먹고 있었따..) map은 동일하게 정수형으로 모든 원소를 변경 시켜주었따

내가 푼 코드에 비해 다른 사람들의 코드는 훨씬 짧아 내장함수의 종류를 까먹지 않고 필요할때 사용하는 것이 중요하다고 느껴졌다

정수형에 + "" 하면 문자열로 변한다는 사실과 reverse함수를 까먹지 말아야겟다!