viviON グループでは、DLsite や comipo など、二次元コンテンツを世の中に届けるためのサービスを運営しています。
ともに働く仲間を募集していますので、興味のある方はこちらまで。

概要

クライアントサイドからの環境変数へのアクセスを制限してセキュリティを強化する。

環境

FW：Nuxt3
言語：Typescript

実現方法

環境変数の設定時にpublicとprivateを使い分けることで実現します。
Nuxt3 では以下の 2 パターンで環境変数を設定することができます。

public：クライアントサイド、サーバーサイドどちらからでの参照可能な環境変数
private：サーバーサイドのみ参照可能な環境変数

機密情報を含む環境変数を定義をしたい場合には、privateを利用してクライアントサイドから取得できないようにします。

privateに設定した環境変数はクライアントサイドから参照しようとしても値が取れないので、publicからprivateに変更する場合は影響範囲を確認しましょう！

使い分けるメリット

セキュリティの強化
クライアントサイドとサーバーサイドの役割分担
クライアントに送るデータが減るのでパフォーマンス向上（大きな向上は見込めません）

環境変数使い分けの例

publicの例

APIのエンドポイント
アプリケーション名やバージョン

privateの例

APIの秘密鍵
データベース接続情報
外部サービスのシークレットキー

実装

環境変数の設定（nuxt.config.ts）

export default defineNuxtConfig({
  runtimeConfig: {
    // private
    apiSecret: process.env.API_SECRET,

    // public
    public: {
      apiBase: process.env.API_BASE,
    }
  }
})

環境変数の参照

const runtimeConfig = useRuntimeConfig()
console.log(runtimeConfig)

サーバーサイドからの参照
public/privateともに参照可能

クライアントサイドからの参照
publicのみ参照可能（privateへのアクセスはundefinedになります）

環境変数の命名規則

ここまでの対応とともに、命名規則を統一することでよりセキュリティやメンテナンス性を高めることに繋げることもできます。

（例）
NUXT_PUBLIC_ を public 用の環境変数の接頭辞として利用
PRIVATE_ を private 用の環境変数の接頭辞として利用

まとめ

実装は簡単なので、環境変数で定義したい値をどう管理するかを決められればセキュリティ強化可能です。
環境変数は機密性の高い情報を含むことも多いので、アプリケーションに合わせて丁寧に管理しましょう。

Appendix

公式ドキュメント

一緒に二次元業界を盛り上げていきませんか？

株式会社 viviON では、フロントエンドエンジニアを募集しています。

また、フロントエンドエンジニアに限らず、バックエンド・SRE・スマホアプリなど様々なエンジニア職を募集していますので、ぜひ採用情報をご覧ください。