res.redirect와 res.render는 Express.js에서 응답을 처리하는 방법 중에 두 가지입니다.
res.redirect
res.redirect 메소드는 클라이언트에게 다른 URL로 리다이렉트하도록 지시하는 응답을 보냅니다. 클라이언트는 지정된 URL로 새로운 요청을 전송하게 되고, 서버는 해당 요청을 처리한 후 응답을 보냅니다. 이 방법은 주로 로그인, 회원가입, 폼 제출 등의 처리가 완료된 후 사용자를 다른 페이지로 이동시키고자 할 때 사용됩니다.
res.redirect('/some-url');res.render
res.render 메소드는 서버에서 클라이언트에게 HTML을 생성하고 전달하는데 사용됩니다. 주로 템플릿 엔진(예: EJS, Pug, Handlebars 등)을 사용하여 HTML 코드를 동적으로 생성하며, 템플릿 파일을 렌더링하여 클라이언트에게 전송합니다. 이 방법은 클라이언트 측에서 페이지의 콘텐츠를 변경하는 것이 아니라 서버 측에서 페이지를 구성한 후 전송합니다.
res.render('view', { data: data });요약하자면, res.redirect는 클라이언트에게 다른 URL로 리다이렉트하도록 지시하는 반면, res.render는 서버에서 HTML을 생성하여 클라이언트에게 전달하는 방법입니다.
보안
res.redirect와 res.render 메소드를 사용할 때 주의해야할 보안 관련 사항은 다음과 같습니다.
사용자 입력 처리
사용자로부터 입력을 받을 때, 사용자가 입력한 데이터를 그대로 사용하기보다는 검증, 정규화 및 인코딩과 같은 적절한 처리를 해야 합니다. SQL 인젝션, XSS(Cross-site Scripting) 등과 같은 공격을 방지하기 위해 사용자 입력을 정확하게 필터링하고 인코딩해야 합니다.
뷰 경로
res.render 메소드를 사용할 때, 사용자 입력을 뷰 경로에 포함하지 않도록 주의해야 합니다. 공격자가 파일 시스템에 엑세스하여 민감한 정보를 획득하거나 시스템을 손상시키는 데 사용할 수 있는 취약점이 될 수 있습니다.
리다이렉트 경로
res.redirect 메소드를 사용할 때, 사용자 입력을 리다이렉트 경로에 포함하기 전에 검증 및 필터링해야 합니다. 그렇지 않으면 악의적인 사용자가 오픈 리다이렉터(Open Redirector) 공격을 수행할 수 있습니다. 이러한 공격은 사용자를 다른 위험한 웹 사이트로 리다이렉트하여 개인 정보를 노출시키거나 공격자가 원하는 동작을 수행하도록 유도할 수 있습니다.
민감한 데이터 노출
res.render를 사용하여 뷰를 렌더링할 때, 민감한 정보를 노출하지 않도록 주의해야 합니다. 예를 들어, 사용자 암호, 개인 정보, API 키 등의 민감한 데이터를 클라이언트에게 전송하지 않도록 합니다.
콘텐츠 보안 정책(CSP)
웹 애플리케이션의 보안을 향상시키기 위해 콘텐츠 보안 정책(CSP)을 사용하는 것이 좋습니다. CSP는 웹 페이지에서 로드되는 콘텐츠의 출처를 제한하여 XSS 공격 등의 취약점을 줄입니다.
이러한 보안 사항을 적용함으로써, 애플리케이션의 신뢰성과 안정성을 높일 수 있습니다.
공식문서(원문)
res.redirect([status,] path)
지정된 경로에서 파생된 URL로 리다이렉트합니다. status는 HTTP 상태 코드에 대응하는 양의 정수이며, 지정되지 않은 경우 기본값은 "302 Found"입니다.
res.redirect('/foo/bar')
res.redirect('http://example.com')
res.redirect(301, 'http://example.com')
res.redirect('../login')리다이렉트는 다른 사이트로 리다이렉션하기 위한 완전한 URL이 될 수 있습니다.
res.redirect('http://google.com')리다이렉트는 호스트 이름의 루트에 상대적일 수 있습니다. 예를 들어, 애플리케이션이 http://example.com/admin/post/new에 있다면, http://example.com/admin의 URL로 리다이렉트합니다.
res.redirect('/admin')리다이렉트는 현재 URL에 상대적일 수 있습니다. 예를 들어, http://example.com/blog/admin/에서 (끝 슬래시 주목) 다음은 http://example.com/blog/admin/post/new의 URL로 리다이렉트합니다.
res.redirect('post/new')http://example.com/blog/admin에서 post/new로 리다이렉션하면 (끝에 슬래시가 없음), http://example.com/blog/post/new로 리다이렉트됩니다.
위의 동작이 혼란스럽다면, 경로 세그먼트를 디렉토리(끝에 슬래시 포함)와 파일로 생각하면 이해하기 쉬워집니다.
경로-상대적인 리다이렉트도 가능합니다. http://example.com/admin/post/new에서 다음은 http://example.com/admin/post로 리다이렉트합니다.
res.redirect('..')뒤로 리다이렉션은 요청을 참조자(referer)로 돌려보냅니다. 참조자가 없을 때 기본값은 /입니다.
res.redirect('back')res.render(view [, locals] [, callback])
view를 렌더링하고 렌더링된 HTML 문자열을 클라이언트에게 전송합니다. 선택적 파라미터:
locals는 뷰에 대한 로컬 변수를 정의하는 객체의 속성입니다.callback은 콜백 함수입니다. 제공되면, 이 메서드는 가능한 오류와 렌더링된 문자열을 반환하지만 자동응답은 수행하지 않습니다. 오류가 발생하면 메서드는 내부적으로next(err)을 호출합니다.
view 인수는 렌더링할 뷰 파일의 파일 경로인 문자열입니다. 이는 절대 경로 또는 views 설정에 상대적인 경로일 수 있습니다. 경로에 파일 확장자가 포함되어 있지 않으면, view engine 설정이 파일 확장자를 결정합니다. 경로에 파일 확장자가 포함되어 있으면, Express는 지정된 템플릿 엔진의 모듈을 로드(require()를 통해)하고, 로드된 모듈의 __express 함수를 사용하여 렌더링합니다.
자세한 정보는 Using template engines with Express를 참조하세요.
주의: view 인수는 파일 시스템 작업을 수행하므로 보안상의 이유로 최종 사용자의 입력을 포함하지 않아야 합니다.
로컬 변수
cache는 뷰 캐싱을 활성화합니다. 개발 중에 뷰를 캐시하려면true로 설정하십시오. 기본적으로 프로덕션에서 뷰 캐싱이 활성화됩니다.
// 랜더링된 뷰를 클라이언트에게 전송
res.render('index')
// 콜백이 지정된 경우, 렌더링된 HTML 문자열을 명시적으로 전송해야 함
res.render('index', function (err, html) {
res.send(html)
})
// 로컬 변수를 뷰에 전달
res.render('user', { name: 'Tobi' }, function (err, html) {
// ...
})