Section2-Unit10[Web Server 기초]

CORS & SOP

SOP

: Same-Origin-Policy의 줄임말로 출처 즉, 프로토콜, 호스트, 포트 모두 동일해야 리소스 공유가 가능하다는 정책

• 해당 정책으로 인해 의도하지 않은 코드가 동작해, 사용자의 정보가 유출되고 악의적으로 사용되는 것을 방지함
• 하지만, 개발과정에서 다른 출처의 리소스를 받아와야하는 상황이 많이 발생하고 이를 해결하기 위해 사용되는 것이 CORS

CORS

: Cross-Origin Resource Sharing의 줄임말로 HTTP 헤더를 추가적으로 사용해, 접근 권한을 부여한 출처의 경우 해당 자원에 접근할 수 있도록 하는 방법

프리플라이트

: 실제 리소스를 접근하는 요청을 하기 전에, OPTIONS 메서드를 사전 요청해 본인 출저가 리소스 권한이 있는지 확인하는 방법

• 프리플라이트 요청(Preflight Request)
  : 요청 후 권한이 있을 경우 서버 응답에 Access-Control-Allow-Origin 헤더에 본인의 출처가 담겨 응답되고 정상적인 리소스 접근 요청 및 응답이 이루어지며,
  권한이 없을 경우 서버 응답에 Access-Control-Allow-Origin 헤더에 본인의 출저가 담겨 있지 않으며, CROS 에러가 발생함

• 단순요청
  : 프리플라이트 요청을 생략할 수 있는 방법으로, 아래의 조건을 만족해야 사용가능

  • GET, HEAD, POST 요청
  • Accept, Accept-Language, Content-Language, Content-Type 만 수동적으로 사용가능하며, Content-Tpye의 경우 application/x-www-form-urlencoded, multipart/form-data, text/plain 3가지만 값으로 혀용됨

• 인증정보를 포함한 요청
  : 쿠키와 같은 정보를 담기위해 인증적인 보안을 강화하는 방법으로, 프로트와 서버 양쪽 모두 CORS 설정을 이루어지는 방법

• 프론트 요청에는 withCredentials 헤더에 true를

• 서버 응답에는 Access-Control-Allow-Credentials에 true를

• 서버 응답에는 쿠키인증정보 응답의 경우 ccess-Control-Allow-Origin헤더 *로 모든 출처를 허용할 수 없음
  why? 보안을 강화하는 방법인 만큼 출저를 특정해 줘야 동작

미들웨어

: 양 쪽의 주체가 연결되어 통신하는 과정에서 사용되는 소프트웨어로 지능적이고 효율적인 연결 기능 제공

미들웨어 사용 상황 (express 사용)

• POST 요청 등에 포함된 body(payload)를 구조화할 때
• 모든 요청/응답에 CORS 헤더를 붙여야 할 때
• 모든 요청에 대해 url이나 메서드를 확인할 때
• 요청 헤더에 사용자 인증 정보가 담겨있는지 확인할 때

[1] POST 요청 등에 포함된 body(payload)를 구조화할 때

// Express v4.16.0 이후 부터 body-parser 설치 x
const jsonParser = express.json();
// 생략
app.post('/api/users', jsonParser, function (req, res) {

})

Q. express.json([options]) 코드에서 options에 {strict: false}를 추가한 의미는?
A. true일 경우 object 타입만 허용, false일 경우 모든 타입 json.parse 허용 (defalt 값을 true)

[2]. 모든 요청/응답에 CORS 헤더를 붙일 때

• npm install cors 를 통해 cors 설치

const cors = require('cors');
app.use(cors());

• cors안의 인자를 비울 경우 모든 출처가 허용됨(like 와일드 카드)

const cors = require('cors')
app.get('/user/:id', cors(), function (req, res, next) {
  res.json({msg: 'CORS for 1 Route'})
})

• 특정 요청에 대한 CORS 허용

[3] 모든 요청에 대해 url이나 메서드를 확인할 때

• app.use 를 사용하면 모든 endpoint에 대 같은 미들웨어를 실행 시킬수 있음
  app.use(()=>{
  console.log('모든 요청에 대한 응답!')
  })

[4] 요청 헤더에 사용자 인증 정보가 담겨있는지 확인할 때

• 요청 헤더의 token을 통해 확인하는 것으로 얕게 이해
  => Section3에서 다룰 예정