はじめに

多少なりにエンジニアをやってきた中で、コーディング中にさまざまなエラーや落とし穴を踏んできました。
今振り返ると、しょうもないエラーに何時間も使っていたこともあります。

最近は生成AIのおかげで、エラーの解消スピードが格段に上がりました。
そして、普段コードを書かない方、非エンジニアと言われる方が、簡単に開
発できる時代となりました。

知識が十分でない状態でエンジニア業務を行うと、思わぬリスクを伴うことがあります。
以前、クラウドサービスが普及し始めた頃、興味本位でAWSを触った結果、アクセスキーが漏洩し、多額の請求が発生したという話もありました。

そこで、私がこれまで見てきた中で「ここは押さえておこう」と感じたポイントを紹介し、安全に開発できる方が増えればと思います。

対象者：これから開発しようと思う方・開発して数ヶ月

まずは、開発始める前にコレだけはやって

✅️gitHubのリポジトリは、プライベートにして。

自分の大切な情報を保管する倉庫にはとりあえずロックをかけて。
可能であれば、多要素認証の設定をする。
これである程度、トラブルは事前に防げます。

（例）envファイルをそのままコミットしてpushしまう。
APIキーやアクセスキーなど言わば、通帳の暗証番号をクラウド上に保存してしまう。コード上にも直接記述するのは避けましょう。
⚠️リスク
・一般公開すると、大切な情報が筒抜けになります
・不正ログインがあると情報が抜き取られます

ℹ️補足
.envファイル保存後、削除しても、コミット履歴に残ります。
削除方法はいくつかありますが、注意が必要です。

WEBに一般公開予定ならチェック

✅️機密性高い情報（APIキー）などの使用箇所・設定箇所は必ずチェックする

（例）設定ファイル（nuxt.config.ts）で大事なキーをFE側にも公開
大事なキーは、BFF(backend for frontend)と側に設定する
⚠️リスク
・ブラウザのコンソールに入力すると、publicの設定情報が表示されます
console.log(useNuxtApp().$config) // publicの設定情報出力

// nuxt.config.ts
export default defineNuxtConfig({
  runtimeConfig: {
    // ✅ サーバーのみ（public以下に置かない）
    secretApiKey: process.env.SECRET_API_KEY,

    public: {
      // ⚠️ ここに置いたものはクライアントにも公開される
      apiBase: process.env.API_BASE_URL,
      // ❌ 絶対NG
      secret: process.env.DB_PASSWORD
    }
  }
})

✅️ログやエラーメッセージの出力内容には気をつけて

（例）ログイン時に、「メールアドレスが存在しません」「パスワードが違います」など具体的なエラーが表示される
総当たりで攻撃すると、誰が登録している分かってしまいます

⚠️リスク
・個人情報や機密情報の漏洩に繋がります
ℹ️補足
生成AIで作成すると、エラー時、コンソールログ出力して、エラー内容を全て出力したりするので注意してください。

結構たくさんあるので、この辺りから列挙していきます。

✅️APIで個人情報など扱う場合は、POST

GETリクエストではURLのクエリパラメータに情報を含めるため、個人情報を含めてしまうと、ブラウザの履歴やサーバー側のアクセスログなどに残る可能性があります。

✅️最低限のセキュリティ確保

セキュリティ対策は、システムの種類や規模、業界、そして扱うデータの重要度によって、求められるレベルが変わるんですが。

まずは「最低限やること」決めて、実施しけば良いかと思います。
下記の対策ぐらいから始めて、必要に応じて、AIと相談して対策してみてください。

＜最低限やること＞
HTTPS強制
XSS対策
機密情報をlocalStorageに保存しない
クッキーの設定（Domain、Secure、HttpOnly、SameSite）
セッションの有効期間短め(1年とかにしない)

ライブラリの脆弱性のチェック

脆弱性のあるライブラリが使われていないかを確認するためのツールを導入してください。
npm audit で依存の脆弱性を管理しつつ、@aikidosec/firewall でインジェクション攻撃に備えるのがベストプラクティスです。

なんのこっちゃかもしれませんが、
アプリは「自分で書いたコード」だけでなく、「他人が作ったライブラリ」を利用します。そのライブラに弱点があると、どんなに自分のコードが安全でも攻撃される可能性があります。なので、ツールを使って、脆弱性のあるライブラリがないかをチェックします。

 

 ✅️ブラウザ差異が発生するので目視チェック

• ブラウザの種類で表示崩れなど起きる。

• スマフォ（SP）は、OSで動きが変わったりする。

まとめ

思った以上に書くことが増えてきたので、主にフロントエンドのことしか書けませんでした。これも必要！と思うこともあるかと思います。

今回この記事を書きながら、改めて強く感じたのは「やっぱりセキュリティは大事」ということでした。

どれだけ見た目が良く、便利なシステムを作ったとしても、セキュリティに欠陥があれば、それは欠陥住宅と同じ。使う人に価値を提供するどころか、むしろ危険を及ぼしてしまいます。

APIキーや個人情報の扱い方、ログの出力内容、通信方法など、ほんの少しの油断が情報漏洩につながる世界です。

だからこそ、生成AIを活用する場面でも、便利さだけでなく安全性を意識しながら、安心してシステム開発ができる環境を作っていきたいと思いました。