Chapter. CORS
🔥 Browser security
자바스크립트로 여러가지를 할 수 있기 때문에 자바스크립트로 구동되는 브라우저는
보안 위협을 받을 수 있다
XSS
- 클라이언트가 서버를 신뢰하기 때문에 발생하는 이슈
- 서버가
<script>사이에 코드를 넣고 브라우저로 보내면 브라우저는 해당 코드를 실행함- 기본적인 XSS 공격은 브라우저에서 막아줌
CSRF
- 서버가 클라이언트를 신뢰하기 때문에 발생하는 이슈
- 서버는 인증정보를 가지고 오면 믿기 때문에 인증 정보를 가진채로 사용자가 해커의 링크를 누르면 해커는 인증정보를 가로채 서버에 요청을 보냄
🔥 CORS
Cross Origin Resourse Sharing,
서로 다른 origin 간 http request가 가능해도록 해주는
http header를 사용하는 표준 메커니즘
http request는 기본적으로
<img src="other-web.com"><script src="other-web.com/script.js>
와 같은 다른 도메인에 존재하는 리소스를 참조할 수 있지만,
보안상의 이유로
<script>태그로 둘러쌓인 스크립트에서 생성된
cross origin http request를 제한하며,
이때 올바른 CORS header를 포함하지 않는 다면 다른 origin 에 request 할 수 없음
예전 웹페이지는 한 개의 서버만 사용했지만 AJAX(react)가 나오며
front-server를 사용하게 되어 2개를 서버를 사용함
=> CORS가 필요함!
"protocolhttp, domainsalt.com, port80 가 같으면 같은 서버임"
🔥 How CORS works
http header에 새로운 header를 추가화여 서버가 자신의 정보를 사용할 수 있는 서버 목록을 가지게 함
만약 어떤 http request가 서버에 side effect를 일으키는 요청이라면
해당 요청을 보내기 전에 브라우저가preflight라는 요청을 보내도록 강제함
이 요청은OPTIONS로, 이 요청을 통해 서버에 어떤 http 메소드를 요청보낼 수 있는 지 물어보는 작업
=>서버가 답을 보내주면 그 이후 실제 요청을 함
그리고 서버는 클라이언트 요청에 인증이 포함되어야 하는지도 알려줌
Chapter. Express
⚡ Express
Node.js 환경에서 웹서버나 api 서버를 제작하기 위해 사용되는 프레임워크
1) 미들웨어 추가가 편리
2) 자체 라우터 제공
⚡ Routing
메소드와 URL로 분기점을 만드는 것
⚡ node.js
const requestHandler = (req, res) => {
if(req.url === '/lower') {
if (req.method === 'GET') {
res.end(data)
} else if (req.method === 'POST') {
req.on('data', (req, res) => {
// do something ...
})
}
}
}Express의 라우터
const router = express.Router()
router.get('/lower', (req, res) =>{
res.send(data)
})
router.post('/lower', (req, res) =>{
// do something
})⚡ Middleware
req객체, res 객체, 그리고 애플리케이션 요청-응답 사이클 중
그 다음의 미들웨어 함수에 대한 액세스 권한을 갖는 함수
= 클라이언트에게 요청이 오고 그 요청을 보내기 위해 응답하려는 중간에 목적에 맞게 처리하는
거쳐가는 함수들
다음 미들웨어 함수에 대한 액세스는 next 함수를 이용하여 다음 미들웨어로 요청을 넘길수 있으며,
next를 통해 순차적으로 처리됨
특징
- 모든 코드를 실행
- 다음 미들웨어 호출
- res, req 객체 변경 가능
- 요청 - 응답 주기를 종료
언제 사용하나?
- 모든 요청에 대해 url이나 메서드를 확인할 때
- post 요청 등에 포함된 body를 구조화할 때
const bodyParser = require('body-parser')
const jsonParser = bodyParser.json()
// 생략
app.post('/api/users', jsonParser, function (req, res) {
// req.body에는 JSON의 형태로 payload가 담겨져 있습니다.
})- 모든 요청/응답에 cors 헤더를 붙일 때
const defaultCorsHeader = {
'Access-Control-Allow-Origin': '*',
'Access-Control-Allow-Methods': 'GET, POST, PUT, DELETE, OPTIONS',
'Access-Control-Allow-Headers': 'Content-Type, Accept',
'Access-Control-Max-Age': 10
};
// 생략
if (req.method === 'OPTIONS') {
res.writeHead(201, defaultCorsHeader);
res.end()
}=> express를 사용시
const cors = require('cors')
// 생략
app.use(cors()) // 모든 요청에 대해 CORS 허용- 요청 헤더에 사용자 인증 정보가 담겨있는지 확인할 때
app.use((req, res, next) => {
// 토큰 있니? 없으면 받아줄 수 없어!
if(req.headers.token){
req.isLoggedIn = true;
next()
} else {
res.status(400).send('invalid user')
}
})Chapter. node.js
💨 기본 스크립트
필요한 라이브러리의 로드
const http = require('http')
Server 개체 생성
const server = http.createServer();
=> http 오브젝트의 createServer 메서드 호출
요청 처리 설정
server.on('request', doRequest)
=> on 메서드는 지정된 이벤트 처리를 통합해줌
첫번째 인자에는 이벤트 이름, 두번째 인자에는 처리할 함수 입력
대기 시작
server.listen(8080);
=> listen 메서드 실행시 서버는 대기 상태가 되고 클라이언트에서 요청이 있으면
그것을 받아 처리하며, 첫번째 인자로 포트 번호를 지정
요청 처리를 위한 함수
function 함수명 (req,res) { 처리 함수 }
헤더 정보 내보내기
res.writeHead(200, {'Content-Type': 'text/plain'});
=> response 객체의 메서드에서 헤더 정보를 응답에 작성해서 내보내는 것
첫번째 인자는 상태코드를 지정, 두번째 인자에는 헤더 정보를 연관 배열로 정리
컨텐츠 내보내기
res.write('got milk?')
=>http의 바디 부분이 되는 컨텐츠 내용을 내보내기
인수에 지정한 값이 바디 부분의 컨텐츠로 작성됨
계속해서 작성 가능
컨텐츠 출력 완료 - 응답종료
res.end();
=> 내용 내보내기가 완료되면 response의 end 메서드를 호출하여 컨텐츠 출력을 완료
💨 파일 로드
fs 객체 가져오기
const fs = require('fs')
파일 가져오기
fs.readFile(파일 경로, 인코딩, 작업이 끝나면 호출될 콜백 함수)
=> 파일을 읽는 비동기적으로 실행되는 처리
