Contentful + Nuxt.jsでつくったサイトのAPIキーの隠蔽を試みる 🥷

f:id:kimizuka:20210703103950p:plain

※ Contentful と Nuxt.js の説明は省きます。

ContentfulとNuxt.jsをつかってウェブサイトを使う場合、こちらの公式のドキュメントを参考にしていました。

www.contentful.com

が。Nuxt.jsの2.13からdotenvの扱いがより便利になったみたいなので、そちらの書き方で書き直してみます。

ja.nuxtjs.org

dotenvを導入する

yarn add -D dotenv

.envをつくる

CTF_SPACE_ID=HOGEHOGE
CTF_CDA_ACCESS_TOKEN=FUGAFUGA

nuxt.config.jsを編集する

require('dotenv').config();

const { CTF_SPACE_ID, CTF_CDA_ACCESS_TOKEN } = process.env;

export default {
  privateRuntimeConfig: {
    CTF_SPACE_ID,
    CTF_CDA_ACCESS_TOKEN
  },

  publicRuntimeConfig: {
    CTF_SPACE_ID: process.env.NODE_ENV !== 'production' ? CTF_SPACE_ID : undefined,
    CTF_CDA_ACCESS_TOKEN: process.env.NODE_ENV !== 'production' ? CTF_CDA_ACCESS_TOKEN : undefined
  }
};

Contentfulを読み込むvueファイルを編集（TypeScript）

<script lang="ts">
  import * as contentful from 'contentful';
  import { Component, Vue } from 'nuxt-property-decorator';

  @Component({
    async asyncData({ $config }) {
      const contents = await contentful.createClient({
        space: $config.CTF_SPACE_ID,
        accessToken: $config.CTF_CDA_ACCESS_TOKEN
      }).getEntries();

      return {
        contents
      };
    }
  })
  export default class IndexPage extends Vue {}
</script>

ざっくり書くとこんな感じです。

ポイントとしては、

❶ process.envやnuxt.config.jsの値は正確には隠蔽できてない（フロントからも読み取れてしまう）
❷ privateRuntimeConfigはフロントから読み取れないのでそちらを使う
❸ 開発時に困るので、開発時はpublicRuntimeConfigを使う（本番ではundefinedにする）

という感じです。