DO MY BEST

제로초 블로그[웹사이트]. (2021.06.25). 
URL: https://www.zerocho.com/category/HTTP/post/5b4c4e3efc5052001b4f519b

Access-Control-Allow-Origin

프론트엔드 개발자들에게 악명 높은 헤더입니다. 요청을 보내는 프론트 주소와 받는 백엔드 주소가 다르면 CORS 에러가 발생하는데요. 이 때 서버에서 응답 메시지 Access-Control-Allow-Origin 헤더에 프론트 주소를 적어주어야 에러가 나지 않습니다.

Access-Control-Allow-Origin: www.zerocho.com
Access-Control-Allow-Origin: *

프로토콜, 서브도메인, 도메인, 포트 중 하나만 달라도 CORS 에러가 나서 슬픕니다. 만약 주소를 일일이 지정하기 싫다면 *으로 모든 주소에 CORS 요청을 허용하면 됩니다. 단 그만큼 보안이 취약해집니다.

유사한 헤더로 Access-Control-Request-Method, Access-Control-Request-Headers, Access-Control-Allow-Methods, Access-Control-Allow-Headers 등이 있습니다. Request랑 Allow에서 Method 단수 복수 주의하세요!

CORS 요청 시에는 미리 OPTIONS 주소로 서버가 CORS를 허용하는지 물어봅니다. 이 때 Access-Control-Request-Method로 실제로 보내고자 하는 메서드를 알리고, Access-Control-Request-Headers로 실제로 보내고자 하는 헤더들을 알립니다. Allow 친구들은 Request에 대응되는 애들로, 서버가 허용하는 메서드와 헤더를 응답하는데 사용됩니다. Request랑 Allow가 일치하면 CORS 요청이 이루어지는 것이죠.

Allow

Allow 헤더는 Access-Control-Allow-Methods랑 비슷하지만, CORS 요청 외에도 적용된다는 데에 차이가 있습니다. 즉 GET www.zerocho.com은 되고, POST www.zerocho.com은 허용하지 않는 경우, 405 Method Not Allowed 에러를 응답하면서 헤더로

Allow: GET

를 같이 보내면 됩니다. GET 요청만 받겠다는 뜻입니다.

Content-Disposition

응답 본문을 브라우저가 어떻게 표시해야 할지 알려주는 헤더입니다. inline인 경우 웹페이지 화면에 표시되고, attachment인 경우 다운로드됩니다.

Content-Disposition: inline
Content-Disposition: attachment; filename='filename.csv'

다운로드되길 원하는 파일은 attachment로 값을 설정하고, filename 옵션으로 파일명까지 지정해줄 수 있습니다. 파일용 서버인 경우 이 태그를 자주 사용하게 될 것입니다.

Location

300번대 응답이나 201 Created 응답일 때 어느 페이지로 이동할지를 알려주는 헤더입니다.

HTTP/1.1 302 Found
Location: /

이런 응답이 왔다면 브라우저는 / 주소로 리다이렉트합니다.

Content-Security-Policy

다른 외부 파일들을 불러오는 경우, 차단할 소스와 불러올 소스를 여기에 명시할 수 있습니다. 하나의 웹 페이지는 다양한 외부 소스들을 불러옵니다. 이미지도 불러오고 script 태그로 자바스크립트 파일들도 불러옵니다. 폰트나 스타일, 아이프레임도 불러오고요. 하지만 해커들에 의해 원하지 않는 파일을 불러오게 될 수도 있습니다. 악성 코드가 담겨져있는 파일이라면 큰 일이 나겠죠. XSS 공격 같은 것이 하나의 예시입니다. 이럴 때 Content-Security-Policy로 허용할 외부 소스만 지정할 수 있습니다.

Content-Security-Policy: default-src 'self'
Content-Security-Policy: default-src https:
Content-Security-Policy: default-src 'none'

self로 지정하면 자신의 도메인의 파일들만 가져올 수 있습니다. www.zerocho.com에서는 www.zerocho.com/logo.jpg를 가져올 수 있지만, www.nero.com/logo.jpg는 못 가져오는 것이죠. https:로 지정하면 https를 통해서만 파일을 가져올 수 있게 됩니다. 'none'으로 지정하면 가져올 수 없습니다.

default-src는 모든 외부 소스에 대해 적용되는 것이고요. 각각 따로 지정할 수도 있습니다. 두 개나 세 개 정도만 추려서 지정할 수도 있고요.

Content-Security-Policy: font-src 'self'; script-src https://www.zerocho.com 'unsafe-inline'; img-src 'self'; style-src 'self' 'unsafe-inline'; object-src 'none'

font-src, script-src, img-src, style-src, object-src 등이 있고, 소스 옵션으로는 도메인이나, https:, 'unsafe-inline'(인라인 태그 허용), 'unsafe-eval'(eval 함수 허용) 등이 있습니다. 옵션들이 매우 많으므로 자세한 내용은 여기 서 참고하세요!

이 외에도 다양한 응답 헤더들이 있으나, 자주 보이는 것만 추려보았습니다. 혹시나 궁금한 다른 헤더가 있다면 댓글을 남겨주세요. 다음 시간에는 쿠키&캐시 헤더들을 알아보겠습니다! Cache-Control, Cookie, Set-Cookie, Expires, ETag 등의 헤더입니다.

Session

• 세션데이터는 쿠키 안에 저장되지 않고 세션ID만 저장하고, 세션데이터는 서버사이드에 저장된다.
• 서버쪽의 기본 세션 공강인 MemoryStore는 제품 환경을 위해 안만들어 졌고 대부분의 조건에서 메모리 부족 현상이 있을 것 이므로 싱글프로세스를 커버하지 못한다. 그래서 디버깅이나 개발요인 의미이다. 저장공간을 할 때 redis 같은 저장공간이 따로 필요하다

Express-session

요청마다 개인의 저장 공간을 만들어준다.

밑은 기본 설정 값이다.

 { 

     path: ‘/’, 

     httpOnly: true, 

     secure: false, 

     maxAge: null 

}

app.use(session());을 하면 “req.session”이 생긴다. 특별히 아이디같은 것을 정해 줄 필요없이 그 사용자에 대한 고유한 세션이 된다. 그래서 예를 들어 req.session.id = ‘hello’ 를 하면 모든 사용자의 아이디가 다 hello가 되는것이 아니라 그 사용자에 대한 아이디가 hello가 되는 것이다. 

세션 쿠키 설정

session에는 다양한 옵션들이 있다.

• Resave: 요청이 왔을 때 세션에 수정사항이 생기지 않아도 다시 저장할지 여부
• saveUninitialized: 세션에 저장할 내역이 없더라도 세션을 저장할지
• Secret: 쿠키 암호화.
• Cookie: session 일때는 항상 session-cookie를 쓴다. 그 session-cookie에 대한 설정을 여기다가 하는 것이다.
• httpOnly: 이것은 항상 true로 해 둬야 javascript로 부터 공격받지 않는다.
• secure: 만약 secure가 설정되면, 당신이 http로 사이트를 접근할 때, 쿠키는 설정되지 않는다. 만약 당신이 proxy뒤에 nodejs를 돌리고 있고, secure: true 라면 express 안에 'trust proxy'를 설정해야한다.
• Name: 기본적으로 default 값으로 “connect.sid”로 되어있는데 바꿔도 무방하다.[1]

req.session.name = '~~~';  // 세션 등록

req.sessionID;  // 세션 아이디 확인

req.session.destroy();  // 세션 모두 제거