公開前 セキュリティチェックリスト

A ｜ 作るとき（設計・実装）

• 管理画面はフォルダ名をランダムに必須

  推測されにくい名前にする（例：admin-9k2f7x）。公開サイトからリンクを張らない。noindex,nofollow を付ける。URLは運営にのみ共有
• 管理操作はログイン必須必須

  認証（メール＋パスワード等）を通った人だけが承認・削除・編集できる
• API側で認証しているかを必ず確認する必須

  画面にパスワードモーダルがあっても、HTML側で表示を切り替えているだけならそれは認証ではない。確認法＝curl "https://APIのURL/?action=削除系" を合言葉なしで叩いて弾かれるか見る。通ったらノーガード（2026-07-28 forhappyの実例）
• 更新系をGETで実行できるようにしない必須

  GETだとURLを開くだけ・リンクを踏むだけ・クローラーの巡回だけで実行される。追加・編集・削除・設定変更はPOSTにして、秘密はクエリではなくヘッダで送る
• 秘密をフロントのソースに書かない必須

  静的ページに書いた時点で公開。サーバー側のSecret（環境変数 / Cloudflare Secrets）に置き、利用者が入力したものと突き合わせる。一度ソースに載せた合言葉は「漏れたもの」として必ず変更する
• RLS（アクセス制御）を必ず有効化必須

  テーブルごとにON。訪問者(anon)は最小権限だけ（例：投稿のINSERTのみ、テーブル直読み不可）
• 非公開の個人情報はAPIに出さない必須

  公開ビューで、本人が公開を選んでいない属性（年代・住所等）はnullにして返す。レスポンスに一切含めない
• service_role キーはフロントに絶対置かない必須

  ブラウザに載せるのは anon（公開前提）キーだけ。秘密鍵を使う処理はサーバー側（関数）に隠す
• 個人情報はデフォルト非公開

  初期値は「運営だけに送る」。本人が項目ごとに公開を選べるようにする
• ユーザー入力をエスケープ（XSS対策）

  投稿本文・名前などをそのままHTMLに入れない。textContent経由で無害化してから表示
• 外部公開するものは承認制

  運営が確認してから掲載（不適切・誤爆・個人情報の事故を事前に防ぐ）
• 画像はアップ前に圧縮・リサイズ

  ユーザーが上げる写真はブラウザ側で長辺〜1600px・JPEG品質0.8程度に縮小してから保存。ストレージ・通信量・表示速度を大きく節約（スマホ写真は数MB→数百KB）。EXIF回転にも対応する
• セキュリティヘッダを設定する必須

  CSP（読み込んでよい接続先だけを許可）／X-Frame-Options: DENY（他サイトへの埋め込み＝クリックジャッキング防止）／X-Content-Type-Options: nosniff／HSTS。Next.jsは next.config.js の headers、Netlifyは _headers、Cloudflareは Transform Rules で付ける。確認法＝curl -I https://自分のサイト で並びを見る
• ソースマップを本番で公開しない

  .mapが公開されているとビルド前の元コードがそのまま復元される。Next.jsは既定でOFF（productionBrowserSourceMaps: true を書かない）。確認法＝配信中のJSのURLに .map を付けて開き、404ならOK
• robots.txt に隠したいパスを書かない

  Disallowは「そこに管理画面がある」と自分から公開すること。隠すのはランダムなフォルダ名＋noindex＋認証で行う

B ｜ 公開する前（まっさら化・確認）

• テストデータを全削除必須

  テストで作った投稿・依頼などを消して、カウンターを0から本番スタート
• 初期データを入れる

  店舗リスト・タイムライン・お知らせなど、最初に見せたい中身を投入
• 管理パスワードを強くする・安全に保管必須

  使い回さない。パスワード管理ツール等に保管
• HTTPSで配信

  Cloudflare/Vercel/Netlify等は標準でHTTPS。file:// のまま公開しない
• バックアップの手順を決める

  月1回など、データ（例：Table EditorからCSVエクスポート）を控える
• 個人情報の同意文言

  フォーム・紙の用紙に「掲載・利用について」の一文と、掲載可否のチェック欄を入れる
• Git衛生：履歴に鍵・個人情報が残っていないか必須

  ①.env・credentials系が.gitignoreに入っているか（そもそも秘密ファイルを作らない構成が最善）②過去のコミット履歴に鍵が残っていないか（.gitignoreに後から足しても履歴には残る）。確認法＝git log --all --name-only --pretty=format: | sort -u（過去の全ファイル）＋git grep -I -i -E 'service_role|secret|password|api[_-]?key' $(git rev-list --all)。見つかったら履歴書き換え（git filter-repo）＋鍵の作り直しが必要（2026-07-15 ゆき指摘で追加）
• セキュリティヘッダが出ているか確認必須

  デプロイ後に curl -I https://自分のサイト を実行し、CSP・X-Frame-Options・nosniff・HSTS が並んでいるか目視。CSPを入れた直後は、外部埋め込み（YouTube・音源）・保存・通知を実際に触って動作確認する（許可漏れは静かに止まるため）

C ｜ スマホの読みやすさ（モバイルUI）

• 本文は16px以上必須

  iOS標準17・Material16。読み物の本文が小さいと離脱する。年配の方が対象なら特に大きめに
• フォーム入力は16px以上必須

  16px未満だと iPhone Safari が入力時に勝手にズームして操作しづらくなる
• 補助・キャプション文字も12px以上

  日付・注記・タグなど。11px以下は使わない（読めない）
• タップできる要素は44×44px以上

  ボタン・リンク・チェック。小さいと押し間違える（余白＝paddingで確保）
• 文字色のコントラスト 4.5:1 以上

  薄いグレー文字に注意。年配の方には特に濃いめに
• 行間は1.5前後以上

  日本語・年配向けは広めが読みやすい
• 横スクロールが出ない

  画面幅に収まる。表やコードは、その中だけ横スクロールさせて本文は動かさない
• スマホ実機で確認必須

  iPhone / Android の実機で、文字サイズ・崩れ・押しやすさを最後に必ず目視