Nuxt GraphQL Client で自己証明書を使った HTTPS サーバーにリクエストを送る方法

こんにちは。 SAW です。
新年あけましておめでとうございます🎍
今年もよろしくお願いいたします🙇‍♂

Nuxt の GraphQL クライアントの 1 つに、 Nuxt GraphQL Client があります。
Nuxt GraphQL Client のホストの設定に 自己証明書 を利用したローカルの HTTPS サーバーを指定して Nuxt の Nitro サーバーを起動したところ、以下のようなエラーがコンソールに表示されました。

エラーメッセージ

 ERROR  Cannot start nuxt:
        Failed to load schema from https://localhost/graphql:

        self-signed certificate
        Error: self-signed certificate

Nuxt GraphQL Client では、 Nitro サーバーを起動する際に GraphQL のスキーマを GraphQL サーバーから読み込むようで、自己証明書を利用している場合はスキーマの読み込みに失敗するようです。

本記事では Nuxt GraphQL Client で自己証明書を使った HTTPS サーバーにリクエストを送る方法を紹介します。

なお、本記事で前提とする各パッケージのバージョンは以下の通りです。

• Nuxt: 3.8.0
• Nuxt GraphQL Client: 0.2.31

対象読者

本記事で想定する読者層は次の通りです。

• Nuxt について基本的な知識を有している
• Cookie について基本的な知識を有している

背景

個人で Web アプリケーションを開発しており、フロントエンドは Nuxt, バックエンドは Laravel という構成で開発を進めています。
そのため、開発用サーバーがフロントエンドとバックエンドで分かれており、通信が クロスオリジン な環境になります。

また、 バックエンドではユーザー認証にセッション認証を利用しているため、セッション ID のやりとりをするために Cookie を利用します。

クロスオリジンで Cookie を利用する際には HTTPS で通信する必要があります。
そのため、バックエンド側のサーバーで 自己証明書 を利用して HTTPS 化しました。

Nuxt GraphQL Client のホストの設定に上記の HTTPS サーバーを指定したところ、冒頭のエラーが発生しました。

nuxt.config.ts の設定

クロスオリジンのサーバーと通信するために、 Nuxt GraphQL Client の CORS の設定を追加します。
Nuxt GraphQL Client の 公式ドキュメント を参考に、 nuxt.config.ts に CORS の設定を追加します。

nuxt.config.ts

export default defineNuxtConfig({
  modules: ['nuxt-graphql-client'],
  'graphql-client': {
    clients: {
      default: {
        host: 'https://localhost/graphql',
	// CORS の設定を追加
        corsOptions: {
          mode: 'cors',
          credentials: 'include',
        },
      },
    },
  },
});

https://nuxt-graphql-client.web.app/getting-started/configuration#corsoptions

環境変数の設定

graphql-request の GitHub repo でも同様のエラーが発生したという issue がありました。
この issue に process.env["NODE_TLS_REJECT_UNAUTHORIZED"] = 0 を設定を試してみて、というコメントがあったため、以下のように .env に環境変数 NODE_TLS_REJECT_UNAUTHORIZED を追加しました。

.env

GQL_HOST="https://localhost/graphql"
# 環境変数 NODE_TLS_REJECT_UNAUTHORIZED を追加
NODE_TLS_REJECT_UNAUTHORIZED=0

環境変数 NODE_TLS_REJECT_UNAUTHORIZED を設定して Nitro を再起動したところ、エラーが解消され、サーバーが起動しました。
なお、 NODE_TLS_REJECT_UNAUTHORIZED の値を 0 に設定したことで、証明書の検証が無効になっており、通信が安全でないという警告が表示されます。

環境変数の設定についての警告

Warning: Setting the NODE_TLS_REJECT_UNAUTHORIZED environment variable
 to '0' makes TLS connections and HTTPS requests insecure
 by disabling certificate verification.

ブラウザで自己証明書を許可する

Nitro のサーバーにアクセスしたあと、クロスオリジンの GraphQL サーバーにリクエストを送ると、ブラウザのコンソールに以下のようなエラーが表示されていました。

ブラウザのコンソールに表示されるエラー

POST https://localhost/graphql net::ERR_CERT_AUTHORITY_INVALID

自己証明書を利用しているサーバーにリクエストを送信しようとする際に、 SSL 証明書が信頼されていない ため、通信がブロックされます。

ブラウザで自己証明書を許可するには、直接自己証明書を利用している HTTPS サーバーにアクセスした際に表示される画面で、接続を許可するように設定します。

Google Chrome の場合、自己証明書を利用しているサーバーにはじめてアクセスすると、以下のような画面が表示されます。

Google Chrome での警告画面

Advanced をクリックすると、 SSL 証明書が OS で信頼されていないという説明が表示されます。
その表示の下の Proceed to localhost (unsafe) をクリックすると、リクエストが送信されます。

Advanced をクリックしたあとの画面

発行元が不明な証明書については、 むやみにアクセスを許可しないようにしてください。

URL のコンテンツが表示されることを確認したあとで、再度 Nuxt GraphQL Client を使ってリクエストを送ると、リクエストが送信されるようになります。
Cookie を利用している場合は、 Set-Cookie で受け取った Cookie の値がリクエストヘッダに付加されるようになります。

まとめ

本記事のまとめは次の通りです。

• Nuxt GraphQL Client で自己証明書を使った HTTPS サーバーにリクエストを送る方法を紹介
  • 環境変数 NODE_TLS_REJECT_UNAUTHORIZED に 0 を設定
  • ブラウザで自己証明書の通信を許可するように設定

あらためて CORS や SSL について理解を深めないといけないなと思いました。

参考文献

https://qiita.com/Syy12345-Unity/items/eaa913ecc80e8cb96f0b
https://github.com/jasonkuhrt/graphql-request/issues/125
https://kinsta.com/knowledgebase/neterr-cert-authority-invalid/