【Nuxt 3】httpOnly 属性付き cookie を保存 / 削除する

59k

2023/05/11に公開

概要

Nuxt3 で、何らかの情報を httpOnly 属性付きで cookie に保存する方法。

例として、「ログイン」ボタンをクリックした際に取得した何らかの情報を保存するケースを考えます。

<script setup lang="ts">
const login = () => {
  // ここで取得した情報を、cookie に保存したい。
}
</script>

<template>
<div>
  <button @click="login()">ログイン</button>
</div>
</template>

ChatGPT によれば、httpOnly 属性 cookie と通常の cookie との違いは以下です。

httpOnly属性を持つcookieは、JavaScriptによるアクセスを禁止されている点が、通常のcookieとの最も大きな違いです。通常のcookieは、JavaScriptを使用して取得することができますが、httpOnly属性を持つcookieはJavaScriptからアクセスできません。

つまり、vue テンプレートに定義した login 関数の中から直接 cookie に httpOnly で書き込むことはできません。

// これでは保存できない
const login = () => {
  const expiresIn = 60 * 60 * 24 * 5 * 1000
　　　　const options = {
    httpOnly: true,
    secure: true,
    maxAge: expiresIn,
  }
  const target = useCookie('target')
  target.value = (保存したい情報)
}

サーバー経由で書き込みをする必要があるので、API Routes を使用します。

// server/api/login.post.ts

export default defineEventHandler(async (event) => {
  const body = await readBody(event)
  const target = body.target
  const expiresIn = 60 * 60 * 24 * 5 * 1000

  const options = {
    maxAge: expiresIn,
    httpOnly: true,
    secure: true,
  }

  setCookie(event, "target", target, options)

  return { message: "success" }
})

↑のエンドポイントに POST することで、 httpOnly 属性で保存することができました。

const login = async () => {
  const params = {
    target: (保存したい情報),
  }
  await useFetch("/api/login", {
    method: "POST",
    body: params,
  })
}

書き込み時と同様に API Routes を使う必要がありそうですが、
同じキーで null で上書きすることで、クライアント側からでもリセットすることができました。

// components や composables 

const logout = () => {
  const target = useCookie("target")
  target.value　= null
}

HowTelevision EngineeringPublication

採用情報 recruit.howtelevision.co.jp

概要

httpOnly 属性付き cookie で保存する

httpOnly 属性付き cookie をリセットする

Discussion