개발일지

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 

🏀  문제

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

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