Q&A
JavascriptでCookieの発行を行いたいです。
useridをCookieに付与し、有効期限をアクセスから３ヶ月間にしたいです。
またそのユーザーがボタンA・BをクリックしたかもCookieに反映させたいです。
tmpフォルダを作ってその中にa.htmlとa.js を入れました。
a.htmlには
<html lang="ja"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <script src="https://cdn.jsdelivr.net/npm/js-cookie@2/src/js.cookie.min.js"></script> <script type="text/javascript" src="a.js"></script> </head> <body> <button type="button" name="a" value="a"> <font size="2">ボタンA</font> </button> <button type="button" name="b" value="b"> <font size="2">ボタンB</font> </button> </body> </html>
と書きました。
a.jsには
document.cookie = "key=value";
と最低限の設定しか書いていません。
目的のCookieを発行するためにはどういうjavascriptを書けば良いでしょうか？
またCookieで得た情報をサーバーサイドに送りたい場合はJSON形式で送るのが良いのでしょうか？Cookieに含まれる情報が個人情報が多いので、どう送るのが安全か知りたいです。
参考にした情報は
https://yukimonkey.com/data/cookie/
https://developer.mozilla.org/ja/docs/Web/HTTP/Cookies
です。
回答1件
0
ベストアンサー
そのユーザーがボタンA・Bをクリックしたか
「そのブラウザがボタンA・Bをクリックしたか」であれば問題ないのですが、
特定のユーザを絡める場合はセッションを利用してください。
目的のCookieを発行するためにはどういうどういうjavascriptを書けば良いでしょうか？
参考にされたページにも例示されています。
応答ヘッダである Set-Cookie 参考に「ディレクティブに従った文字列」をJavaScriptで作ることになります
（HTTP Cookieの使用にあるように、本来は サーバー-ブラウザ間で行われるHTTP通信のヘッダでやり取りされる情報が Cookie です）。
Cookieに含まれる情報が個人情報が多いので
Cookie に個人情報を含めてはいけません。
参考にされたサイト(１つ目）にあるように、Cookie情報は検証ツールで表示できますので安全とは言えません。
ブラウザのJavaScriptでCookieを扱う場合、含める情報は他のユーザとも共用されても問題のない情報に留めるべきです。
Cookieで得た情報をサーバーサイドに送りたい場合はJSON形式で送るのが良いのでしょうか？
ブラウザの JavaScriptで扱うCookieは、同一ブラウザを複数名で利用するケースにも対応した共用される情報のはずです。このようなケースでJSONを送信する必要はないはずです。
セッションの概念
Cookie は便利だけど危険。でも、個人情報と紐付いた重要情報を扱いたいよね。ということで、サーバー側に重要情報を保存し、ブラウザにはその重要情報を問い合わせるユニークな合言葉（セッションID）だけを保存する手法です。
- 重要情報（個人情報など）を POST
- サーバー側で重要情報を管理し、接続してきたブラウザにセッションIDをCookie発行（応答）
httpOnlyディレクティブを含めて応答することで、セッションIDを抜き取る「セッションハイジャック」を防止できるようになり安全性が高まっています（secureも併用することが推奨される）。
追記
CODEPEN Cookie操作（ブラウザ側JavaScript）
HTTP で確認可能な基本ディレクティブ（Cookie名、値、期限）のみを扱うサンプル
（HTTPS に限って利用できるディレクティブもあり、無効なフォーマットの場合はブラウザに記録されません）
XHRのデフォルトは要求ヘッダフィールド Cookie: を含めない形でリクエストします
（Cookie:を含めてサーバー問い合わせする場合、withCredentials の指定が必要）。
投稿2020/10/28 10:53
編集2020/10/31 09:04
総合スコア5434
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。