CSRF, XSS, CORS

https://evan-moon.github.io/2020/05/21/about-cors/ <- 여기에 설명 진짜 잘 되어있음

CSRF (Cross Site Request Forgery)

공격자의 요청을 사용자의 요청인 것처럼 위조한 것

사용자의 pc나 서버를 감염시키는 게 아니라 악의적인 요청을 사용자의 요청인 것처럼 위조해 그 행위가 이루어지도록 하는 것

보통 피싱 사이트에 로그인하면 그 정보를 가지고 악의적인 요청을 시도한다

 

ex1) 해커가 사용자의 sns계정으로 광고 게시글 올리기

ex2) 해커가 돈 송금하라는 악의적인 요청 위조 -> 사용자가 피싱 링크 클릭 -> 사용자의 계정(자동 로그인)으로 은행에게 돈 송금하라는 요청 보냄

 

대응 기법

• Refferer: 백엔드 단에서 승인된 도메인으로만 요청시에 처리하도록 함
• Safety token: 사용자 세션에 임의의 난수값을 지정하고 요청이 들어오면 대조해본다

 

XSS (Cross Site Scripting)

관리자가 아닌 권한이 없는 사용자가 웹 사이트에 스크립트를 삽입하는 공격 기법

 

ex) 해커가 웹사이트에 악의적인 스크립트 삽입(ex. 전자 게시판) -> 게시판을 열람한 사용자의 브라우저에서 스크립트가 실행되어 쿠키 탈취 -> 세션 하이재킹

 

CSRF는 인증된 세션이 필요하고 그걸 가지고 공격을 하지만XSS는 인증된 세션이 없어도 됨

 

 

 => 위 두 문제를 해결하기 위해 사전에 지정된 도메인이나 범위에서만 fetch, 리소스 요청을 할 수 있도록 제한하는 방법이 CORS와 SOP이다. 

CORS (Cross-Origin Resource Sharing)

Cross-Origin이란?

그대로 해석하면 다른 출처라고 보면 됨

1. 프로토콜이 다르거나 (http, https)

2. 도메인이 다르거나 (naver.com, daum.net)

3. 포트 번호가 다르거나 (:8080, :3000)

 

 

CORS는 서버에서 Access-Control-Allow-Origin이란 속성에 지정되어있는 값에서만 fetch가 가능하다.

(vs SOP(Same-Origin Policy), 같은 출처에서만 리소스를 공유할 수 있음)

 

Access-Control-Allow-Origin에 없는 사이트에서 리소스 요청을 하면 서버는 그냥 응답을 보내주지만 브라우저가 CORS를 판단해서 차단하든지 말든지 결정함. 

 

 

그럼 예를 들어서 해커가 만든 피싱 사이트에서 naver.com의 리소스를 요청을 하면 -> 그걸 거부한단 소리인 거 같음 흠 .. 

 

---

node.js에서 구현

예전에 친구랑 node.js과 html로 웹 프로젝트를 할 때 CORS에러가 떴던 게 생각이 나서 코드를 찾아보았다. 

서버에 직접 Access-Control-Allow-Origin 헤더를 지정해줘도 괜찮지만 cors npm 패키지를 사용하면 간편하게 할 수 있다.

 

rollingpaper_newyearsmoney/app.js

const express = require('express');
const cors = require('cors');

const app = express();
app.use(cors());

 

---

참고

https://gyoogle.dev/blog/web-knowledge/CSRF%20&%20XSS.html

https://nordvpn.com/ko/blog/csrf/

https://hannut91.github.io/blogs/infra/cors

https://evan-moon.github.io/2020/05/21/about-cors/

https://inpa.tistory.com/entry/NODE-%F0%9F%93%9A-CORS-%EC%84%A4%EC%A0%95%ED%95%98%EA%B8%B0-cors-%EB%AA%A8%EB%93%88