見出し画像

Google Chrome を例に Cookie の値を取得する方法を解説

え１７う｜Web4.0

以下の手順では、Google Chrome を例に Cookie の値を取得する方法を解説します。他のブラウザでも概ね同様の手順で確認できるため、参考にしてください。また、Cookieの値はサイトへのログイン情報などを含む場合があるため、第三者に不用意に共有しないようご注意ください。

1. Cookie を取得するための事前準備

1. Cookieが必要なWebサービスにログインする
• 「note」など、Cookie を取得したいサービスのログインが必要な場合は、事前にログインしておきます。
• ログインすることで、ブラウザに必要な Cookie が設定されます。
2. 対象ページを開いた状態でデベロッパーツール（開発者ツール）を起動する
• Chrome ブラウザであれば、ショートカットキー「F12」または「Ctrl + Shift + I (Windows)」/「Command + Option + I (Mac)」で開発者ツールを起動できます。
• 開発者ツールを起動したら、上部タブの「Application」を選択してください。

2. Cookie の確認方法

1. Application タブの「Storage」→「Cookies」を選択
• 「Application」タブの左メニューにある「Storage」または「Cookies」という項目を選びます。
• 展開すると、ドメインごとに Cookie が一覧表示されます。
2. 対象のドメインを選択して Cookie の一覧を確認
• 取得したい Web サービス（たとえば note.com など）のドメインを探し、クリックします。
• 右側に Cookie の「Name（キー）」と「Value（値）」の一覧が表示されます。
3. 必要なCookieの値をコピーする
• 今回の例では以下の Cookie が必要になります。
• _note_session_v5
• XSRF-TOKEN
• fp_editor
• vid_editor
• vid_note
• 上記に該当する Cookie を一覧から探し、「Value」欄をコピーします。
• Cookie 名が変化している場合や追加の Cookie が必要な場合は、マニュアルに合わせて取得してください。

3. Cookieの値をソースコードに反映する

1. ソースコード中のCookie情報を貼り付ける部分を探す
// ---- (A) Cookie情報の準備 --------------------------------------

というコメントがある行の下にある、cookieMap というオブジェクトにCookieの値を貼り付けます。
2. 取得した Cookie の値を貼り付ける

const cookieMap = {
  '_note_session_v5': 'ここに _note_session_v5 の値を貼り付ける',
  'XSRF-TOKEN': 'ここに XSRF-TOKEN の値を貼り付ける',
  "fp_editor": "ここに fp_editor の値を貼り付ける",
  "vid_editor": "ここに vid_editor の値を貼り付ける",
  "vid_note": "ここに vid_note の値を貼り付ける"
};

• 「Value」欄からコピーした文字列を、シングルクォートまたはダブルクォートの中に正確に貼り付けます。
• コード内で改行や不要なスペースが入らないように注意しながら貼り付けてください。

3. その他のCookieも同様に設定
• 必要であれば、取得した Cookie が増えた場合は、同じ形式でオブジェクトにキーと値を追加してください。

4. セキュリティ上の注意点

1. Cookieの値は機密情報
• Cookie にはユーザーセッションを識別する情報が含まれることが多いため、取り扱いには十分注意してください。
• 第三者に Cookie を渡すと、あなたのアカウント情報が不正に使用されるリスクがあります。
2. ソースコードの管理
• ローカルで管理するソースコードへの貼り付けであっても、Git などで公開リポジトリにアップロードしないようにしてください。

5. まとめ

• Cookieの取得は開発者ツールの「Application」→「Cookies」で行う。
• Cookieの「Name」(キー) と「Value」（値）のうち、必要な Value をコピーしてソースコードに貼り付ける。
• Cookie は機密情報なので、公開や共有には十分注意する。

上記の手順を踏むことで、質問文にある cookieMap オブジェクトに正しい Cookie 情報を設定できます。ソースコードを実行する際は、Cookie の期限やログイン状態にも依存しますので、定期的に Cookie を更新する必要がある点も念頭に置いて作業を進めてください。

いいなと思ったら応援しよう！