Next.jsにおけるデータセキュリティの考え方

import { cookies } from 'next/headers'
 
export default async function Page() {
  const cookieStore = cookies()
  const token = cookieStore.get('AUTH_TOKEN')?.value
 
  const res = await fetch('https://api.example.com/profile', {
    headers: {
      Cookie: `AUTH_TOKEN=${token}`,
      // その他のヘッダー
    },
  })
 
  // ....
}

import { cache } from 'react'
import { cookies } from 'next/headers'
 
// キャッシュされたヘルパーメソッドにより、多くの場所で同じ値を簡単に取得できます。
// これにより、Server ComponentからServer Componentへ手動で渡すことが抑止され、
// Client Componentに渡されるリスクが最小化されます。
export const getCurrentUser = cache(async () => {
  const token = cookies().get('AUTH_TOKEN')
  const decodedToken = await decryptAndValidate(token)
  // シークレットトークンやプライベート情報をパブリックフィールドに含めないでください。
  // クラスを使用して、オブジェクト全体をクライアントに誤って渡さないようにしてください。
  return new User(decodedToken.id)
})

import 'server-only'
import { getCurrentUser } from './auth'
 
function canSeeUsername(viewer: User) {
  // 今はパブリック情報ですが、変更される可能性があります
  return true
}
 
function canSeePhoneNumber(viewer: User, team: string) {
  // プライバシールール
  return viewer.isAdmin || team === viewer.team
}
 
export async function getProfileDTO(slug: string) {
  // 値を渡さず、キャッシュされた値を読み直します。これはコンテキストも解決し、より簡単に遅延実行できます
 
  // 安全なクエリテンプレートをサポートするデータベースAPIを使用してください
  const [rows] = await sql`SELECT * FROM user WHERE slug = ${slug}`
  const userData = rows[0]
 
  const currentUser = await getCurrentUser()
 
  // このクエリに関連するデータのみを返し、すべてを返さないでください
  // <https://www.w3.org/2001/tag/doc/APIMinimization>
  return {
    username: canSeeUsername(currentUser) ? userData.username : null,
    phonenumber: canSeePhoneNumber(currentUser, userData.team)
      ? userData.phonenumber
      : null,
  }
}

import { getProfile } from '../../data/user'
 
export async function Page({ params: { slug } }) {
  // このページは安全にこのプロフィールを渡すことができるようになります。
  // なぜなら、機密情報を含むべきではないことが分かっているからです。
  const profile = await getProfile(slug);
  ...
}

import Profile from './components/profile.tsx'
 
export async function Page({ params: { slug } }) {
  const [rows] = await sql`SELECT * FROM user WHERE slug = ${slug}`
  const userData = rows[0]
  // 露出：userData内のすべてのフィールドが、Server ComponentからClient Componentに
  // データを渡しているため、クライアントに露出します。
  return <Profile user={userData} />
}

'use client'
 
// 悪い例：このPropsインターフェースは、Client Componentが必要とする
// データよりもはるかに多くのデータを受け取るため、悪い例です。
// また、Server Componentsがそのすべてのデータを下に渡すことを促しています。
// より良いソリューションは、プロフィールのレンダリングに必要な
// フィールドのみを含む制限されたオブジェクトを受け取ることです。
export default async function Profile({ user }: { user: User }) {
  return (
    <div>
      <h1>{user.name}</h1>
      ...
    </div>
  )
}

import { sql } from './db'
 
export async function getUser(slug: string) {
  const [rows] = await sql`SELECT * FROM user WHERE slug = ${slug}`
  const user = rows[0]
 
  // パブリックフィールドのみを返す
  return {
    name: user.name,
  }
}

import { getUser } from '../data/user'
import Profile from './ui/profile'
 
export default async function Page({
  params: { slug },
}: {
  params: { slug: string }
}) {
  const publicProfile = await getUser(slug)
  return <Profile user={publicProfile} />
}

module.exports = {
  experimental: {
    taint: true,
  },
}

npm install server-only

yarn add server-only

pnpm add server-only

bun add server-only

import 'server-only'
 
//...

// app/actions.js
'use server'
 
// このアクションがアプリケーションで**使用されている**場合、Next.jsは
// クライアントがServer Actionを参照して呼び出すことができるよう、
// セキュアなIDを作成します。
export async function updateUserAction(formData) {}
 
// このアクションがアプリケーションで**使用されていない**場合、Next.jsは
// `next build`時に自動的にこのコードを削除し、
// パブリックエンドポイントを作成しません。
export async function deleteUserAction(formData) {}

// 悪い例：searchParamsを直接信頼する
export default async function Page({ searchParams }) {
  const isAdmin = searchParams.get('isAdmin')
  if (isAdmin === 'true') {
    // 脆弱性：信頼できないクライアントデータに依存している
    return <AdminPanel />
  }
}
 
// 良い例：毎回再検証する
import { cookies } from 'next/headers'
import { verifyAdmin } from './auth'
 
export default async function Page() {
  const token = cookies().get('AUTH_TOKEN')
  const isAdmin = await verifyAdmin(token)
 
  if (isAdmin) {
    return <AdminPanel />
  }
}

'use server'
 
import { auth } from './lib'
 
export function addItem() {
  const { user } = auth()
  if (!user) {
    throw new Error('このアクションを実行するにはサインインしている必要があります')
  }
 
  // ...
}

export default async function Page() {
  const publishVersion = await getLatestVersion();
 
  async function publish() {
    "use server";
    if (publishVersion !== await getLatestVersion()) {
      throw new Error('発行を押してからバージョンが変更されています');
    }
    ...
  }
 
  return (
    <form>
      <button formAction={publish}>Publish</button>
    </form>
  );
}

/** @type {import('next').NextConfig} */
module.exports = {
  experimental: {
    serverActions: {
      allowedOrigins: ['my-proxy.com', '*.my-proxy.com'],
    },
  },
}

// 悪い例：レンダリング中にミューテーションをトリガーする
export default async function Page({ searchParams }) {
  if (searchParams.get('logout')) {
    cookies().delete('AUTH_TOKEN')
  }
 
  return <UserProfile />
}

// 良い例：ミューテーションを処理するためにServer Actionsを使用する
import { logout } from './actions'
 
export default function Page() {
  return (
    <>
      <UserProfile />
      <form action={logout}>
        <button type="submit">Logout</button>
      </form>
    </>
  )
}