httpOnly Cookie 속성이 부여된 쿠키 접근 방법

HttpOnly Cookie

set-cookie 설정 시, XSS 공격 방지를 위해 HttpOnly 속성을 부여한다. 이를 통해 클라이언트 스크립트가 쿠키에 접근하는 것을 방지할 수 있다.

 

하지만 서버 컴포넌트에서는 접근 가능하다.

Next.js 13 이후 버전부터, app router의 모든 컴포넌트들이 기본적으로 서버 컴포넌트이기 때문에 접근이 가능하다! 접근 방법은 아래와 같다.

 

//app/home/page.tsx

import React from "react"
import { cookies } from "next/headers"

const page = () => {
	const cookieStore = cookies();
	const token = cookieStore.get("accessToken")?.value;

	if(!token) return null;

	return (
		<div>Home</div>
		<div>{ token }</div>
	)
}

 

더 자세한 방법은 nextJs 공식문서를 참고하면 된다.

https://nextjs.org/docs/app/api-reference/functions/cookies

Functions: cookies | Next.js

 

 

그렇다면 클라이언트 컴포넌트에서 토큰을 사용하려면?

서버 컴포넌트에서 클라이언트 컴포넌트에 토큰값을 내려주면 된다!

//app/home/page.tsx

import React from "react"
import { cookies } from "next/headers"

const page = () => {
	const cookieStore = cookies();
	const token = cookieStore.get("accessToken")?.value;

	if(!token) return null;

	return (
		<div>Home</div>
		<ClientComponenet token={token}/>
	)
}

const ClientComponenet = ({ token } : { token : string }) => {

	return <div>토큰 : { token } </div>

}