CINXE.COM

<!DOCTYPE html><html lang="ja"><head><meta charSet="utf-8"/><meta content="width=device-width, initial-scale=1" name="viewport"/><title>クッキーとセッションを雰囲気で使っているエンジニアが、違いを説明できるようになる記事</title><link rel="canonical" href="https://zenn.dev/collabostyle/articles/8949e8db686263"/><meta name="twitter:card" content="summary_large_image"/><meta property="og:url" content="https://zenn.dev/collabostyle/articles/8949e8db686263"/><meta property="og:title" content="クッキーとセッションを雰囲気で使っているエンジニアが、違いを説明できるようになる記事"/><meta property="og:image" content="https://res.cloudinary.com/zenn/image/upload/s--J0Bytc0b--/c_fit%2Cg_north_west%2Cl_text:notosansjp-medium.otf_55:%25E3%2582%25AF%25E3%2583%2583%25E3%2582%25AD%25E3%2583%25BC%25E3%2581%25A8%25E3%2582%25BB%25E3%2583%2583%25E3%2582%25B7%25E3%2583%25A7%25E3%2583%25B3%25E3%2582%2592%25E9%259B%25B0%25E5%259B%25B2%25E6%25B0%2597%25E3%2581%25A7%25E4%25BD%25BF%25E3%2581%25A3%25E3%2581%25A6%25E3%2581%2584%25E3%2582%258B%25E3%2582%25A8%25E3%2583%25B3%25E3%2582%25B8%25E3%2583%258B%25E3%2582%25A2%25E3%2581%258C%25E3%2580%2581%25E9%2581%2595%25E3%2581%2584%25E3%2582%2592%25E8%25AA%25AC%25E6%2598%258E%25E3%2581%25A7%25E3%2581%258D%25E3%2582%258B%25E3%2582%2588%25E3%2581%2586%25E3%2581%25AB%25E3%2581%25AA%25E3%2582%258B%25E8%25A8%2598%25E4%25BA%258B%2Cw_1010%2Cx_90%2Cy_100/g_south_west%2Cl_text:notosansjp-medium.otf_34:MESI%2Cx_220%2Cy_108/bo_3px_solid_rgb:d6e3ed%2Cg_south_west%2Ch_90%2Cl_fetch:aHR0cHM6Ly9zdG9yYWdlLmdvb2dsZWFwaXMuY29tL3plbm4tdXNlci11cGxvYWQvYXZhdGFyLzViM2I3NTQxYzUuanBlZw==%2Cr_20%2Cw_90%2Cx_92%2Cy_102/co_rgb:6e7b85%2Cg_south_west%2Cl_text:notosansjp-medium.otf_30:%25E3%2582%25B3%25E3%2583%25A9%25E3%2583%259C%25E3%2582%25B9%25E3%2582%25BF%25E3%2582%25A4%25E3%2583%25AB%2520Developers%2Cx_220%2Cy_160/bo_4px_solid_white%2Cg_south_west%2Ch_50%2Cl_fetch:aHR0cHM6Ly9saDMuZ29vZ2xldXNlcmNvbnRlbnQuY29tL2EvQUdObXl4WU9Qa2tIeEJCcWlvWjFvSzNwOG96LUZleXZvMGhfT2RpM0tsalNwMG89czk2LWM=%2Cr_max%2Cw_50%2Cx_139%2Cy_84/v1627283836/default/og-base-w1200-v2.png"/><meta property="og:type" content="article"/><meta property="og:site_name" content="Zenn"/><meta content="https://lh3.googleusercontent.com/a/AGNmyxYOPkkHxBBqioZ1oK3p8oz-Feyvo0h_Odi3KljSp0o=s96-c" name="zenn:image"/><meta content="MESIさんによる記事" name="zenn:description"/><meta name="next-head-count" content="12"/><script nonce="6mJefGFOGa3GG0jrqdhRyZ4vsNEr/p8TRsydaQXH2I8=">var theme = localStorage.getItem('theme') || 'light'; window.document.documentElement.dataset.theme = theme;</script><script nonce="6mJefGFOGa3GG0jrqdhRyZ4vsNEr/p8TRsydaQXH2I8=">var newDataLayer = {}; // display_modeを追加 if (window.matchMedia('(display-mode: standalone)').matches) { newDataLayer.display_mode = 'standalone'; // PWA } else if (window.navigator.standalone === true) { newDataLayer.display_mode = 'standalone'; // PWA on iOS Safari } else { newDataLayer.display_mode = 'browser'; // Web } // user_idを追加 // ページ初期化時に取得したいため、ローカルストレージからcachedUser.idを取得する var zennCurrentUserValue = localStorage.getItem('zenn_current_user'); if (zennCurrentUserValue) { try { var currentUser = JSON.parse(zennCurrentUserValue); if (currentUser.cachedUser) { newDataLayer.user_id = currentUser.cachedUser.id; } } catch {} } window.dataLayer = window.dataLayer || []; window.dataLayer.push(newDataLayer);</script><script nonce="6mJefGFOGa3GG0jrqdhRyZ4vsNEr/p8TRsydaQXH2I8=">(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start': new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0], j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src= 'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f); })(window,document,'script','dataLayer','GTM-K42DRM8');</script><script async="" src="https://www.googletagmanager.com/gtag/js" nonce="6mJefGFOGa3GG0jrqdhRyZ4vsNEr/p8TRsydaQXH2I8="></script><script nonce="6mJefGFOGa3GG0jrqdhRyZ4vsNEr/p8TRsydaQXH2I8=">window.dataLayer = window.dataLayer || []; function gtag(){dataLayer.push(arguments);} gtag('js', new Date());</script><script src="https://embed.zenn.studio/js/listen-embed-event.js" nonce="6mJefGFOGa3GG0jrqdhRyZ4vsNEr/p8TRsydaQXH2I8="></script><style nonce="6mJefGFOGa3GG0jrqdhRyZ4vsNEr/p8TRsydaQXH2I8="> @font-face { font-family: 'Inter'; font-weight: 600; font-display: swap; src: local(''), url('https://static.zenn.studio/fonts/inter-v3-latin-600.woff2') format('woff2'); } @font-face { font-family: 'Inter'; font-weight: 700; font-display: swap; src: local(''), url('https://static.zenn.studio/fonts/inter-v3-latin-700.woff2') format('woff2'); }</style><meta content="Zenn" name="apple-mobile-web-app-title"/><link href="/manifest.json" rel="manifest"/><link href="https://static.zenn.studio/images/logo-transparent.png" rel="shortcut icon" type="image/png"/><link href="https://static.zenn.studio/images/icon.png" rel="apple-touch-icon-precomposed" type="image/png"/><link nonce="6mJefGFOGa3GG0jrqdhRyZ4vsNEr/p8TRsydaQXH2I8=" rel="preload" href="https://static.zenn.studio/_next/static/css/a6c53c418ae5538e.css" as="style"/><link nonce="6mJefGFOGa3GG0jrqdhRyZ4vsNEr/p8TRsydaQXH2I8=" rel="stylesheet" href="https://static.zenn.studio/_next/static/css/a6c53c418ae5538e.css" data-n-g=""/><link nonce="6mJefGFOGa3GG0jrqdhRyZ4vsNEr/p8TRsydaQXH2I8=" rel="preload" href="https://static.zenn.studio/_next/static/css/d118ea5137a96514.css" as="style"/><link nonce="6mJefGFOGa3GG0jrqdhRyZ4vsNEr/p8TRsydaQXH2I8=" rel="stylesheet" href="https://static.zenn.studio/_next/static/css/d118ea5137a96514.css" data-n-p=""/><link nonce="6mJefGFOGa3GG0jrqdhRyZ4vsNEr/p8TRsydaQXH2I8=" rel="preload" href="https://static.zenn.studio/_next/static/css/14917136769e9a98.css" as="style"/><link nonce="6mJefGFOGa3GG0jrqdhRyZ4vsNEr/p8TRsydaQXH2I8=" rel="stylesheet" href="https://static.zenn.studio/_next/static/css/14917136769e9a98.css"/><link nonce="6mJefGFOGa3GG0jrqdhRyZ4vsNEr/p8TRsydaQXH2I8=" rel="preload" href="https://static.zenn.studio/_next/static/css/67eadf5528f6e909.css" as="style"/><link nonce="6mJefGFOGa3GG0jrqdhRyZ4vsNEr/p8TRsydaQXH2I8=" rel="stylesheet" href="https://static.zenn.studio/_next/static/css/67eadf5528f6e909.css"/><link nonce="6mJefGFOGa3GG0jrqdhRyZ4vsNEr/p8TRsydaQXH2I8=" rel="preload" href="https://static.zenn.studio/_next/static/css/ab8ffe1c9e1cc716.css" as="style"/><link nonce="6mJefGFOGa3GG0jrqdhRyZ4vsNEr/p8TRsydaQXH2I8=" rel="stylesheet" href="https://static.zenn.studio/_next/static/css/ab8ffe1c9e1cc716.css"/><link nonce="6mJefGFOGa3GG0jrqdhRyZ4vsNEr/p8TRsydaQXH2I8=" rel="preload" href="https://static.zenn.studio/_next/static/css/d0e785ee00712d93.css" as="style"/><link nonce="6mJefGFOGa3GG0jrqdhRyZ4vsNEr/p8TRsydaQXH2I8=" rel="stylesheet" href="https://static.zenn.studio/_next/static/css/d0e785ee00712d93.css"/><noscript data-n-css="6mJefGFOGa3GG0jrqdhRyZ4vsNEr/p8TRsydaQXH2I8="></noscript><script defer="" nonce="6mJefGFOGa3GG0jrqdhRyZ4vsNEr/p8TRsydaQXH2I8=" nomodule="" src="https://static.zenn.studio/_next/static/chunks/polyfills-42372ed130431b0a.js"></script><script defer="" src="https://static.zenn.studio/_next/static/chunks/903.c622fb39b8407e6c.js" nonce="6mJefGFOGa3GG0jrqdhRyZ4vsNEr/p8TRsydaQXH2I8="></script><script defer="" src="https://static.zenn.studio/_next/static/chunks/5131-eee37f4047bda7b2.js" nonce="6mJefGFOGa3GG0jrqdhRyZ4vsNEr/p8TRsydaQXH2I8="></script><script src="https://static.zenn.studio/_next/static/chunks/webpack-b8ac7bc6919f5124.js" nonce="6mJefGFOGa3GG0jrqdhRyZ4vsNEr/p8TRsydaQXH2I8=" defer=""></script><script src="https://static.zenn.studio/_next/static/chunks/framework-6603b6fce1ea64cf.js" nonce="6mJefGFOGa3GG0jrqdhRyZ4vsNEr/p8TRsydaQXH2I8=" defer=""></script><script src="https://static.zenn.studio/_next/static/chunks/main-2fb7d839e5bb90ea.js" nonce="6mJefGFOGa3GG0jrqdhRyZ4vsNEr/p8TRsydaQXH2I8=" defer=""></script><script src="https://static.zenn.studio/_next/static/chunks/pages/_app-3f11decb4f1a7920.js" nonce="6mJefGFOGa3GG0jrqdhRyZ4vsNEr/p8TRsydaQXH2I8=" defer=""></script><script src="https://static.zenn.studio/_next/static/chunks/5625-25fd02b61ddb8be0.js" nonce="6mJefGFOGa3GG0jrqdhRyZ4vsNEr/p8TRsydaQXH2I8=" defer=""></script><script src="https://static.zenn.studio/_next/static/chunks/327-4a46c0c9d0f704da.js" nonce="6mJefGFOGa3GG0jrqdhRyZ4vsNEr/p8TRsydaQXH2I8=" defer=""></script><script src="https://static.zenn.studio/_next/static/chunks/755-bff961df2e6f1d32.js" nonce="6mJefGFOGa3GG0jrqdhRyZ4vsNEr/p8TRsydaQXH2I8=" defer=""></script><script src="https://static.zenn.studio/_next/static/chunks/2673-214c47a84d31dc38.js" nonce="6mJefGFOGa3GG0jrqdhRyZ4vsNEr/p8TRsydaQXH2I8=" defer=""></script><script src="https://static.zenn.studio/_next/static/chunks/3008-d4936fa749de4c75.js" nonce="6mJefGFOGa3GG0jrqdhRyZ4vsNEr/p8TRsydaQXH2I8=" defer=""></script><script src="https://static.zenn.studio/_next/static/chunks/4779-fd0d2d1f9ae5b285.js" nonce="6mJefGFOGa3GG0jrqdhRyZ4vsNEr/p8TRsydaQXH2I8=" defer=""></script><script src="https://static.zenn.studio/_next/static/chunks/pages/%5Busername%5D/articles/%5Bslug%5D-7b7a5f841c87f94b.js" nonce="6mJefGFOGa3GG0jrqdhRyZ4vsNEr/p8TRsydaQXH2I8=" defer=""></script><script src="https://static.zenn.studio/_next/static/JFva1bnwE3BmljxDNULL3/_buildManifest.js" nonce="6mJefGFOGa3GG0jrqdhRyZ4vsNEr/p8TRsydaQXH2I8=" defer=""></script><script src="https://static.zenn.studio/_next/static/JFva1bnwE3BmljxDNULL3/_ssgManifest.js" nonce="6mJefGFOGa3GG0jrqdhRyZ4vsNEr/p8TRsydaQXH2I8=" defer=""></script></head><body><script nonce="6mJefGFOGa3GG0jrqdhRyZ4vsNEr/p8TRsydaQXH2I8=">const shouldUseTwemoji = !/(googlebot|macintosh|macintel|macppc|mac68k|macos|iphone|ipad)/i.test(window.navigator.userAgent); if(shouldUseTwemoji) document.body.setAttribute("data-use-twemoji", "true");</script><div id="__next"><header class="AppHeader_header__54XdE"><div class="Container_wide__ykGLh Container_common__figYY"><div class="AppHeader_inner__CJC4C"><a class="ZennLogo_logoLink__NJS2l" href="/"><svg x="0px" y="0px" viewBox="0 0 377.4 88.3" aria-label="Zenn | エンジニアのための情報共有コミュニティ" class="ZennLogo_logoSvg__yOhcg" height="22"><title>Zenn</title><g fill="currentColor"><path d="M233,56.8h-39c0.5,3.5,2.2,6.8,4.8,9.2c2.7,2.3,6.2,3.5,9.8,3.4c2.8,0,5.6-0.5,8.2-1.7c2.5-1.1,4.8-2.8,6.5-5l8.2,9.5 c-2.5,3.4-5.7,6.1-9.5,7.9c-4.6,2.2-9.6,3.3-14.7,3.2c-5.7,0.1-11.4-1.2-16.5-4c-4.5-2.5-8.2-6.3-10.7-10.9s-3.8-9.8-3.7-15.1v-2.2 c-0.1-5.7,1.1-11.3,3.5-16.5c2.2-4.7,5.7-8.6,10.1-11.3c4.7-2.8,10.1-4.2,15.5-4.1c5.2-0.1,10.3,1.1,14.9,3.7 c4.1,2.5,7.4,6.2,9.4,10.5c2.2,5.1,3.3,10.5,3.2,16.1V56.8z M216.1,43.9c0.1-2.9-0.9-5.7-2.8-7.9c-1.8-1.9-4.4-2.9-7.9-2.9 c-2.9-0.1-5.8,1.1-7.7,3.2c-2,2.6-3.3,5.7-3.6,9h22V43.9z"></path><path d="M128.3,67.9h36.1v14.7h-56.9V72l35.8-54.3h-36.2V2.9h56.6v10.4L128.3,67.9z"></path><path d="M248.8,50.7c0-19.1,12.7-29.2,28.2-29.2s27.9,10.1,27.9,29.2V82h-16V51.4c0-10.6-4.8-16.1-12-16.1s-12.4,5.5-12.4,16.1 v30.7h-15.8L248.8,50.7L248.8,50.7z"></path><path d="M320.3,50.7c0-19.1,12.7-29.2,28.2-29.2s27.9,10.1,27.9,29.2V82h-16V51.4c0-10.6-4.8-16.1-12-16.1S336,40.8,336,51.4v30.7 h-15.8L320.3,50.7L320.3,50.7z"></path></g><path fill="#3EA8FF" class="st0" d="M2.4,83.3h17c0.9,0,1.7-0.5,2.2-1.2L68.4,5.2C69,4.2,68.3,3,67.1,3H51c-0.8,0-1.5,0.4-1.9,1.1L1.6,81.9 C1.3,82.5,1.7,83.3,2.4,83.3z"></path><path fill="#3EA8FF" class="st0" d="M61,82.1l22.1-35.5c0.7-1.1-0.1-2.5-1.4-2.5H65.7c-0.6,0-1.2,0.3-1.5,0.8L41.5,81.2c-0.6,0.9,0.1,2.1,1.2,2.1 h16.3C59.8,83.3,60.6,82.9,61,82.1z"></path></svg></a></div></div></header><article class="View_container__VQuzA"><aside class="ContentStickyNavForMobile_container__153a8"><div class="Container_wide__ykGLh Container_common__figYY"><div class="ContentStickyNavForMobile_inner__xJ_fS"><div class="ContentStickyNavForMobile_avatarInner__3_noS"><a class="ContentStickyNavForMobile_principalLink__c15vw" href="/p/collabostyle"><span class="ContentStickyNavForMobile_avatarContainer__V3P_G"><img alt="コラボスタイル Developers" class="AvatarImage_border__pDIjF AvatarImage_plain__Fgp4R AvatarImage_withPublication__hNtIe" height="38" referrerPolicy="no-referrer" src="https://storage.googleapis.com/zenn-user-upload/avatar/5b3b7541c5.jpeg" width="38"/></span><span class="ContentStickyNavForMobile_displayName__cmEag">コラボスタイル Developers</span></a></div><div class="ContentStickyNavForMobile_actions__a9fMk"></div></div></div></aside><div class="PublicationInfoForDesktop_container__UxKig"><div class="Container_wide__ykGLh Container_common__figYY"><div class="PublicationInfoForDesktop_inner__LnToC"><a class="PublicationInfoForDesktop_link__fqxgJ" href="/p/collabostyle"><span class="PublicationInfoForDesktop_avatar__qh_yu"><img alt="" class="AvatarImage_border__pDIjF AvatarImage_plain__Fgp4R AvatarImage_withPublication__hNtIe" height="45" referrerPolicy="no-referrer" src="https://storage.googleapis.com/zenn-user-upload/avatar/5b3b7541c5.jpeg" width="45"/></span><span class="PublicationInfoForDesktop_displayName__nzipD">コラボスタイル Developers</span></a><span class="PublicationInfoForDesktop_label__d4mY3"><a class="PublicationLabelLink_link__JBqs2" href="/faq#what-is-publication">Publicationへの投稿</a></span></div></div></div><header class="ArticleHeader_header__IRbtk"><div class="Container_wide__ykGLh Container_common__figYY"><div class="ArticleHeader_main__W98WY"><div class="ArticleHeader_emoji__30JiU"><span class="Emoji_twemoji__hcxYF"><span class="Emoji_twemojiImg__Oc6vR" style="background-image:url(https://asia-northeast1-zenn-dev-production.cloudfunctions.net/twemoji/🍪.svg)"></span></span><span class="Emoji_nativeEmoji__GMBzX">🍪</span></div><h1 class="ArticleHeader_title__9jiOv"><span style="font-size:0.832em">クッキーとセッションを雰囲気で使っているエンジニアが、違いを説明できるようになる記事</span></h1><div class="ArticleHeader_metaContainer__5UzrJ"><div class="ArticleHeader_metaInfo__XrRdh"><div class="ArticleHeader_userInfo__g_sSW"><a class="ArticleHeader_avatar__anCEE" href="/mesi"><img alt="" class="AvatarImage_plain__Fgp4R " height="25" loading="lazy" referrerPolicy="no-referrer" src="https://lh3.googleusercontent.com/a/AGNmyxYOPkkHxBBqioZ1oK3p8oz-Feyvo0h_Odi3KljSp0o=s96-c" width="25"/></a><a class="ArticleHeader_metaUserName__FbZgW" href="/mesi">MESI</a></div><span class="ArticleHeader_pubDate__gF_sc"><span class="ArticleHeader_num__7Zpz0">2025/01/17</span>に公開</span><a class="ArticleHeader_commentsLink__QKD9j" href="#discuss"><svg viewBox="0 0 27 27" height="16" width="16"><path fill="currentColor" d="M5.9,25.3a1.27,1.27,0,0,1-.6-.1,1.68,1.68,0,0,1-.9-1.3V18.8a8.53,8.53,0,0,1-2.2-6.4C2.2,6.5,6.9,2.3,13.5,2.3S24.8,6.6,24.8,12.4,20,22.6,13.5,22.6a6.36,6.36,0,0,1-2.5-.3L6.7,25A1.6,1.6,0,0,1,5.9,25.3ZM13.5,4.7c-5.2,0-8.8,3.2-8.8,7.7,0,2.4.5,3.7,1.8,5a1.09,1.09,0,0,1,.4.9V22l3.3-2.1a1.38,1.38,0,0,1,1.1-.1,4.49,4.49,0,0,0,2.3.4c5.2,0,8.8-3.2,8.8-7.7S18.7,4.7,13.5,4.7Z"></path></svg><span class="ArticleHeader_num__7Zpz0">3件</span></a></div></div></div></div></header><div class="Container_wide__ykGLh Container_common__figYY"><div class="ContainerUndo_undoInSM__1vdc1"><div class="View_inner__LlCJG"><div class="View_stickyShare__TsaVf"><div class="View_stickyShareInner__FLu2S"><div class="LikeButton_container__YlckE style-large-white count-bottom"><button aria-label="いいね" class="LikeButton_button__ZwdG4" data-pressed="false"><svg class="LikeButton_svgLike__Gl0Sz" viewBox="0 0 110 110"><path class="LikeButton_svgLikeLine__f9txR" d="M73,24a23.78,23.78,0,0,0-15.89,6.19,3.14,3.14,0,0,1-4.18,0A23.81,23.81,0,0,0,37,24a22,22,0,0,0-22,22c0,16.67,19.64,32.82,25.11,37.93,2.84,2.65,6.15,5.64,8.92,8.13a8.9,8.9,0,0,0,11.9,0c2.77-2.49,6.07-5.48,8.91-8.13C75.37,78.81,95,62.66,95,46A22,22,0,0,0,73,24Z" fill="currentColor"></path><path class="LikeButton_svgLikeInner__uiexS" d="M66.25,76.42c-.71.64-1.32,1.2-1.82,1.67-2.51,2.33-5.39,5-7.94,7.25a2.21,2.21,0,0,1-3,0C51,83,48.1,80.42,45.59,78.09c-.5-.47-1.12-1-1.82-1.67C38.09,71.29,23,57.67,23,46A14,14,0,0,1,37,32a15.92,15.92,0,0,1,11.65,5.23l4.73,5a2.2,2.2,0,0,0,3.23,0l4.72-5A16.06,16.06,0,0,1,73,32,14,14,0,0,1,87,46C87,57.67,71.93,71.29,66.25,76.42Z" fill="currentColor"></path><g class="LikeButton_svgLikeDecoration__78UjB"><circle cx="41.5" cy="9.5" fill="#3ea8ff" r="3.5"></circle><circle cx="98.5" cy="26.5" fill="#ffdc6e" r="3.5"></circle><circle cx="13" cy="19" fill="#c067f4" r="5"></circle><circle cx="77" cy="9" fill="#f76685" r="5"></circle><circle cx="26.5" cy="92.5" fill="#f76685" r="3.5"></circle><circle cx="105.5" cy="48.5" fill="#c067f4" r="3.5"></circle><circle cx="4.5" cy="60.5" fill="#3ea8ff" r="3.5"></circle><circle cx="94.5" cy="73.5" fill="#3ea8ff" r="1.5"></circle><circle cx="16.5" cy="75.5" fill="#ffdc6e" r="1.5"></circle><circle cx="78.5" cy="91.5" fill="#ffdc6e" r="1.5"></circle></g></svg></button></div><span style="display:block;height:1rem;flex-shrink:0"></span><span style="display:block;height:1rem;flex-shrink:0"></span><div class="ShareButtonsExperimental_container__CrtBj" style="flex-direction:column;align-items:stretch"><a aria-label="X(Twitter)にポスト" class="ShareButtonsExperimental_button__d9aXF ShareButtonsExperimental_svgTwitterVertical__NmmfB ShareButtonsExperimental_svgTwitterBase__8FrNq" data-tooltip-for-desktop="true" data-tooltip-position="bottom" href="https://twitter.com/intent/tweet?url=https://zenn.dev/collabostyle/articles/8949e8db686263&text=%E3%82%AF%E3%83%83%E3%82%AD%E3%83%BC%E3%81%A8%E3%82%BB%E3%83%83%E3%82%B7%E3%83%A7%E3%83%B3%E3%82%92%E9%9B%B0%E5%9B%B2%E6%B0%97%E3%81%A7%E4%BD%BF%E3%81%A3%E3%81%A6%E3%81%84%E3%82%8B%E3%82%A8%E3%83%B3%E3%82%B8%E3%83%8B%E3%82%A2%E3%81%8C%E3%80%81%E9%81%95%E3%81%84%E3%82%92%E8%AA%AC%E6%98%8E%E3%81%A7%E3%81%8D%E3%82%8B%E3%82%88%E3%81%86%E3%81%AB%E3%81%AA%E3%82%8B%E8%A8%98%E4%BA%8B%EF%BD%9CMESI&hashtags=zenn" id="gtm-article-left-tweet" rel="nofollow noopener noreferrer" role="tooltip" target="_blank"><svg width="27" height="28" viewBox="0 0 27 28" fill="none"><g clip-path="url(#clip0_1_18)"><path d="M16.0687 11.7356L26.12 0H23.7382L15.0106 10.1899L8.03988 0H0L10.5411 15.4089L0 27.7155H2.38199L11.5985 16.9546L18.9601 27.7155H27L16.0681 11.7356H16.0687ZM12.8062 15.5447L11.7382 14.0103L3.24025 1.80106H6.89884L13.7568 11.6543L14.8248 13.1887L23.7393 25.9963H20.0807L12.8062 15.5452V15.5447Z" fill="currentColor"></path></g><defs><clipPath id="clip0_1_18"><rect width="27" height="27.7297" fill="white"></rect></clipPath></defs></svg></a><a aria-label="Facebookに投稿" class="ShareButtonsExperimental_button__d9aXF ShareButtonsExperimental_svgFacebookVertical__3ykb7 ShareButtonsExperimental_svgFacebookBase___gDOW" data-tooltip-for-desktop="true" data-tooltip-position="bottom" href="http://www.facebook.com/sharer.php?u=https://zenn.dev/collabostyle/articles/8949e8db686263" id="gtm-article-left-facebook" rel="nofollow noopener noreferrer" role="tooltip" target="_blank"><svg width="28" height="29" viewBox="0 0 28 29" fill="none"><g clip-path="url(#clip0_2_21)"><path d="M28 14.7812C28 7.02084 21.7319 0.729736 14 0.729736C6.26808 0.729736 0 7.02084 0 14.7812C0 21.3707 4.52032 26.9002 10.6182 28.4189V19.0753H7.73136V14.7812H10.6182V12.9309C10.6182 8.14833 12.7747 5.93158 17.453 5.93158C18.34 5.93158 19.8705 6.10637 20.4966 6.28061V10.1729C20.1662 10.138 19.5922 10.1206 18.8793 10.1206C16.5838 10.1206 15.6968 10.9935 15.6968 13.2625V14.7812H20.2698L19.4841 19.0753H15.6968V28.7297C22.629 27.8895 28.0006 21.9654 28.0006 14.7812H28Z" fill="currentColor"></path></g><defs><clipPath id="clip0_2_21"><rect width="28" height="28" fill="white" transform="translate(0 0.729736)"></rect></clipPath></defs></svg></a><a aria-label="はてなブックマークに登録" class="ShareButtonsExperimental_button__d9aXF ShareButtonsExperimental_svgHatenaBookmarkVertical__b161J ShareButtonsExperimental_svgHatenaBookmarkBase__VXz6p" data-tooltip-for-desktop="true" data-tooltip-position="bottom" href="https://b.hatena.ne.jp/add?mode=confirm&url=https://zenn.dev/collabostyle/articles/8949e8db686263&title=%E3%82%AF%E3%83%83%E3%82%AD%E3%83%BC%E3%81%A8%E3%82%BB%E3%83%83%E3%82%B7%E3%83%A7%E3%83%B3%E3%82%92%E9%9B%B0%E5%9B%B2%E6%B0%97%E3%81%A7%E4%BD%BF%E3%81%A3%E3%81%A6%E3%81%84%E3%82%8B%E3%82%A8%E3%83%B3%E3%82%B8%E3%83%8B%E3%82%A2%E3%81%8C%E3%80%81%E9%81%95%E3%81%84%E3%82%92%E8%AA%AC%E6%98%8E%E3%81%A7%E3%81%8D%E3%82%8B%E3%82%88%E3%81%86%E3%81%AB%E3%81%AA%E3%82%8B%E8%A8%98%E4%BA%8B%EF%BD%9CMESI" id="gtm-article-left-hatena-bookmark" rel="nofollow noopener noreferrer" role="tooltip" target="_blank"><svg width="27" height="28" viewBox="0 0 27 28" fill="none"><path fill-rule="evenodd" clip-rule="evenodd" d="M5.4999 0.729736H21.5001C24.5376 0.729736 27 3.19213 27 6.22964V22.2298C27 25.2673 24.5376 27.7297 21.5001 27.7297H5.4999C2.46239 27.7297 0 25.2673 0 22.2298V6.22964C0 3.19213 2.46239 0.729736 5.4999 0.729736ZM12.98 13.7472C13.8521 13.8136 14.5319 14.1209 15.0212 14.6673V14.6679C15.512 15.2127 15.7572 15.9444 15.7572 16.8543C15.7572 17.5126 15.62 18.0877 15.3436 18.5867C15.0692 19.084 14.6756 19.4712 14.1604 19.7433C13.7441 19.9658 13.2289 20.1278 12.6155 20.2245C12.001 20.3179 10.9966 20.3665 9.6039 20.3665H6.13656V8.09392H9.50184C10.8859 8.09392 11.8503 8.13875 12.4016 8.22623C12.9503 8.31695 13.4206 8.4703 13.8164 8.68792C14.269 8.93902 14.6129 9.27437 14.8527 9.69341C15.0865 10.1151 15.2069 10.6028 15.2069 11.1546C15.2069 11.8512 15.0309 12.4053 14.6761 12.813C14.3197 13.2261 13.756 13.5355 12.98 13.7472ZM9.96192 10.8144H9.24372H9.24318V13.2768H9.91116C10.7352 13.2768 11.2984 13.1856 11.6073 13.0058C11.9124 12.8227 12.0663 12.5273 12.0663 12.0667C12.0663 11.6061 11.9216 11.2821 11.6375 11.0947C11.3497 10.9084 10.7919 10.8144 9.96192 10.8144ZM10.4128 18.1514C11.2028 18.1514 11.7661 18.0531 12.0928 17.8523V17.8528C12.4227 17.653 12.5863 17.3209 12.5863 16.8581C12.5863 16.3408 12.4367 15.9806 12.1338 15.7765C11.8357 15.5724 11.2747 15.4703 10.463 15.4703H9.24372V18.1514H10.4128ZM19.3093 17.257C18.4502 17.257 17.7547 17.9525 17.7547 18.8111C17.7547 19.6697 18.4507 20.3658 19.3093 20.3658C20.1679 20.3658 20.8634 19.6697 20.8634 18.8111C20.8634 17.9525 20.1668 17.257 19.3093 17.257ZM17.9593 8.09318H20.6593V16.2753H17.9593V8.09318Z" fill="currentColor"></path></svg></a></div></div></div><div class="View_columnsContainer__ijfFN"><section class="View_content__OZ_Dc"><div class="View_main__AU6KW"><div class="Container_default__13H8g Container_common__figYY"><div class="View_topics__2sHkl"><a class="View_topicLink__jdtX_" href="/topics/web"><div class="View_topicImage__qMmmw"><img class="View_topicImg__TpkV5" loading="lazy" src="https://storage.googleapis.com/zenn-user-upload/topics/bb6b2477a6.jpeg"/></div><div class="View_topicName____nYp">Web</div></a><a class="View_topicLink__jdtX_" href="/topics/session"><div class="View_topicImage__qMmmw"><img class="View_topicImg__TpkV5" loading="lazy" src="https://zenn.dev/images/topic.png"/></div><div class="View_topicName____nYp">session</div></a><a class="View_topicLink__jdtX_" href="/topics/cookie"><div class="View_topicImage__qMmmw"><img class="View_topicImg__TpkV5" loading="lazy" src="https://storage.googleapis.com/zenn-user-upload/topics/2ed80b27d0.png"/></div><div class="View_topicName____nYp">cookie</div></a><a class="View_topicLink__jdtX_" href="/tech-or-idea"><div class="View_topicImage__qMmmw"><img class="View_topicImg__TpkV5" loading="lazy" src="https://static.zenn.studio/images/drawing/tech-icon.svg"/></div><div class="View_topicName____nYp" style="text-transform:capitalize">tech</div></a></div><div class="InsertButtonToCodeBlock_insertButtonWrapper__ueql2"><div class="znc BodyContent_anchorToHeadings__uGxNv"><p data-line="0" class="code-line">どうもお疲れ様です。MESIです。</p> <p data-line="2" class="code-line">Web系のエンジニアをやっていると普段からクッキーやらセッションやらを使うことになると思います。<br> 皆さんの職場でも、こんな言葉を耳にするのではないでしょうか。</p> <ul data-line="5" class="code-line"> <li data-line="5" class="code-line">「クッキーに保存しよう」</li> <li data-line="6" class="code-line">「クッキー削除しよう」</li> <li data-line="7" class="code-line">「セッションに保存しよう」</li> <li data-line="8" class="code-line">「セッションが切れた」</li> </ul> <p data-line="10" class="code-line">そこで私のようなよわよわエンジニアはこう思うのです。</p> <p data-line="12" class="code-line"><strong>「クッキーとセッションの違い is 何？」</strong></p> <p data-line="14" class="code-line">今回はそんな私のようなエンジニア向きにクッキーとセッションを説明していきます。</p> <h3 id="%E3%81%9D%E3%82%82%E3%81%9D%E3%82%82%E3%81%AA%E3%81%9C%E3%82%AF%E3%83%83%E3%82%AD%E3%83%BC%E3%82%84%E3%82%89%E3%82%BB%E3%83%83%E3%82%B7%E3%83%A7%E3%83%B3%E3%81%8C%E5%BF%85%E8%A6%81%E3%81%AA%E3%81%AE%E3%81%8B" data-line="16" class="code-line"> <a class="header-anchor-link" href="#%E3%81%9D%E3%82%82%E3%81%9D%E3%82%82%E3%81%AA%E3%81%9C%E3%82%AF%E3%83%83%E3%82%AD%E3%83%BC%E3%82%84%E3%82%89%E3%82%BB%E3%83%83%E3%82%B7%E3%83%A7%E3%83%B3%E3%81%8C%E5%BF%85%E8%A6%81%E3%81%AA%E3%81%AE%E3%81%8B" aria-hidden="true"></a> そもそもなぜクッキーやらセッションが必要なのか</h3> <p data-line="18" class="code-line">そもそもなぜクッキーやセッションは必要なのでしょうか。</p> <p data-line="20" class="code-line"><strong>それはHTTPはステートレスなプロトコルだからです。</strong></p> <h4 id="%E3%82%B9%E3%83%86%E3%83%BC%E3%83%88%E3%83%AC%E3%82%B9%E3%81%A3%E3%81%A6%EF%BC%9F" data-line="22" class="code-line"> <a class="header-anchor-link" href="#%E3%82%B9%E3%83%86%E3%83%BC%E3%83%88%E3%83%AC%E3%82%B9%E3%81%A3%E3%81%A6%EF%BC%9F" aria-hidden="true"></a> ステートレスって？</h4> <p data-line="23" class="code-line">ステートレスは、その名の通り「状態を保持しない」ことを指します。<br> HTTPはサーバーがクライアントの状態を覚えず、毎回新たなリクエストとして処理される仕組みです。</p> <p data-line="26" class="code-line">例えばあなたがハンバーガーショップに出向いたとします。<br> すると通常では以下のようなステートフルなやりとりが行われます。<br> ステートフルなので店(サーバー)は客(クライアント)直前の状態を覚えています。</p> <div class="code-block-container"><pre><code class="code-line" data-line="30">客「ハンバーガーセットをください。」店「サイドメニューは何になさいますか？」客「ポテトで。」店「ドリンクは何にしますか？」客「コーラで。」 </code></pre></div><p data-line="38" class="code-line">一方でもしステートレスなやり取りが行われたらこのようになります。</p> <div class="code-block-container"><pre><code class="code-line" data-line="40">客「ハンバーガーセットをください。」店「サイドメニューは何になさいますか？」客「ハンバーガーセットをポテトでお願いします。」店「ドリンクは何にしますか？」客「ハンバーガーセットをポテトとコーラでお願いします。」 </code></pre></div><p data-line="48" class="code-line">このようにステートフルなやりとりではサーバ(店)がクライアント(客)のそれまでの注文を覚えているのに対してステートレスなやりとりではクライアント(客)は毎回すべての注文を繰り返していますね。</p> <p data-line="50" class="code-line">これがステートレスです。<br> しかしこれではECサイトのような客が何をカートに入れたか覚えていないといけないステートフルが要求されるサイトでは困ってしまいますね。</p> <h3 id="%E3%81%9D%E3%81%93%E3%81%A7%E3%82%AF%E3%83%83%E3%82%AD%E3%83%BC%E3%82%92%E5%88%A9%E7%94%A8%E3%81%99%E3%82%8B" data-line="53" class="code-line"> <a class="header-anchor-link" href="#%E3%81%9D%E3%81%93%E3%81%A7%E3%82%AF%E3%83%83%E3%82%AD%E3%83%BC%E3%82%92%E5%88%A9%E7%94%A8%E3%81%99%E3%82%8B" aria-hidden="true"></a> そこでクッキーを利用する</h3> <p data-line="54" class="code-line">HTTPがステートレスなプロトコルであるため、サーバーはクライアントの状態を覚えておく仕組みがありません。そこでクッキーを利用することで、状態（ユーザーが誰で、どんな操作をしているか）をやり取りできるようにします。</p> <p data-line="56" class="code-line">クッキーはサーバーからクライアント（ブラウザ）に「この情報を保存しておいてね」という形で送られ、次回以降ブラウザからサーバーに自動で送信される小さなテキストデータです。</p> <p data-line="58" class="code-line">例えば、あなたがネットショップを利用するときに「カートにハンバーガーを入れた」ことをサーバーは覚えられません。そこでクッキーに</p> <div class="code-block-container"><pre><code class="code-line" data-line="60">cart=hamburger </code></pre></div><p data-line="63" class="code-line">のような<code>名前=値</code>の組み合わせで構成されたデータを書いておいてもらい、次にページを読み込むとき「このブラウザはcart=hamburgerというクッキーを持っているから、ハンバーガーをカートに入れている人だな」とサーバー側が判断できます。</p> <p data-line="65" class="code-line"><img src="https://storage.googleapis.com/zenn-user-upload/f8acddf27251-20250114.jpg" loading="lazy" class="md-img"></p> <p data-line="67" class="code-line"><img src="https://storage.googleapis.com/zenn-user-upload/f5ef23d7cbff-20250114.jpg" loading="lazy" class="md-img"></p> <p data-line="69" class="code-line">こうすることで、サーバーは「さっきハンバーガーを注文しかけていた人だな」「カートに何が入っているのかな」と認識できるようになります。</p> <h3 id="%E3%82%AF%E3%83%83%E3%82%AD%E3%83%BC%E3%81%AE%E5%8D%B1%E9%99%BA%E6%80%A7%E3%81%AB%E3%81%A4%E3%81%84%E3%81%A6" data-line="71" class="code-line"> <a class="header-anchor-link" href="#%E3%82%AF%E3%83%83%E3%82%AD%E3%83%BC%E3%81%AE%E5%8D%B1%E9%99%BA%E6%80%A7%E3%81%AB%E3%81%A4%E3%81%84%E3%81%A6" aria-hidden="true"></a> クッキーの危険性について</h3> <p data-line="72" class="code-line">これまで学んだクッキーを使うことでログインを実現することができます。</p> <p data-line="74" class="code-line">例えばクッキーに</p> <div class="code-block-container"><pre><code class="code-line" data-line="75">userID=1000 </code></pre></div><p data-line="78" class="code-line">という情報を入れてブラウザに保存してあげれば、サーバーはこのクッキーを利用して「ユーザーID=1000」の人がリクエストしてきたと判断できます。</p> <p data-line="80" class="code-line">しかし問題は、クッキーの内容はユーザー側で自由に書き換えられてしまう可能性がある点です。<br> もしもクッキーを</p> <div class="code-block-container"><pre><code class="code-line" data-line="82">userID=1001 </code></pre></div><p data-line="85" class="code-line">のように編集され、実際にuserIDが1001のユーザーが存在していれば、なりすましログインされる危険があります。<br> このように他人のセッションに侵入する攻撃を、「セッションハイジャック」と呼びます。</p> <p data-line="88" class="code-line">また、クッキーはデフォルトでは平文で保存されるため、HTTPSで暗号化されていない通信経路では盗聴・改ざんが容易に行われる恐れがあります。</p> <h3 id="%E3%81%9D%E3%81%93%E3%81%A7%E3%82%BB%E3%83%83%E3%82%B7%E3%83%A7%E3%83%B3%E3%82%92%E4%BD%BF%E3%81%86" data-line="90" class="code-line"> <a class="header-anchor-link" href="#%E3%81%9D%E3%81%93%E3%81%A7%E3%82%BB%E3%83%83%E3%82%B7%E3%83%A7%E3%83%B3%E3%82%92%E4%BD%BF%E3%81%86" aria-hidden="true"></a> そこでセッションを使う</h3> <p data-line="91" class="code-line">クッキーにユーザーのIDなどをそのまま保存してしまうと、書き換えられたり盗聴されたりしてセッションハイジャックにつながる恐れがあるという問題がありました。<br> しかし「ユーザーを識別してステートフルなやり取りをしたい」ニーズは依然としてありますよね。</p> <p data-line="94" class="code-line">そこで登場するのが「セッション」です。</p> <h3 id="%E3%82%BB%E3%83%83%E3%82%B7%E3%83%A7%E3%83%B3%E3%81%AE%E4%BB%95%E7%B5%84%E3%81%BF" data-line="96" class="code-line"> <a class="header-anchor-link" href="#%E3%82%BB%E3%83%83%E3%82%B7%E3%83%A7%E3%83%B3%E3%81%AE%E4%BB%95%E7%B5%84%E3%81%BF" aria-hidden="true"></a> セッションの仕組み</h3> <p data-line="97" class="code-line">セッションはクッキーを応用した仕組みで、クッキーとまったく無関係なわけではありません。<br> 生のユーザー情報やカート情報などを直接クッキーに保存する代わりに、サーバー側で管理したデータにひも付くセッションIDのみをクッキーに保持させる、という方法を取ります。<br> サーバー内ではユーザーIDやカートの中身などの機密情報を、メモリ・データベース・Redisなどに保存し、セッションIDと照合する仕組みです。</p> <p data-line="101" class="code-line"><img src="https://storage.googleapis.com/zenn-user-upload/574f56ca3678-20250114.jpg" loading="lazy" class="md-img"></p> <h4 id="%E3%82%AF%E3%83%A9%E3%82%A4%E3%82%A2%E3%83%B3%E3%83%88%E3%81%AB%E3%81%AF%E3%82%BB%E3%83%83%E3%82%B7%E3%83%A7%E3%83%B3id%E3%81%A0%E3%81%91%E3%82%92%E6%B8%A1%E3%81%99" data-line="103" class="code-line"> <a class="header-anchor-link" href="#%E3%82%AF%E3%83%A9%E3%82%A4%E3%82%A2%E3%83%B3%E3%83%88%E3%81%AB%E3%81%AF%E3%82%BB%E3%83%83%E3%82%B7%E3%83%A7%E3%83%B3id%E3%81%A0%E3%81%91%E3%82%92%E6%B8%A1%E3%81%99" aria-hidden="true"></a> クライアントにはセッションIDだけを渡す</h4> <p data-line="104" class="code-line">クッキーに保存するのは「セッションID」のみです。<br> 具体的には以下のようなランダムかつ推測されにくい文字列が、クッキーとしてブラウザに保存されます。</p> <div class="code-block-container"><pre><code class="code-line" data-line="106">sessionID=abc123XYZ987 </code></pre></div><h4 id="%E3%82%B5%E3%83%BC%E3%83%90%E3%83%BC%E5%81%B4%E3%81%A7%E3%82%BB%E3%83%83%E3%82%B7%E3%83%A7%E3%83%B3%E6%83%85%E5%A0%B1%E3%82%92%E7%AE%A1%E7%90%86%E3%81%99%E3%82%8B" data-line="110" class="code-line"> <a class="header-anchor-link" href="#%E3%82%B5%E3%83%BC%E3%83%90%E3%83%BC%E5%81%B4%E3%81%A7%E3%82%BB%E3%83%83%E3%82%B7%E3%83%A7%E3%83%B3%E6%83%85%E5%A0%B1%E3%82%92%E7%AE%A1%E7%90%86%E3%81%99%E3%82%8B" aria-hidden="true"></a> サーバー側でセッション情報を管理する</h4> <p data-line="111" class="code-line">たとえば「ユーザーID」「カートの中身」「ログインしているかどうか」など、重要なデータはすべてサーバー側で保持します。<br> これらのデータはサーバー内のメモリやデータベース、Redisなどのセッションストアに保存されることが多いです。</p> <h4 id="%E5%AE%9F%E9%9A%9B%E3%81%AE%E6%A9%9F%E5%AF%86%E6%83%85%E5%A0%B1%E3%81%AF%E3%82%B5%E3%83%BC%E3%83%90%E3%83%BC%E5%81%B4%E3%81%AB%E7%BD%AE%E3%81%8F" data-line="114" class="code-line"> <a class="header-anchor-link" href="#%E5%AE%9F%E9%9A%9B%E3%81%AE%E6%A9%9F%E5%AF%86%E6%83%85%E5%A0%B1%E3%81%AF%E3%82%B5%E3%83%BC%E3%83%90%E3%83%BC%E5%81%B4%E3%81%AB%E7%BD%AE%E3%81%8F" aria-hidden="true"></a> 実際の機密情報はサーバー側に置く</h4> <p data-line="115" class="code-line">ユーザーがログインしているかどうかや、カートの中身などの「第三者に知られたくない情報」は、ブラウザには置かずサーバー側に保管しておきます。<br> ユーザーがブラウザでクッキーを書き換えようとしても、そこに書かれているのは「セッションID」だけです。<br> もしセッションIDが推測不能なランダム文字列なら、そう簡単には別のユーザーのセッションIDを作り出すことはできません。</p> <h3 id="%E3%82%BB%E3%83%83%E3%82%B7%E3%83%A7%E3%83%B3%E3%81%AE%E3%83%A1%E3%83%AA%E3%83%83%E3%83%88" data-line="119" class="code-line"> <a class="header-anchor-link" href="#%E3%82%BB%E3%83%83%E3%82%B7%E3%83%A7%E3%83%B3%E3%81%AE%E3%83%A1%E3%83%AA%E3%83%83%E3%83%88" aria-hidden="true"></a> セッションのメリット</h3> <h4 id="%E7%9B%B4%E6%8E%A5%E7%9A%84%E3%81%AA%E6%94%B9%E3%81%96%E3%82%93%E3%81%8C%E9%9B%A3%E3%81%97%E3%81%84" data-line="120" class="code-line"> <a class="header-anchor-link" href="#%E7%9B%B4%E6%8E%A5%E7%9A%84%E3%81%AA%E6%94%B9%E3%81%96%E3%82%93%E3%81%8C%E9%9B%A3%E3%81%97%E3%81%84" aria-hidden="true"></a> 直接的な改ざんが難しい</h4> <p data-line="121" class="code-line">クッキーに「userID=1000」のようにIDを直書きしていると書き換えられてしまうかもしれませんが、セッションIDだけなら意味がありませんね(ただのランダム文字列なので)。</p> <p data-line="123" class="code-line">たとえユーザーが勝手にクッキーのセッションIDを書き換えても、サーバー側のセッションストアと紐付かない限り正しいデータは得られません。</p> <h4 id="%E6%A9%9F%E5%AF%86%E6%83%85%E5%A0%B1%E3%82%92%E5%AE%89%E5%85%A8%E3%81%AB%E7%AE%A1%E7%90%86%E3%81%A7%E3%81%8D%E3%82%8B" data-line="125" class="code-line"> <a class="header-anchor-link" href="#%E6%A9%9F%E5%AF%86%E6%83%85%E5%A0%B1%E3%82%92%E5%AE%89%E5%85%A8%E3%81%AB%E7%AE%A1%E7%90%86%E3%81%A7%E3%81%8D%E3%82%8B" aria-hidden="true"></a> 機密情報を安全に管理できる</h4> <p data-line="126" class="code-line">クッキーでやりとりされるのは「セッションID」のみなので、パスワードなど、直接的に見られたくないデータはすべてサーバー側で管理できます。</p> <h4 id="%E3%83%AD%E3%82%B0%E3%82%A2%E3%82%A6%E3%83%88%E3%82%84%E3%82%BF%E3%82%A4%E3%83%A0%E3%82%A2%E3%82%A6%E3%83%88%E3%82%92%E5%AE%9F%E8%A3%85%E3%81%97%E3%82%84%E3%81%99%E3%81%84" data-line="128" class="code-line"> <a class="header-anchor-link" href="#%E3%83%AD%E3%82%B0%E3%82%A2%E3%82%A6%E3%83%88%E3%82%84%E3%82%BF%E3%82%A4%E3%83%A0%E3%82%A2%E3%82%A6%E3%83%88%E3%82%92%E5%AE%9F%E8%A3%85%E3%81%97%E3%82%84%E3%81%99%E3%81%84" aria-hidden="true"></a> ログアウトやタイムアウトを実装しやすい</h4> <p data-line="129" class="code-line">「一定時間操作がなかったらセッションを破棄する」などの仕組みをサーバー側で集中管理できるため、ログアウトやセキュリティ制限を柔軟に運用できます。</p> <h3 id="%E3%82%BB%E3%83%83%E3%82%B7%E3%83%A7%E3%83%B3%E3%81%AE%E6%B3%A8%E6%84%8F%E7%82%B9" data-line="131" class="code-line"> <a class="header-anchor-link" href="#%E3%82%BB%E3%83%83%E3%82%B7%E3%83%A7%E3%83%B3%E3%81%AE%E6%B3%A8%E6%84%8F%E7%82%B9" aria-hidden="true"></a> セッションの注意点</h3> <h4 id="%E3%82%BB%E3%83%83%E3%82%B7%E3%83%A7%E3%83%B3id%E3%81%AE%E7%9B%97%E9%9B%A3%E3%83%AA%E3%82%B9%E3%82%AF" data-line="132" class="code-line"> <a class="header-anchor-link" href="#%E3%82%BB%E3%83%83%E3%82%B7%E3%83%A7%E3%83%B3id%E3%81%AE%E7%9B%97%E9%9B%A3%E3%83%AA%E3%82%B9%E3%82%AF" aria-hidden="true"></a> セッションIDの盗難リスク</h4> <p data-line="133" class="code-line">もしセッションIDそのものが漏れてしまうと、結局はそのIDでサーバーを騙すことが可能になり、なりすましされる危険があります(セッションハイジャック)。</p> <p data-line="135" class="code-line">対策としては以下のものがあります。</p> <ul data-line="136" class="code-line"> <li data-line="136" class="code-line">HTTPS（TLS）で通信を暗号化する</li> <li data-line="137" class="code-line">Secure フラグや HttpOnly フラグを付ける</li> <li data-line="138" class="code-line">アクセス元IPアドレスのチェックやワンタイムトークン（CSRF対策）など、追加のセキュリティ機構を取り入れる</li> </ul> <h4 id="%E3%82%B5%E3%83%BC%E3%83%90%E3%83%BC%E8%B2%A0%E8%8D%B7%E3%83%BB%E3%82%B9%E3%82%B1%E3%83%BC%E3%83%AA%E3%83%B3%E3%82%B0%E3%81%AE%E5%95%8F%E9%A1%8C" data-line="140" class="code-line"> <a class="header-anchor-link" href="#%E3%82%B5%E3%83%BC%E3%83%90%E3%83%BC%E8%B2%A0%E8%8D%B7%E3%83%BB%E3%82%B9%E3%82%B1%E3%83%BC%E3%83%AA%E3%83%B3%E3%82%B0%E3%81%AE%E5%95%8F%E9%A1%8C" aria-hidden="true"></a> サーバー負荷・スケーリングの問題</h4> <p data-line="141" class="code-line">セッションを多くのユーザーが利用すると、サーバー側でそれだけ多くのセッション情報を管理しなくてはなりません。<br> サーバーの台数を増やして負荷分散する場合には「セッションの同期」をどうするかが課題になります(たとえば Redis やデータベースをセッションストアにして集中管理する、Sticky Session を使うなど)。</p> <h3 id="%E3%81%BE%E3%81%A8%E3%82%81" data-line="144" class="code-line"> <a class="header-anchor-link" href="#%E3%81%BE%E3%81%A8%E3%82%81" aria-hidden="true"></a> まとめ</h3> <p data-line="145" class="code-line"><strong>1. HTTPはステートレス</strong></p> <ul data-line="146" class="code-line"> <li data-line="146" class="code-line">サーバーはリクエストごとに「誰が何をしているか」を覚えていない</li> </ul> <p data-line="148" class="code-line"><strong>2. クッキーで状態を擬似的に保持</strong></p> <ul data-line="149" class="code-line"> <li data-line="149" class="code-line">サーバーが「クッキーを保存しておいて」と言えば、次回以降のリクエスト時にそのクッキー情報でユーザーを識別できる</li> <li data-line="150" class="code-line">名前=値の形式でブラウザに保持する</li> </ul> <p data-line="152" class="code-line"><strong>3. クッキーの改ざんや盗聴リスク</strong></p> <ul data-line="153" class="code-line"> <li data-line="153" class="code-line">クッキーをそのまま使うと、書き換えによる不正ログインや通信経路上の盗聴が怖い</li> </ul> <p data-line="155" class="code-line"><strong>4. セッションを導入して機密情報はサーバー側で管理</strong></p> <ul data-line="156" class="code-line"> <li data-line="156" class="code-line">クライアント側は「セッションID」だけ</li> <li data-line="157" class="code-line">サーバー側でユーザーの重要データを集中管理し、改ざんを防ぐ</li> </ul> <h4 id="%E3%82%AF%E3%83%83%E3%82%AD%E3%83%BC%E3%81%A8%E3%82%BB%E3%83%83%E3%82%B7%E3%83%A7%E3%83%B3%E3%81%AE%E9%81%95%E3%81%84" data-line="159" class="code-line"> <a class="header-anchor-link" href="#%E3%82%AF%E3%83%83%E3%82%AD%E3%83%BC%E3%81%A8%E3%82%BB%E3%83%83%E3%82%B7%E3%83%A7%E3%83%B3%E3%81%AE%E9%81%95%E3%81%84" aria-hidden="true"></a> クッキーとセッションの違い</h4> <table data-line="160" class="code-line"> <thead data-line="160" class="code-line"> <tr data-line="160" class="code-line"> <th>項目</th> <th>Cookie</th> <th>Session</th> </tr> </thead> <tbody data-line="162" class="code-line"> <tr data-line="162" class="code-line"> <td>データ保存場所</td> <td>ユーザーのブラウザ</td> <td>サーバー側ストア (メモリ/DB/Redisなど)</td> </tr> <tr data-line="163" class="code-line"> <td>具体的な中身</td> <td>ユーザーIDなど任意の情報を直書き可</td> <td>セッションIDのみ（中身はサーバー内に保持）</td> </tr> <tr data-line="164" class="code-line"> <td>セキュリティ面</td> <td>平文で書き換え可能, 窃取されやすい</td> <td>IDの盗難リスクはあるが改ざんされにくい</td> </tr> <tr data-line="165" class="code-line"> <td>負荷のかかり方</td> <td>サーバー負荷は少なめ</td> <td>多数のセッションをサーバーが管理し負荷大</td> </tr> </tbody> </table> <hr data-line="168" class="code-line"> <p data-line="170" class="code-line">「<strong>クッキーとセッションの違い is 何？</strong>」と疑問に思っていた方も、これでだいぶイメージが湧いたのではないでしょうか。<br> セッションはクッキーの弱点を補うための仕組みですが、セッションIDが盗まれるリスクもゼロにはなりません。<br> ぜひ今回の内容を踏まえ、「どこに」「どんな情報を」「どのように保存するか」を常に意識して、安全で使いやすいWebアプリケーションを作ってみてください！</p> <h3 id="%E5%8F%82%E8%80%83%E6%96%87%E7%8C%AE" data-line="174" class="code-line"> <a class="header-anchor-link" href="#%E5%8F%82%E8%80%83%E6%96%87%E7%8C%AE" aria-hidden="true"></a> 参考文献</h3> <ul data-line="175" class="code-line"> <li data-line="175" class="code-line"><a href="https://amzn.to/3WixzQG" target="_blank" rel="nofollow noopener noreferrer">Webを支える技術</a></li> <li data-line="176" class="code-line"><a href="https://amzn.to/3WhTh7G" target="_blank" rel="nofollow noopener noreferrer">プロになるためのWeb技術入門</a></li> </ul> </div></div><div class="View_publicationFixedSentences__wI4xN"><span style="display:block;height:2rem;flex-shrink:0"></span><aside class="PublicationFixedSentences_container__TEQhj"><header class="PublicationFixedSentences_header__Hk9_W"><a href="/p/collabostyle"><img alt="" class="AvatarImage_border__pDIjF AvatarImage_plain__Fgp4R AvatarImage_withPublication__hNtIe" height="26" loading="lazy" referrerPolicy="no-referrer" src="https://storage.googleapis.com/zenn-user-upload/avatar/5b3b7541c5.jpeg" width="26"/></a><div class="PublicationFixedSentences_title__Z8wYN">コラボスタイル Developers により固定</div></header><div class="PublicationFixedSentences_htmlContainer__zuhAF"><div class="BodySimpleContent_container__jt088"><p>株式会社コラボスタイルは、『<strong>ワークスタイルの未来を切り拓く</strong>』を理念に掲げ、<br /> ワークスタイルのちいさなチャレンジがライフスタイルをより良くすると考えております。</p> <p>ITツールを提供するメーカーにとどまらず、<br /> 働く人と働く場所の未来を作っていく会社です。</p> <p>社内のワークフローを整備することで、働く人の業務ストレスを軽減し<br /> みんなが働きやすい環境を実現するため、ソフトウエアエンジニアを募集しています。</p> <p>・株式会社コラボスタイルの会社情報<br /> <a href="https://www.wantedly.com/companies/company_8613418" target="_blank" rel="nofollow noopener noreferrer">https://www.wantedly.com/companies/company_8613418</a></p> </div></div></aside></div><div class="View_actions__s_UJk" id="share"><div class="LikeButton_container__YlckE style-large"><button aria-label="いいね" class="LikeButton_button__ZwdG4" data-pressed="false"><svg class="LikeButton_svgLike__Gl0Sz" viewBox="0 0 110 110"><path class="LikeButton_svgLikeLine__f9txR" d="M73,24a23.78,23.78,0,0,0-15.89,6.19,3.14,3.14,0,0,1-4.18,0A23.81,23.81,0,0,0,37,24a22,22,0,0,0-22,22c0,16.67,19.64,32.82,25.11,37.93,2.84,2.65,6.15,5.64,8.92,8.13a8.9,8.9,0,0,0,11.9,0c2.77-2.49,6.07-5.48,8.91-8.13C75.37,78.81,95,62.66,95,46A22,22,0,0,0,73,24Z" fill="currentColor"></path><path class="LikeButton_svgLikeInner__uiexS" d="M66.25,76.42c-.71.64-1.32,1.2-1.82,1.67-2.51,2.33-5.39,5-7.94,7.25a2.21,2.21,0,0,1-3,0C51,83,48.1,80.42,45.59,78.09c-.5-.47-1.12-1-1.82-1.67C38.09,71.29,23,57.67,23,46A14,14,0,0,1,37,32a15.92,15.92,0,0,1,11.65,5.23l4.73,5a2.2,2.2,0,0,0,3.23,0l4.72-5A16.06,16.06,0,0,1,73,32,14,14,0,0,1,87,46C87,57.67,71.93,71.29,66.25,76.42Z" fill="currentColor"></path><g class="LikeButton_svgLikeDecoration__78UjB"><circle cx="41.5" cy="9.5" fill="#3ea8ff" r="3.5"></circle><circle cx="98.5" cy="26.5" fill="#ffdc6e" r="3.5"></circle><circle cx="13" cy="19" fill="#c067f4" r="5"></circle><circle cx="77" cy="9" fill="#f76685" r="5"></circle><circle cx="26.5" cy="92.5" fill="#f76685" r="3.5"></circle><circle cx="105.5" cy="48.5" fill="#c067f4" r="3.5"></circle><circle cx="4.5" cy="60.5" fill="#3ea8ff" r="3.5"></circle><circle cx="94.5" cy="73.5" fill="#3ea8ff" r="1.5"></circle><circle cx="16.5" cy="75.5" fill="#ffdc6e" r="1.5"></circle><circle cx="78.5" cy="91.5" fill="#ffdc6e" r="1.5"></circle></g></svg></button></div><div class="View_menuAndShareButtonsContainer__PMtHU"><div class="View_menu__wgMxq"><button aria-label="その他の操作" class="PopoverMenuButton_menuButton__hKCa_"><svg viewBox="0 0 27 27" height="16" width="16"><path fill="currentColor" d="M12.74,20.53,3.48,11.35a.75.75,0,0,1,0-1.07L4.71,9.05a.75.75,0,0,1,1.07,0l7.49,7.41,7.49-7.41a.74.74,0,0,1,1.06,0l1.24,1.23a.77.77,0,0,1,0,1.07L13.8,20.53A.74.74,0,0,1,12.74,20.53Z"></path></svg></button></div><div class="ShareButtonsExperimental_container__CrtBj" style="flex-direction:row;align-items:center"><a aria-label="X(Twitter)にポスト" class="ShareButtonsExperimental_button__d9aXF ShareButtonsExperimental_svgTwitterHorizontal__5xDGM ShareButtonsExperimental_svgTwitterBase__8FrNq" data-tooltip-for-desktop="true" data-tooltip-position="bottom" href="https://twitter.com/intent/tweet?url=https://zenn.dev/collabostyle/articles/8949e8db686263&text=%E3%82%AF%E3%83%83%E3%82%AD%E3%83%BC%E3%81%A8%E3%82%BB%E3%83%83%E3%82%B7%E3%83%A7%E3%83%B3%E3%82%92%E9%9B%B0%E5%9B%B2%E6%B0%97%E3%81%A7%E4%BD%BF%E3%81%A3%E3%81%A6%E3%81%84%E3%82%8B%E3%82%A8%E3%83%B3%E3%82%B8%E3%83%8B%E3%82%A2%E3%81%8C%E3%80%81%E9%81%95%E3%81%84%E3%82%92%E8%AA%AC%E6%98%8E%E3%81%A7%E3%81%8D%E3%82%8B%E3%82%88%E3%81%86%E3%81%AB%E3%81%AA%E3%82%8B%E8%A8%98%E4%BA%8B%EF%BD%9CMESI&hashtags=zenn" id="gtm-article-footer-tweet" rel="nofollow noopener noreferrer" role="tooltip" target="_blank"><svg width="27" height="28" viewBox="0 0 27 28" fill="none"><g clip-path="url(#clip0_1_18)"><path d="M16.0687 11.7356L26.12 0H23.7382L15.0106 10.1899L8.03988 0H0L10.5411 15.4089L0 27.7155H2.38199L11.5985 16.9546L18.9601 27.7155H27L16.0681 11.7356H16.0687ZM12.8062 15.5447L11.7382 14.0103L3.24025 1.80106H6.89884L13.7568 11.6543L14.8248 13.1887L23.7393 25.9963H20.0807L12.8062 15.5452V15.5447Z" fill="currentColor"></path></g><defs><clipPath id="clip0_1_18"><rect width="27" height="27.7297" fill="white"></rect></clipPath></defs></svg></a><a aria-label="Facebookに投稿" class="ShareButtonsExperimental_button__d9aXF ShareButtonsExperimental_svgFacebookHorizontal__MpfBm ShareButtonsExperimental_svgFacebookBase___gDOW" data-tooltip-for-desktop="true" data-tooltip-position="bottom" href="http://www.facebook.com/sharer.php?u=https://zenn.dev/collabostyle/articles/8949e8db686263" id="gtm-article-footer-facebook" rel="nofollow noopener noreferrer" role="tooltip" target="_blank"><svg width="28" height="29" viewBox="0 0 28 29" fill="none"><g clip-path="url(#clip0_2_21)"><path d="M28 14.7812C28 7.02084 21.7319 0.729736 14 0.729736C6.26808 0.729736 0 7.02084 0 14.7812C0 21.3707 4.52032 26.9002 10.6182 28.4189V19.0753H7.73136V14.7812H10.6182V12.9309C10.6182 8.14833 12.7747 5.93158 17.453 5.93158C18.34 5.93158 19.8705 6.10637 20.4966 6.28061V10.1729C20.1662 10.138 19.5922 10.1206 18.8793 10.1206C16.5838 10.1206 15.6968 10.9935 15.6968 13.2625V14.7812H20.2698L19.4841 19.0753H15.6968V28.7297C22.629 27.8895 28.0006 21.9654 28.0006 14.7812H28Z" fill="currentColor"></path></g><defs><clipPath id="clip0_2_21"><rect width="28" height="28" fill="white" transform="translate(0 0.729736)"></rect></clipPath></defs></svg></a><a aria-label="はてなブックマークに登録" class="ShareButtonsExperimental_button__d9aXF ShareButtonsExperimental_svgHatenaBookmarkHorizontal__ccpWn ShareButtonsExperimental_svgHatenaBookmarkBase__VXz6p" data-tooltip-for-desktop="true" data-tooltip-position="bottom" href="https://b.hatena.ne.jp/add?mode=confirm&url=https://zenn.dev/collabostyle/articles/8949e8db686263&title=%E3%82%AF%E3%83%83%E3%82%AD%E3%83%BC%E3%81%A8%E3%82%BB%E3%83%83%E3%82%B7%E3%83%A7%E3%83%B3%E3%82%92%E9%9B%B0%E5%9B%B2%E6%B0%97%E3%81%A7%E4%BD%BF%E3%81%A3%E3%81%A6%E3%81%84%E3%82%8B%E3%82%A8%E3%83%B3%E3%82%B8%E3%83%8B%E3%82%A2%E3%81%8C%E3%80%81%E9%81%95%E3%81%84%E3%82%92%E8%AA%AC%E6%98%8E%E3%81%A7%E3%81%8D%E3%82%8B%E3%82%88%E3%81%86%E3%81%AB%E3%81%AA%E3%82%8B%E8%A8%98%E4%BA%8B%EF%BD%9CMESI" id="gtm-article-footer-hatena-bookmark" rel="nofollow noopener noreferrer" role="tooltip" target="_blank"><svg width="27" height="28" viewBox="0 0 27 28" fill="none"><path fill-rule="evenodd" clip-rule="evenodd" d="M5.4999 0.729736H21.5001C24.5376 0.729736 27 3.19213 27 6.22964V22.2298C27 25.2673 24.5376 27.7297 21.5001 27.7297H5.4999C2.46239 27.7297 0 25.2673 0 22.2298V6.22964C0 3.19213 2.46239 0.729736 5.4999 0.729736ZM12.98 13.7472C13.8521 13.8136 14.5319 14.1209 15.0212 14.6673V14.6679C15.512 15.2127 15.7572 15.9444 15.7572 16.8543C15.7572 17.5126 15.62 18.0877 15.3436 18.5867C15.0692 19.084 14.6756 19.4712 14.1604 19.7433C13.7441 19.9658 13.2289 20.1278 12.6155 20.2245C12.001 20.3179 10.9966 20.3665 9.6039 20.3665H6.13656V8.09392H9.50184C10.8859 8.09392 11.8503 8.13875 12.4016 8.22623C12.9503 8.31695 13.4206 8.4703 13.8164 8.68792C14.269 8.93902 14.6129 9.27437 14.8527 9.69341C15.0865 10.1151 15.2069 10.6028 15.2069 11.1546C15.2069 11.8512 15.0309 12.4053 14.6761 12.813C14.3197 13.2261 13.756 13.5355 12.98 13.7472ZM9.96192 10.8144H9.24372H9.24318V13.2768H9.91116C10.7352 13.2768 11.2984 13.1856 11.6073 13.0058C11.9124 12.8227 12.0663 12.5273 12.0663 12.0667C12.0663 11.6061 11.9216 11.2821 11.6375 11.0947C11.3497 10.9084 10.7919 10.8144 9.96192 10.8144ZM10.4128 18.1514C11.2028 18.1514 11.7661 18.0531 12.0928 17.8523V17.8528C12.4227 17.653 12.5863 17.3209 12.5863 16.8581C12.5863 16.3408 12.4367 15.9806 12.1338 15.7765C11.8357 15.5724 11.2747 15.4703 10.463 15.4703H9.24372V18.1514H10.4128ZM19.3093 17.257C18.4502 17.257 17.7547 17.9525 17.7547 18.8111C17.7547 19.6697 18.4507 20.3658 19.3093 20.3658C20.1679 20.3658 20.8634 19.6697 20.8634 18.8111C20.8634 17.9525 20.1668 17.257 19.3093 17.257ZM17.9593 8.09318H20.6593V16.2753H17.9593V8.09318Z" fill="currentColor"></path></svg></a></div></div></div><span style="display:block;height:2rem;flex-shrink:0"></span><aside class="View_authorInfo__F19rR"><div class="ProfileCard_container__YfvQl"><a class="ProfileCard_avatar__tIJpR" href="/mesi"><img alt="MESI" class="AvatarImage_plain__Fgp4R " height="80" loading="lazy" referrerPolicy="no-referrer" src="https://lh3.googleusercontent.com/a/AGNmyxYOPkkHxBBqioZ1oK3p8oz-Feyvo0h_Odi3KljSp0o=s96-c" width="80"/></a><div class="ProfileCard_name__qXamf"><a class="ProfileCard_displayName__gRUeY" href="/mesi">MESI</a></div><div class="ProfileCard_content__1w905"><p class="Paragraph_common__yRSrj Paragraph_sidenote__9NTjJ Paragraph_decorateLink__aIAFh"><span>よわよわエンジニア4年目。開発がしたいです。</span></p><div class="ProfileCard_actions__2ZjZ8"><span class="ProfileCard_follow__ng60N"></span><a aria-label="@mesichicken" class="ProfileCard_link__oexkj ProfileCard_linkBase__hVELe" data-tooltip-for-desktop="true" data-tooltip-position="bottom" href="https://github.com/mesichicken" rel="nofollow noopener noreferrer" role="tooltip" target="_blank"><svg x="0px" y="0px" viewBox="0 0 27 27" style="enable-background:new 0 0 27 27" xml:space="preserve" aria-label="GitHub"><path fill="currentColor" d="M13.4,1.2C7,1,1.8,6,1.7,12.4c0,0.1,0,0.4,0,0.5c0,5.1,3.2,9.8,8.2,11.5c0.6,0.1,0.7-0.2,0.7-0.6s0-1.8,0-2.9 c0,0-3.3,0.6-4-1.5c0,0-0.6-1.3-1.3-1.8c0,0-1.1-0.7,0.1-0.7c0.7,0.1,1.5,0.6,1.8,1.2c0.6,1.2,2.2,1.7,3.4,1h0.1 c0.1-0.6,0.4-1.2,0.7-1.6C8.7,17.1,6,16.9,6,12.3c0-1.1,0.5-2.1,1.2-2.8c0-1.1,0-2.2,0.3-3.2c1-0.4,3.3,1.3,3.3,1.3c2-0.6,4-0.6,6,0 c0,0,2.2-1.6,3.2-1.2c0.5,1,0.5,2.2,0.1,3.2c0.7,0.7,1.2,1.8,1.2,2.8c0,4.5-2.8,5-5.5,5.2c0.6,0.6,0.9,1.3,0.7,2.2c0,1.7,0,3.5,0,4 s0.2,0.6,0.7,0.6c4.9-1.7,8.2-6.2,8-11.5c0.1-6.4-5.1-11.6-11.6-11.6C13.5,1.2,13.4,1.2,13.4,1.2z"></path></svg></a><a aria-label="@mesichicken" class="ProfileCard_twitterLink__l4sOK ProfileCard_linkBase__hVELe" data-tooltip-for-desktop="true" data-tooltip-position="bottom" href="https://twitter.com/mesichicken" rel="nofollow noopener noreferrer" role="tooltip" target="_blank"><svg width="27" height="28" viewBox="0 0 27 28" fill="none" aria-label="X(Twitter)"><g clip-path="url(#clip0_1_18)"><path d="M16.0687 11.7356L26.12 0H23.7382L15.0106 10.1899L8.03988 0H0L10.5411 15.4089L0 27.7155H2.38199L11.5985 16.9546L18.9601 27.7155H27L16.0681 11.7356H16.0687ZM12.8062 15.5447L11.7382 14.0103L3.24025 1.80106H6.89884L13.7568 11.6543L14.8248 13.1887L23.7393 25.9963H20.0807L12.8062 15.5452V15.5447Z" fill="currentColor"></path></g><defs><clipPath id="clip0_1_18"><rect width="27" height="27.7297" fill="white"></rect></clipPath></defs></svg></a><a aria-label="mesihome.com" class="ProfileCard_link__oexkj ProfileCard_linkBase__hVELe" data-tooltip-for-desktop="true" data-tooltip-position="bottom" href="https://www.mesihome.com" rel="nofollow noopener noreferrer" role="tooltip" target="_blank"><svg x="0px" y="0px" viewBox="0 0 27 27" style="enable-background:new 0 0 27 27" xml:space="preserve" aria-label="リンク"><path fill="currentColor" d="M9.6,23.9c-3.6,0-6.5-3-6.5-6.6c0-1.7,0.7-3.4,1.9-4.6l2.3-2.3c0.5-0.4,1.2-0.4,1.6,0.1c0.4,0.4,0.4,1,0,1.5l-2.3,2.3 c-1.7,1.7-1.7,4.4,0,6.1s4.4,1.7,6.1,0l2.3-2.3c0.5-0.4,1.2-0.4,1.6,0.1c0.4,0.4,0.4,1,0,1.5L14.3,22C13,23.2,11.4,23.9,9.6,23.9z M10.6,17.5c-0.6,0-1.1-0.5-1.1-1.1c0-0.3,0.1-0.6,0.3-0.8l5.8-5.8c0.4-0.4,1.1-0.4,1.6,0c0.4,0.4,0.4,1.1,0,1.6l-5.8,5.8 C11.2,17.4,10.9,17.5,10.6,17.5z M18.9,16.9c-0.3,0-0.6-0.1-0.8-0.3c-0.4-0.4-0.4-1.1,0-1.6l2.3-2.3c1.7-1.7,1.7-4.4,0-6.1 c-1.7-1.7-4.4-1.7-6.1,0L12,8.9c-0.5,0.4-1.2,0.4-1.6-0.1c-0.4-0.4-0.4-1,0-1.5L12.7,5c2.6-2.6,6.7-2.6,9.2,0s2.6,6.7,0,9.2 l-2.3,2.4C19.4,16.8,19.1,16.9,18.9,16.9z"></path></svg></a></div></div></div></aside><div class="View_publicationInfo__MKZ62"><div class="ProfileCard_container__YfvQl"><a class="ProfileCard_avatar__tIJpR" href="/p/collabostyle"><img alt="コラボスタイル Developers" class="AvatarImage_plain__Fgp4R AvatarImage_withPublication__hNtIe" height="80" loading="lazy" referrerPolicy="no-referrer" src="https://storage.googleapis.com/zenn-user-upload/avatar/5b3b7541c5.jpeg" width="80"/></a><div class="ProfileCard_name__qXamf"><a class="ProfileCard_displayName__gRUeY" href="/p/collabostyle">コラボスタイル Developers</a><span><a class="PublicationLabelLink_link__JBqs2" href="/faq#what-is-publication">Publication</a></span></div><div class="ProfileCard_content__1w905"><p class="Paragraph_common__yRSrj Paragraph_sidenote__9NTjJ Paragraph_decorateLink__aIAFh"><span>「ワークスタイルの未来を切り拓く」を理念に掲げ、リアルとデジタルの2つの働く場に向けた事業展開に留まらず、自社が率先して新しいワークスタイルに挑戦し、発信を行うことでワークスタイルの未来を切り拓いていきます。</span></p><div class="ProfileCard_actions__2ZjZ8"><span class="ProfileCard_follow__ng60N"></span></div></div></div></div><span style="display:block;height:2rem;flex-shrink:0"></span><aside class="SendBadgeCta_container__peDjp"><div class="SendBadgeCta_content__FGxIx"><div class="SendBadgeCta_title__NFpA3">バッジを贈って著者を応援しよう</div><span style="display:block;height:0.5rem;flex-shrink:0"></span><p class="Paragraph_common__yRSrj Paragraph_sidenote-sm__zfJpo">バッジを受け取った著者にはZennから現金やAmazonギフトカードが還元されます。</p><div class="SendBadgeCta_buttonContainer__5_7_u"><button class="Button_primary__VcoA9 Button_baseStyle__Vhn6Y Button_large__jO0IW Button_fontBold__BN6Co">バッジを贈る</button></div></div><svg viewBox="0 0 318 451" fill="currentColor" class="SendBadgeCta_icon__mcUsF"><path d="M175.12,41.58V13.2a8.87,8.87,0,0,0-17.73.6V41.58a8.87,8.87,0,1,0,17.73.6Z"></path><path d="M75,44.52,94.62,64.17c.1.11.21.22.32.32a8.87,8.87,0,0,0,12.18-12.86L87.52,32A8.87,8.87,0,0,0,75,44.52Z"></path><path d="M253.56,44.52A8.87,8.87,0,0,0,241,32L221.37,51.63,221,52A8.87,8.87,0,0,0,233.9,64.17h0Z"></path><path d="M18.06,262.07a28.08,28.08,0,0,0-.7,39.08l22.55,27.78,12.58,15.5,32.78,40.4A24.72,24.72,0,0,0,104.53,394H203a35.83,35.83,0,0,1,15.13,3.36,8,8,0,0,0,9-1.68h0a8.09,8.09,0,0,0-2.2-13h0a46,46,0,0,0-19.6-4.4H104.57a9.06,9.06,0,0,1-7.08-3.37L72.76,344.4,58.37,326.68l-.72-.89L39.91,303.93,29.32,290.42h0a12.35,12.35,0,0,1,0-17.46,10.33,10.33,0,0,1,1.43-1.2,12.1,12.1,0,0,1,4.76-2.15h.17a12.73,12.73,0,0,1,2.06-.21H38a12.47,12.47,0,0,1,3.53.52l.71.23c.23.08.45.18.68.27h0A12.55,12.55,0,0,1,46.76,273l11,10.68,14,13.53,21.88,21.13a23.65,23.65,0,0,0-.56,2.63,8.77,8.77,0,0,0-.21,1.6l-.06.84v3.51a3.31,3.31,0,0,1,0,.62,2.53,2.53,0,0,0,0,.55,1.79,1.79,0,0,0,.07.62c.07.18,0,.33.07.54s.08.42.1.62l.09.54.12.61.12.53a2.93,2.93,0,0,0,.15.6c0,.18.09.33.14.53s.12.43.17.6l.16.52c.06.19.13.42.19.59s.12.34.19.51l.21.58.21.51.24.57c.07.17.15.31.23.5s.17.37.26.55l.25.51.28.53.28.5.3.52.3.49c.11.16.21.33.32.5l.33.48.33.49c.12.16.24.31.35.47l.36.47.37.47c.13.14.24.28.37.44s.33.37.41.46.15.18.23.26l.15.17.43.45.4.4.46.44.4.38.5.43.41.36.53.42.42.33.56.41.42.31.61.4.41.27.66.4.4.24.72.39.38.2.8.4.33.16.94.4.23.1c.79.33,1.61.62,2.45.88a26.76,26.76,0,0,0,5.83,1.08,21.47,21.47,0,0,0,2.78.11H184.7l.48-.07.28-.06.43-.11.28-.09.42-.15.25-.11a2.93,2.93,0,0,0,.44-.21l.21-.1c.2-.11.4-.23.59-.36l.17-.12.38-.29c.2-.16.4-.34.59-.52h0c.19-.19.38-.4.56-.61l.11-.15c.13-.17.25-.35.37-.52l.15-.23.27-.49.13-.26.21-.49a.45.45,0,0,1,.1-.3,1.7,1.7,0,0,0,.16-.51,1.06,1.06,0,0,1,.07-.3c.05-.2.08-.39.11-.58v-.26a6.31,6.31,0,0,0,0-.87,10.7,10.7,0,0,0-.11-1.27,7.87,7.87,0,0,0-7.76-6.6H120.77a12.35,12.35,0,0,1-12.3-13.57,5.65,5.65,0,0,1,.16-1.07v-.23c.07-.33.15-.67.25-1h0c.11-.36.23-.68.36-1a.94.94,0,0,1,.1-.23c.12-.29.26-.58.41-.86v-.07c.16-.3.34-.58.52-.86l.16-.24.15-.22c.12-.17.25-.33.37-.48l.08-.11c.21-.25.43-.5.66-.74l.19-.19c.22-.22.44-.43.68-.63l.06-.06c.26-.22.52-.42.8-.62l.21-.15c.26-.18.53-.36.8-.52h.06c.29-.17.59-.32.9-.47l.24-.12c.29-.13.59-.26.89-.37h.07c.35-.12.67-.22,1-.31l.27-.08c.36-.08.67-.16,1-.22h.07a4.73,4.73,0,0,1,1-.14h65.95a46.51,46.51,0,0,0,12.79-1.77,43.8,43.8,0,0,0,4.85-1.75h.09c.76-.34,1.51-.69,2.25-1.07a62.92,62.92,0,0,1,29.3-7.17h3.1l1.45.08.93.08a11.73,11.73,0,0,1,1.33.12l1,.11.94.11.38.06.87.13,1.32.21.91.17,1.28.25.91.2,1.26.3.91.22,1.24.34.9.25,1.28.39.83.27c.59.19,1.17.39,1.75.6l1.25.47c.31.12.63.23.94.36H260c.89.35,1.75.72,2.62,1.1l.44.21c.71.32,1.4.66,2.09,1l.68.32c.67.36,1.34.71,2,1.08l.47.26c.81.41,1.62.92,2.41,1.41l.42.27c.64.39,1.28.81,1.91,1.23l.67.46c.58.4,1.16.81,1.73,1.23l.54.39c.73.55,1.46,1.11,2.16,1.69l.38.31c.58.47,1.15,1,1.72,1.47l.63.56c.48.46,1,.92,1.48,1.38l.55.53c.23.24,1.5,1.75,3,3.55a5.2,5.2,0,0,0,.51.55,8,8,0,0,0,11.31,0h0a8,8,0,0,0,.36-11q-1.08-1.23-2.22-2.43c-1.68-1.73-3.43-3.39-5.25-5V207.16h7a8.88,8.88,0,0,0,8.87-8.86V152.38a8.88,8.88,0,0,0-8.87-8.87H284.85c5.62-15,1.68-32.58-10.89-43.16a49.14,49.14,0,0,0-28.23-11.56c-20.31-1.46-44.09,12.21-58.31,24.38-1,.89-2.13,1.82-3.13,2.76h-38c-1-.94-2.14-1.87-3.14-2.76-14.22-12.16-38-25.84-58.33-24.38a49,49,0,0,0-28.24,11.56C44,110.93,40.12,128.51,45.69,143.51H32.91a8.88,8.88,0,0,0-8.86,8.87V198.3a8.85,8.85,0,0,0,8.86,8.86h7v46.77a20.38,20.38,0,0,0-2.06-.08A27.76,27.76,0,0,0,18.06,262ZM196,207.17h76.88v87.5c-1.46-.72-2.92-1.42-4.39-2.08a83.5,83.5,0,0,0-14.76-4.9,81.38,81.38,0,0,0-18.58-2.15,78.77,78.77,0,0,0-36.42,8.92,25.37,25.37,0,0,1-2.68,1.18Zm.05-45.91h92.74v28.17h-92.7Zm0-32c.9-.86,1.9-1.71,2.9-2.57,12-10.28,30.55-20.22,43.76-20.22.6,0,1.17.06,1.75.06a31.32,31.32,0,0,1,18.08,7.4c8.65,7.25,9.65,20.71,2.08,29.58H196.06Zm-43.71,4.42h26V297.39h-26Zm-17.78,9.86H66C58.4,134.68,59.41,121.22,68,114a31.34,31.34,0,0,1,18.09-7.47c13.28-1,33,9.41,45.5,20.16,1,.86,2,1.72,2.92,2.57ZM57.65,207.16h76.88v90.2H121.27A29,29,0,0,0,102,304.8l-19.1-18.45L57.69,262Zm-15.86-45.9h92.74v28.17H41.83Z"></path></svg></aside><span style="display:block;height:2rem;flex-shrink:0"></span></div></div><div id="discuss"><div class="ArticleComments_commentsContainer__kOO0n"><section class="ArticleComments_comments__y4Azs"><div class="ArticleComments_commentsHeadingContainer__v8IYT"><h3 class="Heading_size-md__Zg0Hr Heading_centered__lNLF_">Discussion</h3></div><div><div class="ArticleComments_commentItemContainer__K2ijm"><article class="ThreadItemContent_parentItem__2BweX" id="comment-f527742323f6d1"><header class="ThreadHeader_header__rscC4"><a class="ThreadHeader_userAvatar__zumMm ThreadItemContent_avatarContainer__xS_s_" href="/ritou"><img alt="ritou" class="AvatarImage_plain__Fgp4R " height="36" loading="lazy" referrerPolicy="no-referrer" src="https://lh3.googleusercontent.com/a-/AOh14GjQ_fcwsIRk6LalbnjCHWzWfk7BkYvX9XAkZP8b8Q=s80-c" width="36"/></a><a class="ThreadHeader_userName__TmgaQ" href="/ritou">ritou</a><a class="ThreadHeader_dateContainer__349dg" href="#comment-f527742323f6d1"><time aria-label="2025年1月18日 15時36分" data-tooltip-for-desktop="true" data-tooltip-position="top" dateTime="2025-01-18T06:36:12+00:00" role="tooltip">2ヶ月前</time></a><div class="ThreadHeader_actionContainer__8UItF"><button aria-label="メニューを開く" class="PopoverMenuButton_menuButton__hKCa_"><svg viewBox="0 0 27 27" height="16" width="16"><path fill="currentColor" d="M12.74,20.53,3.48,11.35a.75.75,0,0,1,0-1.07L4.71,9.05a.75.75,0,0,1,1.07,0l7.49,7.41,7.49-7.41a.74.74,0,0,1,1.06,0l1.24,1.23a.77.77,0,0,1,0,1.07L13.8,20.53A.74.74,0,0,1,12.74,20.53Z"></path></svg></button></div></header><div class="ThreadItemContent_content__Ivb_O"><div class="InsertButtonToCodeBlock_insertButtonWrapper__ueql2"><div class="znc BodyCommentContent_bodyCommentContainer__5up6o"><p data-line="0" class="code-line">初見で、どうしても</p> <ul data-line="2" class="code-line"> <li data-line="2" class="code-line">セッションっていうのは仕組み？概念？</li> <li data-line="3" class="code-line">クッキーはブラウザでつかってるやつだよな</li> <li data-line="4" class="code-line">これらは比較すべきものなの？</li> </ul> <p data-line="6" class="code-line">という疑問が出そうだなという感想を持ってしまいました。</p> <p data-line="8" class="code-line">この手の解説をする際は、実現したいこととやり方、それを支える技術といった整理をしたうえで比較対象などを検討するのが良いと思います。</p> <ul data-line="10" class="code-line"> <li data-line="10" class="code-line">実現したいこと: セッション管理(より大きな定義だとアクセスコントロール)</li> <li data-line="11" class="code-line">設計方針 <ul data-line="12" class="code-line"> <li data-line="12" class="code-line">ステートフル</li> <li data-line="13" class="code-line">ステートレス</li> </ul> </li> <li data-line="14" class="code-line">それを実現するための技術 <ul data-line="15" class="code-line"> <li data-line="15" class="code-line">サーバー <ul data-line="16" class="code-line"> <li data-line="16" class="code-line">データストレージ</li> <li data-line="17" class="code-line">それを操作するロジック(Middlewareで実装されることが多い)</li> <li data-line="18" class="code-line">さらにいくとJWTなどもここに入る</li> </ul> </li> <li data-line="19" class="code-line">クライアント <ul data-line="20" class="code-line"> <li data-line="20" class="code-line">ブラウザのCookie管理の仕組み(Cookieを保存、付与)</li> <li data-line="21" class="code-line">ブラウザのローカルストレージ、セッションストレージ</li> <li data-line="22" class="code-line">モバイルアプリで利用可能なストレージ</li> <li data-line="23" class="code-line">リクエストに指定する際のHttp Header: Cookie Header, Authorization Headerなど</li> </ul> </li> </ul> </li> </ul> <p data-line="25" class="code-line">あと、RFCやW3Cなど標準化されているものについては、なるべくその参照を示す方が良いでしょう。<br> 厳密な定義を調べることで、アプリケーションの動作の中でどの部分の処理についての仕様なのかが明確になり、今回のような比較を用いた記事も書きやすくなるでしょう。</p> </div></div><footer class="ThreadItemContent_footer__WEMyQ"><div class="LikeButton_container__YlckE style-icon"><button aria-label="いいね" class="LikeButton_button__ZwdG4" data-pressed="false"><svg class="LikeButton_svgLike__Gl0Sz" viewBox="0 0 110 110"><path class="LikeButton_svgLikeLine__f9txR" d="M73,24a23.78,23.78,0,0,0-15.89,6.19,3.14,3.14,0,0,1-4.18,0A23.81,23.81,0,0,0,37,24a22,22,0,0,0-22,22c0,16.67,19.64,32.82,25.11,37.93,2.84,2.65,6.15,5.64,8.92,8.13a8.9,8.9,0,0,0,11.9,0c2.77-2.49,6.07-5.48,8.91-8.13C75.37,78.81,95,62.66,95,46A22,22,0,0,0,73,24Z" fill="currentColor"></path><path class="LikeButton_svgLikeInner__uiexS" d="M66.25,76.42c-.71.64-1.32,1.2-1.82,1.67-2.51,2.33-5.39,5-7.94,7.25a2.21,2.21,0,0,1-3,0C51,83,48.1,80.42,45.59,78.09c-.5-.47-1.12-1-1.82-1.67C38.09,71.29,23,57.67,23,46A14,14,0,0,1,37,32a15.92,15.92,0,0,1,11.65,5.23l4.73,5a2.2,2.2,0,0,0,3.23,0l4.72-5A16.06,16.06,0,0,1,73,32,14,14,0,0,1,87,46C87,57.67,71.93,71.29,66.25,76.42Z" fill="currentColor"></path><g class="LikeButton_svgLikeDecoration__78UjB"><circle cx="41.5" cy="9.5" fill="#3ea8ff" r="3.5"></circle><circle cx="98.5" cy="26.5" fill="#ffdc6e" r="3.5"></circle><circle cx="13" cy="19" fill="#c067f4" r="5"></circle><circle cx="77" cy="9" fill="#f76685" r="5"></circle><circle cx="26.5" cy="92.5" fill="#f76685" r="3.5"></circle><circle cx="105.5" cy="48.5" fill="#c067f4" r="3.5"></circle><circle cx="4.5" cy="60.5" fill="#3ea8ff" r="3.5"></circle><circle cx="94.5" cy="73.5" fill="#3ea8ff" r="1.5"></circle><circle cx="16.5" cy="75.5" fill="#ffdc6e" r="1.5"></circle><circle cx="78.5" cy="91.5" fill="#ffdc6e" r="1.5"></circle></g></svg></button><span class="LikeButton_likedCount__nJzwt">23</span></div><button class="ThreadItemContent_reply___ZYlC"><svg viewBox="0 0 27 27" aria-label="コメント" class="ThreadItemContent_replySvg__Hn2Qs" height="19" width="19"><path fill="currentColor" d="M5.9,25.3a1.27,1.27,0,0,1-.6-.1,1.68,1.68,0,0,1-.9-1.3V18.8a8.53,8.53,0,0,1-2.2-6.4C2.2,6.5,6.9,2.3,13.5,2.3S24.8,6.6,24.8,12.4,20,22.6,13.5,22.6a6.36,6.36,0,0,1-2.5-.3L6.7,25A1.6,1.6,0,0,1,5.9,25.3ZM13.5,4.7c-5.2,0-8.8,3.2-8.8,7.7,0,2.4.5,3.7,1.8,5a1.09,1.09,0,0,1,.4.9V22l3.3-2.1a1.38,1.38,0,0,1,1.1-.1,4.49,4.49,0,0,0,2.3.4c5.2,0,8.8-3.2,8.8-7.7S18.7,4.7,13.5,4.7Z"></path></svg><span>1</span></button></footer></div><div class="ThreadItemContent_children__xggXO"><article class="ThreadItemContent_childItem__TC_O8" id="comment-664c4074c7dfbc"><header class="ThreadHeader_header__rscC4"><a class="ThreadHeader_userAvatar__zumMm ThreadItemContent_avatarContainer__xS_s_" href="/aiya000"><img alt="あいや - aiya000" class="AvatarImage_plain__Fgp4R " height="36" loading="lazy" referrerPolicy="no-referrer" src="https://lh3.googleusercontent.com/a-/AOh14GjYUC4AwqqWm1VfUkbAqstNkkPEeME9Ct4V5S7b=s80-c" width="36"/></a><a class="ThreadHeader_userName__TmgaQ" href="/aiya000">あいや - aiya000</a><a class="ThreadHeader_dateContainer__349dg" href="#comment-664c4074c7dfbc"><time aria-label="2025年1月19日 21時20分" data-tooltip-for-desktop="true" data-tooltip-position="top" dateTime="2025-01-19T12:20:38+00:00" role="tooltip">2ヶ月前</time></a><div class="ThreadHeader_actionContainer__8UItF"><button aria-label="メニューを開く" class="PopoverMenuButton_menuButton__hKCa_"><svg viewBox="0 0 27 27" height="16" width="16"><path fill="currentColor" d="M12.74,20.53,3.48,11.35a.75.75,0,0,1,0-1.07L4.71,9.05a.75.75,0,0,1,1.07,0l7.49,7.41,7.49-7.41a.74.74,0,0,1,1.06,0l1.24,1.23a.77.77,0,0,1,0,1.07L13.8,20.53A.74.74,0,0,1,12.74,20.53Z"></path></svg></button></div></header><div class="ThreadItemContent_content__Ivb_O"><div class="InsertButtonToCodeBlock_insertButtonWrapper__ueql2"><div class="znc BodyCommentContent_bodyCommentContainer__5up6o"><p data-line="0" class="code-line">そこまで示すの、この記事の本筋とはそれると思います。<br> そこまで読みたいなら、他の記事を参照するのがいいと思う。</p> </div></div><footer class="ThreadItemContent_footer__WEMyQ"><div class="LikeButton_container__YlckE style-icon"><button aria-label="いいね" class="LikeButton_button__ZwdG4" data-pressed="false"><svg class="LikeButton_svgLike__Gl0Sz" viewBox="0 0 110 110"><path class="LikeButton_svgLikeLine__f9txR" d="M73,24a23.78,23.78,0,0,0-15.89,6.19,3.14,3.14,0,0,1-4.18,0A23.81,23.81,0,0,0,37,24a22,22,0,0,0-22,22c0,16.67,19.64,32.82,25.11,37.93,2.84,2.65,6.15,5.64,8.92,8.13a8.9,8.9,0,0,0,11.9,0c2.77-2.49,6.07-5.48,8.91-8.13C75.37,78.81,95,62.66,95,46A22,22,0,0,0,73,24Z" fill="currentColor"></path><path class="LikeButton_svgLikeInner__uiexS" d="M66.25,76.42c-.71.64-1.32,1.2-1.82,1.67-2.51,2.33-5.39,5-7.94,7.25a2.21,2.21,0,0,1-3,0C51,83,48.1,80.42,45.59,78.09c-.5-.47-1.12-1-1.82-1.67C38.09,71.29,23,57.67,23,46A14,14,0,0,1,37,32a15.92,15.92,0,0,1,11.65,5.23l4.73,5a2.2,2.2,0,0,0,3.23,0l4.72-5A16.06,16.06,0,0,1,73,32,14,14,0,0,1,87,46C87,57.67,71.93,71.29,66.25,76.42Z" fill="currentColor"></path><g class="LikeButton_svgLikeDecoration__78UjB"><circle cx="41.5" cy="9.5" fill="#3ea8ff" r="3.5"></circle><circle cx="98.5" cy="26.5" fill="#ffdc6e" r="3.5"></circle><circle cx="13" cy="19" fill="#c067f4" r="5"></circle><circle cx="77" cy="9" fill="#f76685" r="5"></circle><circle cx="26.5" cy="92.5" fill="#f76685" r="3.5"></circle><circle cx="105.5" cy="48.5" fill="#c067f4" r="3.5"></circle><circle cx="4.5" cy="60.5" fill="#3ea8ff" r="3.5"></circle><circle cx="94.5" cy="73.5" fill="#3ea8ff" r="1.5"></circle><circle cx="16.5" cy="75.5" fill="#ffdc6e" r="1.5"></circle><circle cx="78.5" cy="91.5" fill="#ffdc6e" r="1.5"></circle></g></svg></button><span class="LikeButton_likedCount__nJzwt">18</span></div></footer></div></article><div class="ThreadItemContent_addReplyContainer__cV93C"><button class="ThreadItemContent_addReplyButton__2Y8xI">返信を追加</button></div></div></article></div><div class="ArticleComments_commentItemContainer__K2ijm"><article class="ThreadItemContent_parentItem__2BweX" id="comment-9087e2fe1df096"><header class="ThreadHeader_header__rscC4"><a class="ThreadHeader_userAvatar__zumMm ThreadItemContent_avatarContainer__xS_s_" href="/juners"><img alt="juner" class="AvatarImage_plain__Fgp4R " height="36" loading="lazy" referrerPolicy="no-referrer" src="https://lh3.googleusercontent.com/a-/AOh14GjI-6SfvPh1poC9vc1aJUy1hzPtGX5EtfPtiC1xAdw=s80-c" width="36"/></a><a class="ThreadHeader_userName__TmgaQ" href="/juners">juner</a><a class="ThreadHeader_dateContainer__349dg" href="#comment-9087e2fe1df096"><time aria-label="2025年1月20日 10時18分" data-tooltip-for-desktop="true" data-tooltip-position="top" dateTime="2025-01-20T01:18:23+00:00" role="tooltip">2ヶ月前</time></a><div class="ThreadHeader_actionContainer__8UItF"><button aria-label="メニューを開く" class="PopoverMenuButton_menuButton__hKCa_"><svg viewBox="0 0 27 27" height="16" width="16"><path fill="currentColor" d="M12.74,20.53,3.48,11.35a.75.75,0,0,1,0-1.07L4.71,9.05a.75.75,0,0,1,1.07,0l7.49,7.41,7.49-7.41a.74.74,0,0,1,1.06,0l1.24,1.23a.77.77,0,0,1,0,1.07L13.8,20.53A.74.74,0,0,1,12.74,20.53Z"></path></svg></button></div></header><div class="ThreadItemContent_content__Ivb_O"><div class="InsertButtonToCodeBlock_insertButtonWrapper__ueql2"><div class="znc BodyCommentContent_bodyCommentContainer__5up6o"><blockquote data-line="0" class="code-line"> <p data-line="0" class="code-line">実際にuserIDが1001のユーザーが存在していれば、なりすましログインされる危険があります。<br> このように他人のセッションに侵入する攻撃を、「セッションハイジャック」と呼びます。<br> ...中略...<br> そこでセッションを使う</p> </blockquote> <p data-line="5" class="code-line">これはセッションハイジャックというよりもなりすましログインな気も……？（「セッションを使う」の前な為</p> </div></div><footer class="ThreadItemContent_footer__WEMyQ"><div class="LikeButton_container__YlckE style-icon"><button aria-label="いいね" class="LikeButton_button__ZwdG4" data-pressed="false"><svg class="LikeButton_svgLike__Gl0Sz" viewBox="0 0 110 110"><path class="LikeButton_svgLikeLine__f9txR" d="M73,24a23.78,23.78,0,0,0-15.89,6.19,3.14,3.14,0,0,1-4.18,0A23.81,23.81,0,0,0,37,24a22,22,0,0,0-22,22c0,16.67,19.64,32.82,25.11,37.93,2.84,2.65,6.15,5.64,8.92,8.13a8.9,8.9,0,0,0,11.9,0c2.77-2.49,6.07-5.48,8.91-8.13C75.37,78.81,95,62.66,95,46A22,22,0,0,0,73,24Z" fill="currentColor"></path><path class="LikeButton_svgLikeInner__uiexS" d="M66.25,76.42c-.71.64-1.32,1.2-1.82,1.67-2.51,2.33-5.39,5-7.94,7.25a2.21,2.21,0,0,1-3,0C51,83,48.1,80.42,45.59,78.09c-.5-.47-1.12-1-1.82-1.67C38.09,71.29,23,57.67,23,46A14,14,0,0,1,37,32a15.92,15.92,0,0,1,11.65,5.23l4.73,5a2.2,2.2,0,0,0,3.23,0l4.72-5A16.06,16.06,0,0,1,73,32,14,14,0,0,1,87,46C87,57.67,71.93,71.29,66.25,76.42Z" fill="currentColor"></path><g class="LikeButton_svgLikeDecoration__78UjB"><circle cx="41.5" cy="9.5" fill="#3ea8ff" r="3.5"></circle><circle cx="98.5" cy="26.5" fill="#ffdc6e" r="3.5"></circle><circle cx="13" cy="19" fill="#c067f4" r="5"></circle><circle cx="77" cy="9" fill="#f76685" r="5"></circle><circle cx="26.5" cy="92.5" fill="#f76685" r="3.5"></circle><circle cx="105.5" cy="48.5" fill="#c067f4" r="3.5"></circle><circle cx="4.5" cy="60.5" fill="#3ea8ff" r="3.5"></circle><circle cx="94.5" cy="73.5" fill="#3ea8ff" r="1.5"></circle><circle cx="16.5" cy="75.5" fill="#ffdc6e" r="1.5"></circle><circle cx="78.5" cy="91.5" fill="#ffdc6e" r="1.5"></circle></g></svg></button></div><button class="ThreadItemContent_reply___ZYlC"><svg viewBox="0 0 27 27" aria-label="コメント" class="ThreadItemContent_replySvg__Hn2Qs" height="19" width="19"><path fill="currentColor" d="M5.9,25.3a1.27,1.27,0,0,1-.6-.1,1.68,1.68,0,0,1-.9-1.3V18.8a8.53,8.53,0,0,1-2.2-6.4C2.2,6.5,6.9,2.3,13.5,2.3S24.8,6.6,24.8,12.4,20,22.6,13.5,22.6a6.36,6.36,0,0,1-2.5-.3L6.7,25A1.6,1.6,0,0,1,5.9,25.3ZM13.5,4.7c-5.2,0-8.8,3.2-8.8,7.7,0,2.4.5,3.7,1.8,5a1.09,1.09,0,0,1,.4.9V22l3.3-2.1a1.38,1.38,0,0,1,1.1-.1,4.49,4.49,0,0,0,2.3.4c5.2,0,8.8-3.2,8.8-7.7S18.7,4.7,13.5,4.7Z"></path></svg><span>返信</span></button></footer></div></article></div></div></section></div></div></section><aside class="View_sidebarContainer__YwcNH"><div class="ArticleSidebar_container__jSRJw"><div><div class="ArticleSidebar_user__vJ7nz ArticleSidebar_sidebarCard__AtM_Z"><div class="SidebarUserBio_container__iWemi"><a href="/mesi"><img alt="MESI" class="AvatarImage_border__pDIjF AvatarImage_plain__Fgp4R " height="60" loading="lazy" referrerPolicy="no-referrer" src="https://lh3.googleusercontent.com/a/AGNmyxYOPkkHxBBqioZ1oK3p8oz-Feyvo0h_Odi3KljSp0o=s96-c" width="60"/></a><div class="SidebarUserBio_author__cM7pP"><a class="SidebarUserBio_name__0zFdT" href="/mesi">MESI</a><div class="SidebarUserBio_actions__oFupD"><a class="SidebarUserBio_link__nnh24" href="https://github.com/mesichicken" rel="nofollow noopener noreferrer" target="_blank"><span aria-label="@mesichicken" data-tooltip-for-desktop="true" data-tooltip-position="bottom" role="tooltip"><svg x="0px" y="0px" viewBox="0 0 27 27" style="enable-background:new 0 0 27 27" xml:space="preserve" aria-label="GitHub"><path fill="currentColor" d="M13.4,1.2C7,1,1.8,6,1.7,12.4c0,0.1,0,0.4,0,0.5c0,5.1,3.2,9.8,8.2,11.5c0.6,0.1,0.7-0.2,0.7-0.6s0-1.8,0-2.9 c0,0-3.3,0.6-4-1.5c0,0-0.6-1.3-1.3-1.8c0,0-1.1-0.7,0.1-0.7c0.7,0.1,1.5,0.6,1.8,1.2c0.6,1.2,2.2,1.7,3.4,1h0.1 c0.1-0.6,0.4-1.2,0.7-1.6C8.7,17.1,6,16.9,6,12.3c0-1.1,0.5-2.1,1.2-2.8c0-1.1,0-2.2,0.3-3.2c1-0.4,3.3,1.3,3.3,1.3c2-0.6,4-0.6,6,0 c0,0,2.2-1.6,3.2-1.2c0.5,1,0.5,2.2,0.1,3.2c0.7,0.7,1.2,1.8,1.2,2.8c0,4.5-2.8,5-5.5,5.2c0.6,0.6,0.9,1.3,0.7,2.2c0,1.7,0,3.5,0,4 s0.2,0.6,0.7,0.6c4.9-1.7,8.2-6.2,8-11.5c0.1-6.4-5.1-11.6-11.6-11.6C13.5,1.2,13.4,1.2,13.4,1.2z"></path></svg></span></a><a class="SidebarUserBio_twitterLink__yGgDq SidebarUserBio_link__nnh24" href="https://twitter.com/mesichicken" rel="nofollow noopener noreferrer" target="_blank"><span aria-label="@mesichicken" data-tooltip-for-desktop="true" data-tooltip-position="bottom" role="tooltip"><svg width="27" height="28" viewBox="0 0 27 28" fill="none" aria-label="X(Twitter)"><g clip-path="url(#clip0_1_18)"><path d="M16.0687 11.7356L26.12 0H23.7382L15.0106 10.1899L8.03988 0H0L10.5411 15.4089L0 27.7155H2.38199L11.5985 16.9546L18.9601 27.7155H27L16.0681 11.7356H16.0687ZM12.8062 15.5447L11.7382 14.0103L3.24025 1.80106H6.89884L13.7568 11.6543L14.8248 13.1887L23.7393 25.9963H20.0807L12.8062 15.5452V15.5447Z" fill="currentColor"></path></g><defs><clipPath id="clip0_1_18"><rect width="27" height="27.7297" fill="white"></rect></clipPath></defs></svg></span></a><a class="SidebarUserBio_link__nnh24" href="https://www.mesihome.com" rel="nofollow noopener noreferrer" style="margin-left:-2px" target="_blank"><span aria-label="mesihome.com" data-tooltip-for-desktop="true" data-tooltip-position="bottom" role="tooltip"><svg x="0px" y="0px" viewBox="0 0 27 27" style="enable-background:new 0 0 27 27" xml:space="preserve" aria-label="リンク"><path fill="currentColor" d="M9.6,23.9c-3.6,0-6.5-3-6.5-6.6c0-1.7,0.7-3.4,1.9-4.6l2.3-2.3c0.5-0.4,1.2-0.4,1.6,0.1c0.4,0.4,0.4,1,0,1.5l-2.3,2.3 c-1.7,1.7-1.7,4.4,0,6.1s4.4,1.7,6.1,0l2.3-2.3c0.5-0.4,1.2-0.4,1.6,0.1c0.4,0.4,0.4,1,0,1.5L14.3,22C13,23.2,11.4,23.9,9.6,23.9z M10.6,17.5c-0.6,0-1.1-0.5-1.1-1.1c0-0.3,0.1-0.6,0.3-0.8l5.8-5.8c0.4-0.4,1.1-0.4,1.6,0c0.4,0.4,0.4,1.1,0,1.6l-5.8,5.8 C11.2,17.4,10.9,17.5,10.6,17.5z M18.9,16.9c-0.3,0-0.6-0.1-0.8-0.3c-0.4-0.4-0.4-1.1,0-1.6l2.3-2.3c1.7-1.7,1.7-4.4,0-6.1 c-1.7-1.7-4.4-1.7-6.1,0L12,8.9c-0.5,0.4-1.2,0.4-1.6-0.1c-0.4-0.4-0.4-1,0-1.5L12.7,5c2.6-2.6,6.7-2.6,9.2,0s2.6,6.7,0,9.2 l-2.3,2.4C19.4,16.8,19.1,16.9,18.9,16.9z"></path></svg></span></a></div></div></div><span style="display:block;height:1rem;flex-shrink:0"></span><p class="Paragraph_common__yRSrj Paragraph_description-sm__vmr99 Paragraph_decorateLink__aIAFh"><span>よわよわエンジニア4年目。開発がしたいです。</span></p><span style="display:block;height:1rem;flex-shrink:0"></span><button class="Button_primary__VcoA9 Button_baseStyle__Vhn6Y Button_full__RIG_z Button_large__jO0IW Button_fontBold__BN6Co">バッジを贈る</button><div class="ArticleSidebar_badgeAbout__Y3cIb"><a class="TextAnchor_anchorColoredSubtle__ZUESd TextAnchor_anchorColored__PlNnP ArticleSidebar_badgeAboutLink__aqdNT" href="/faq#badges">バッジを贈るとは<svg viewBox="0 0 24 24" fill="currentColor" class="TextAnchor_icon__1hdMx"><path d="M0 0h24v24H0z" fill="none"></path><path d="M12 4l-1.41 1.41L16.17 11H4v2h12.17l-5.58 5.59L12 20l8-8z"></path></svg></a></div></div></div><span style="display:block;height:1.5rem;flex-shrink:0"></span><div class="ArticleSidebar_sticky__W61mq"><div style="display:flex;gap:1.5rem;flex-direction:column;align-items:stretch;flex-wrap:nowrap"><div class="ArticleSidebarToc_toc__dUPn8"><div class="ArticleSidebarToc_tocTitle__A3VjO">目次</div><div class="ArticleToc_toc__WF75u"><ol class="ol-depth-1"><li><a href="#%E3%81%9D%E3%82%82%E3%81%9D%E3%82%82%E3%81%AA%E3%81%9C%E3%82%AF%E3%83%83%E3%82%AD%E3%83%BC%E3%82%84%E3%82%89%E3%82%BB%E3%83%83%E3%82%B7%E3%83%A7%E3%83%B3%E3%81%8C%E5%BF%85%E8%A6%81%E3%81%AA%E3%81%AE%E3%81%8B">そもそもなぜクッキーやらセッションが必要なのか</a></li><li><a href="#%E3%81%9D%E3%81%93%E3%81%A7%E3%82%AF%E3%83%83%E3%82%AD%E3%83%BC%E3%82%92%E5%88%A9%E7%94%A8%E3%81%99%E3%82%8B">そこでクッキーを利用する</a></li><li><a href="#%E3%82%AF%E3%83%83%E3%82%AD%E3%83%BC%E3%81%AE%E5%8D%B1%E9%99%BA%E6%80%A7%E3%81%AB%E3%81%A4%E3%81%84%E3%81%A6">クッキーの危険性について</a></li><li><a href="#%E3%81%9D%E3%81%93%E3%81%A7%E3%82%BB%E3%83%83%E3%82%B7%E3%83%A7%E3%83%B3%E3%82%92%E4%BD%BF%E3%81%86">そこでセッションを使う</a></li><li><a href="#%E3%82%BB%E3%83%83%E3%82%B7%E3%83%A7%E3%83%B3%E3%81%AE%E4%BB%95%E7%B5%84%E3%81%BF">セッションの仕組み</a></li><li><a href="#%E3%82%BB%E3%83%83%E3%82%B7%E3%83%A7%E3%83%B3%E3%81%AE%E3%83%A1%E3%83%AA%E3%83%83%E3%83%88">セッションのメリット</a></li><li><a href="#%E3%82%BB%E3%83%83%E3%82%B7%E3%83%A7%E3%83%B3%E3%81%AE%E6%B3%A8%E6%84%8F%E7%82%B9">セッションの注意点</a></li><li><a href="#%E3%81%BE%E3%81%A8%E3%82%81">まとめ</a></li><li><a href="#%E5%8F%82%E8%80%83%E6%96%87%E7%8C%AE">参考文献</a></li></ol></div></div></div></div></div></aside></div></div></div></div><div id="related-contents"></div></article><footer class="AppFooter_footer__pqSnY"><div class="Container_wide__ykGLh Container_common__figYY"><div class="AppFooter_inner__uGxbT" data-nosnippet="true"><div class="AppFooter_brandingColumn__BikTT"><a class="ZennLogo_logoLink__NJS2l" href="/"><svg x="0px" y="0px" viewBox="0 0 377.4 88.3" aria-label="Zenn | エンジニアのための情報共有コミュニティ" class="ZennLogo_logoSvg__yOhcg" height="20" width="85"><title>Zenn</title><g fill="currentColor"><path d="M233,56.8h-39c0.5,3.5,2.2,6.8,4.8,9.2c2.7,2.3,6.2,3.5,9.8,3.4c2.8,0,5.6-0.5,8.2-1.7c2.5-1.1,4.8-2.8,6.5-5l8.2,9.5 c-2.5,3.4-5.7,6.1-9.5,7.9c-4.6,2.2-9.6,3.3-14.7,3.2c-5.7,0.1-11.4-1.2-16.5-4c-4.5-2.5-8.2-6.3-10.7-10.9s-3.8-9.8-3.7-15.1v-2.2 c-0.1-5.7,1.1-11.3,3.5-16.5c2.2-4.7,5.7-8.6,10.1-11.3c4.7-2.8,10.1-4.2,15.5-4.1c5.2-0.1,10.3,1.1,14.9,3.7 c4.1,2.5,7.4,6.2,9.4,10.5c2.2,5.1,3.3,10.5,3.2,16.1V56.8z M216.1,43.9c0.1-2.9-0.9-5.7-2.8-7.9c-1.8-1.9-4.4-2.9-7.9-2.9 c-2.9-0.1-5.8,1.1-7.7,3.2c-2,2.6-3.3,5.7-3.6,9h22V43.9z"></path><path d="M128.3,67.9h36.1v14.7h-56.9V72l35.8-54.3h-36.2V2.9h56.6v10.4L128.3,67.9z"></path><path d="M248.8,50.7c0-19.1,12.7-29.2,28.2-29.2s27.9,10.1,27.9,29.2V82h-16V51.4c0-10.6-4.8-16.1-12-16.1s-12.4,5.5-12.4,16.1 v30.7h-15.8L248.8,50.7L248.8,50.7z"></path><path d="M320.3,50.7c0-19.1,12.7-29.2,28.2-29.2s27.9,10.1,27.9,29.2V82h-16V51.4c0-10.6-4.8-16.1-12-16.1S336,40.8,336,51.4v30.7 h-15.8L320.3,50.7L320.3,50.7z"></path></g><path fill="#3EA8FF" class="st0" d="M2.4,83.3h17c0.9,0,1.7-0.5,2.2-1.2L68.4,5.2C69,4.2,68.3,3,67.1,3H51c-0.8,0-1.5,0.4-1.9,1.1L1.6,81.9 C1.3,82.5,1.7,83.3,2.4,83.3z"></path><path fill="#3EA8FF" class="st0" d="M61,82.1l22.1-35.5c0.7-1.1-0.1-2.5-1.4-2.5H65.7c-0.6,0-1.2,0.3-1.5,0.8L41.5,81.2c-0.6,0.9,0.1,2.1,1.2,2.1 h16.3C59.8,83.3,60.6,82.9,61,82.1z"></path></svg></a><p class="AppFooter_siteDescription__NWGP2">エンジニアのための<br aria-hidden="true"/>情報共有コミュニティ</p></div><div class="AppFooter_navColumns__ahV9g"><nav class="AppFooter_navColumn__47qTk"><h4 class="AppFooter_navColumnTitle__vVeiQ">About</h4><ul><li><div style="display:flex;gap:0.5rem;flex-direction:row;align-items:center;flex-wrap:nowrap"><a href="/about">Zennについて</a></div></li><li><a href="https://classmethod.jp" rel="nofollow noopener noreferrer" target="_blank">運営会社</a></li><li><a href="https://info.zenn.dev" rel="nofollow noopener noreferrer" target="_blank">お知らせ・リリース</a></li><li><div style="display:flex;gap:0.5rem;flex-direction:row;align-items:center;flex-wrap:nowrap"><a href="/events">イベント</a></div></li></ul></nav><nav class="AppFooter_navColumn__47qTk"><h4 class="AppFooter_navColumnTitle__vVeiQ">Guides</h4><ul><li><div style="display:flex;gap:0.5rem;flex-direction:row;align-items:center;flex-wrap:nowrap"><a href="/manual">使い方</a></div></li><li><div style="display:flex;gap:0.5rem;flex-direction:row;align-items:center;flex-wrap:nowrap"><a href="/biz-lp">法人向けメニュー</a><span class="NewLabel_newLabelSecondary__6Iy_T NewLabel_newLabel__Xva_r">New</span></div></li><li><div style="display:flex;gap:0.5rem;flex-direction:row;align-items:center;flex-wrap:nowrap"><a href="/publications">Publication / Pro</a></div></li><li><div style="display:flex;gap:0.5rem;flex-direction:row;align-items:center;flex-wrap:nowrap"><a href="/faq">よくある質問</a></div></li></ul></nav><nav class="AppFooter_navColumn__47qTk"><h4 class="AppFooter_navColumnTitle__vVeiQ">Links</h4><ul><li><a href="https://twitter.com/zenn_dev" rel="nofollow noopener noreferrer" target="_blank">X(Twitter)</a></li><li><a href="https://github.com/zenn-dev" rel="nofollow noopener noreferrer" target="_blank">GitHub</a></li><li><div style="display:flex;gap:0.5rem;flex-direction:row;align-items:center;flex-wrap:nowrap"><a href="/mediakit">メディアキット</a></div></li></ul></nav><nav class="AppFooter_navColumn__47qTk"><h4 class="AppFooter_navColumnTitle__vVeiQ">Legal</h4><ul><li><div style="display:flex;gap:0.5rem;flex-direction:row;align-items:center;flex-wrap:nowrap"><a href="/terms">利用規約</a></div></li><li><div style="display:flex;gap:0.5rem;flex-direction:row;align-items:center;flex-wrap:nowrap"><a href="/privacy">プライバシーポリシー</a></div></li><li><div style="display:flex;gap:0.5rem;flex-direction:row;align-items:center;flex-wrap:nowrap"><a href="/terms/transaction-law">特商法表記</a></div></li></ul></nav></div></div><div class="AppFooter_copyright__J_Jbe" data-nosnippet="true"><div class="AnnouncementPopUp_hiddenWrapper__ThDWT"><div aria-hidden="true" class="PopUp_popup__lIgfz AnnouncementPopUp_container__Pb5q2"><div></div></div></div><a href="https://classmethod.jp/"><svg width="115" height="25" viewBox="0 0 271 60" class="AppFooter_classmethodLogo__1RFuV"><g clip-path="url(#clip0_2_90)"><path d="M264.636 3.1617C265.475 3.16128 266.279 3.49393 266.873 4.08651C267.466 4.67909 267.8 5.48309 267.801 6.32175V53.0703C267.801 53.5668 267.703 54.0585 267.513 54.5171C267.323 54.9758 267.045 55.3926 266.694 55.7437C266.342 56.0948 265.926 56.3733 265.467 56.5633C265.008 56.7533 264.517 56.851 264.02 56.851H6.93132C5.92861 56.851 4.96697 56.4527 4.25795 55.7437C3.54892 55.0347 3.1506 54.073 3.1506 53.0703V6.93139C3.1506 5.92868 3.54892 4.96704 4.25795 4.25802C4.96697 3.54899 5.92861 3.15067 6.93132 3.15067H225.05C225.137 3.15178 225.221 3.17053 225.3 3.20575C225.379 3.24097 225.449 3.29192 225.507 3.35546L233.987 12.76C234.28 13.0541 234.628 13.2875 235.011 13.4467C235.394 13.606 235.805 13.688 236.22 13.688C236.635 13.688 237.046 13.606 237.429 13.4467C237.812 13.2875 238.16 13.0541 238.453 12.76L246.933 3.35231C246.99 3.28778 247.061 3.23616 247.139 3.20086C247.218 3.16555 247.303 3.14737 247.39 3.14752H264.65L264.636 3.1617ZM264.636 7.17095e-05H246.1C246.006 0.000759845 245.914 0.0205359 245.828 0.058188C245.742 0.0958401 245.665 0.150575 245.602 0.219038L237.347 9.39516C237.334 9.40757 237.323 9.4213 237.313 9.43611C237.018 9.72475 236.622 9.88642 236.21 9.88642C235.797 9.88642 235.402 9.72475 235.107 9.43611C235.094 9.42426 235.082 9.41045 235.072 9.39516L226.843 0.239517C226.775 0.162922 226.691 0.10189 226.597 0.0605717C226.504 0.0192536 226.402 -0.00138099 226.3 7.17095e-05H6.93132C5.09302 7.17095e-05 3.33001 0.730333 2.03014 2.03021C0.730262 3.33008 0 5.09309 0 6.93139L0 53.0719C0 54.9102 0.730262 56.6732 2.03014 57.9731C3.33001 59.273 5.09302 60.0032 6.93132 60.0032H264.02C265.858 60.0032 267.621 59.273 268.921 57.9731C270.221 56.6732 270.951 54.9102 270.951 53.0719V6.31545C270.949 4.64114 270.283 3.03602 269.099 1.8521C267.916 0.668193 266.31 0.00215599 264.636 7.17095e-05Z" fill="currentColor"></path><path d="M29.9653 23.8863C30.0769 23.8895 30.1866 23.9161 30.2873 23.9644C30.388 24.0126 30.4775 24.0813 30.5501 24.1662C30.6226 24.251 30.6766 24.3501 30.7086 24.4571C30.7405 24.5641 30.7498 24.6766 30.7357 24.7873V28.3554C30.7357 28.85 30.4679 29.0769 29.9653 29.0769H22.6008C18.4483 29.0769 17.815 30.4789 17.815 36.1657C17.815 41.8526 18.4452 43.2546 22.6008 43.2546H29.9653C30.46 43.2546 30.7357 43.4814 30.7357 43.9351V47.5457C30.7357 48.0892 30.4679 48.316 29.9653 48.4058C27.5367 48.8538 25.0703 49.0648 22.6008 49.0359C12.982 49.0359 11.1326 46.1074 11.1326 36.1642C11.1326 26.2209 12.982 23.2955 22.6008 23.2955C25.0681 23.2729 27.5325 23.4684 29.9653 23.88" fill="currentColor"></path><path d="M39.7637 17.6701C39.9308 17.6701 40.0911 17.7365 40.2093 17.8547C40.3274 17.9729 40.3938 18.1331 40.3938 18.3003V48.4389C40.3938 48.606 40.3274 48.7663 40.2093 48.8845C40.0911 49.0026 39.9308 49.069 39.7637 49.069H34.3872C34.297 49.0756 34.2064 49.0626 34.1216 49.0311C34.0368 48.9995 33.9598 48.9501 33.8959 48.8861C33.8319 48.8221 33.7825 48.7452 33.7509 48.6604C33.7193 48.5756 33.7064 48.485 33.713 48.3948V18.3444C33.7069 18.258 33.7187 18.1713 33.7477 18.0897C33.7766 18.008 33.8221 17.9333 33.8812 17.87C33.9403 17.8067 34.0118 17.7563 34.0913 17.722C34.1708 17.6876 34.2565 17.6699 34.3431 17.6701H39.7637Z" fill="currentColor"></path><path d="M169.156 35.857V37.259C169.156 38.1601 168.888 38.4767 167.711 38.4767H153.533C153.623 42.541 154.709 43.2624 158.636 43.2624H166.679C166.846 43.2624 167.007 43.3288 167.125 43.447C167.243 43.5652 167.309 43.7255 167.309 43.8926V47.6733C167.32 47.8536 167.26 48.031 167.143 48.1682C167.025 48.3054 166.859 48.3917 166.679 48.409C163.831 48.8866 160.945 49.0976 158.058 49.0391C148.934 49.0391 146.716 46.4682 146.716 36.1673C146.716 25.8664 148.929 23.2955 158.058 23.2955C167.187 23.2955 169.121 25.7782 169.168 35.8507M153.499 34.0911H162.437C162.388 30.1166 161.35 29.0785 158.058 29.0785C154.765 29.0785 153.54 30.1166 153.499 34.0911Z" fill="currentColor"></path><path d="M183.056 43.2908H181.07C179.083 43.2908 178.409 42.9332 178.409 40.9877V29.1462H182.706C182.793 29.1449 182.879 29.126 182.958 29.0907C183.037 29.0553 183.108 29.0043 183.167 28.9407C183.226 28.8771 183.271 28.8022 183.3 28.7206C183.33 28.6389 183.342 28.5522 183.337 28.4657V23.9556C183.337 23.7885 183.27 23.6282 183.152 23.51C183.034 23.3919 182.874 23.3255 182.706 23.3255H178.409V18.2971C178.407 18.1308 178.339 17.9719 178.222 17.8542C178.104 17.7366 177.945 17.6694 177.779 17.667H172.355C172.188 17.667 172.028 17.7334 171.91 17.8515C171.791 17.9697 171.725 18.13 171.725 18.2971V43.242C171.725 48.9351 175.246 49.0706 179.129 49.0706C180.418 49.0631 181.704 48.927 182.966 48.6642C183.072 48.6611 183.176 48.6356 183.272 48.5893C183.367 48.5431 183.452 48.4772 183.52 48.396C183.588 48.3147 183.638 48.22 183.667 48.118C183.696 48.0159 183.703 47.909 183.688 47.804V43.9635C183.694 43.8771 183.682 43.7904 183.653 43.7088C183.624 43.6271 183.579 43.5524 183.52 43.4891C183.46 43.4258 183.389 43.3754 183.309 43.3411C183.23 43.3067 183.144 43.289 183.058 43.2892" fill="currentColor"></path><path d="M234.551 36.1673C234.551 46.4603 232.426 49.0391 223.034 49.0391C213.642 49.0391 211.517 46.4682 211.517 36.1673C211.517 25.8664 213.683 23.2955 223.034 23.2955C232.385 23.2955 234.551 25.8255 234.551 36.1673ZM218.248 36.1673C218.248 41.8604 218.922 43.2561 223.034 43.2561C227.146 43.2561 227.867 41.8541 227.867 36.1673C227.867 30.4805 227.193 29.0785 223.034 29.0785C218.875 29.0785 218.248 30.4805 218.248 36.1673Z" fill="currentColor"></path><path d="M202.566 23.6594C199.378 23.1745 196.135 23.1745 192.947 23.6594V18.3034C192.947 18.1363 192.881 17.976 192.763 17.8578C192.645 17.7397 192.484 17.6733 192.317 17.6733H186.892C186.725 17.6733 186.565 17.7397 186.446 17.8578C186.328 17.976 186.262 18.1363 186.262 18.3034V48.3916C186.256 48.478 186.268 48.5647 186.296 48.6463C186.325 48.7279 186.371 48.8027 186.43 48.866C186.489 48.9292 186.561 48.9796 186.64 49.014C186.72 49.0484 186.805 49.0661 186.892 49.0658H192.317C192.484 49.0658 192.645 48.9995 192.763 48.8813C192.881 48.7631 192.947 48.6028 192.947 48.4357V36.1799C192.947 31.3595 193.084 29.091 197.733 29.091C202.382 29.091 202.595 31.3595 202.566 36.1799C202.538 41.0633 202.566 48.4389 202.566 48.4389C202.566 48.606 202.633 48.7663 202.751 48.8844C202.869 49.0026 203.029 49.069 203.196 49.069H208.622C208.789 49.069 208.949 49.0026 209.067 48.8844C209.185 48.7663 209.252 48.606 209.252 48.4389V34.9212C209.252 27.6749 207.505 24.5526 202.568 23.6515" fill="currentColor"></path><path d="M259.138 17.4449C259.225 17.4388 259.311 17.4506 259.393 17.4796C259.475 17.5085 259.549 17.554 259.613 17.6131C259.676 17.6722 259.726 17.7437 259.761 17.8232C259.795 17.9027 259.813 17.9884 259.813 18.075V46.3831C259.813 47.6686 259.269 48.1301 257.922 48.3775C254.951 48.8327 251.949 49.065 248.943 49.0722C239.241 49.0722 237.248 46.4036 237.248 36.2492C237.248 26.0948 239.255 23.3318 248.236 23.3318C249.877 23.2852 251.519 23.3748 253.146 23.5996V18.1112C253.142 18.026 253.155 17.9408 253.185 17.8609C253.215 17.781 253.261 17.7079 253.32 17.6462C253.378 17.5845 253.449 17.5354 253.528 17.5018C253.606 17.4683 253.691 17.4511 253.776 17.4512H259.16L259.138 17.4449ZM249.066 29.1541C244.507 29.1541 243.916 30.3718 243.916 36.202C243.916 41.5312 244.28 43.2908 248.792 43.2908C250.241 43.2893 251.689 43.184 253.124 42.9758V29.1541H249.06H249.066Z" fill="currentColor"></path><path d="M64.2297 31.0649V45.7656C64.2297 47.4496 63.9887 48.0624 61.5343 48.42C58.703 48.8207 55.8479 49.0312 52.9883 49.0501C46.2146 49.0501 42.6465 48.3286 42.5583 41.2398C42.6481 35.1402 45.8113 33.8359 51.8132 33.8359H57.5473V32.2007C57.5473 30.0347 56.1925 29.0863 53.305 29.0863H45.1245C45.0383 29.0852 44.9532 29.0666 44.8744 29.0318C44.7955 28.9969 44.7245 28.9465 44.6657 28.8835C44.6068 28.8205 44.5613 28.7463 44.5319 28.6653C44.5024 28.5843 44.4897 28.4982 44.4943 28.4121V24.7054C44.4901 24.5281 44.5524 24.3557 44.6691 24.2221C44.7857 24.0886 44.9482 24.0036 45.1245 23.9839C47.8206 23.4882 50.5594 23.2624 53.3003 23.3097C62.2385 23.3097 64.2265 26.1972 64.2265 31.0791M52.3519 38.1679C50.0079 38.1679 49.1887 38.9383 49.1887 40.8774C49.1887 43.0435 50.1796 43.6342 53.0262 43.6342C54.544 43.6442 56.0586 43.4921 57.5441 43.1805V38.1679H52.3519Z" fill="currentColor"></path><path d="M76.6021 28.7618H85.994C86.0798 28.7594 86.1643 28.7399 86.2425 28.7047C86.3207 28.6694 86.3912 28.6189 86.4498 28.5562C86.5084 28.4935 86.554 28.4198 86.5839 28.3394C86.6138 28.2589 86.6275 28.1733 86.6241 28.0876V24.4093C86.6093 24.2197 86.5198 24.0437 86.3754 23.92C86.231 23.7963 86.0434 23.7349 85.8538 23.7492C84.3069 23.5917 82.2023 23.4263 79.6928 23.3507C78.9572 23.316 76.7643 23.3018 76.5028 23.3018C70.7688 23.3018 66.8841 24.6566 66.8841 29.896V30.6175C66.7176 32.1302 67.1073 33.6518 67.9804 34.8983C68.8535 36.1447 70.1503 37.0309 71.6289 37.3913C71.6289 37.3913 78.0167 39.6802 78.2231 39.7637C79.2202 40.2583 79.5778 40.8018 79.5778 41.4965V41.9502C79.5778 43.0781 78.6768 43.5728 76.9171 43.5728H67.5268C67.4402 43.5743 67.3548 43.5934 67.2757 43.6287C67.1966 43.6641 67.1255 43.7151 67.0667 43.7787C67.0078 43.8423 66.9624 43.9171 66.9332 43.9986C66.904 44.0802 66.8916 44.1668 66.8967 44.2533V47.9111C66.8967 48.1317 67.0337 48.5413 67.667 48.5854C69.2139 48.7429 71.3185 48.9083 73.828 48.9839C74.5636 49.0186 76.7565 49.0328 77.018 49.0328C82.752 49.0328 86.6367 47.678 86.6367 42.4386V41.7171C86.8032 40.2044 86.4135 38.6828 85.5404 37.4363C84.6673 36.1898 83.3705 35.3037 81.8919 34.9433C81.8919 34.9433 75.5041 32.6544 75.2977 32.5709C74.3006 32.0762 73.943 31.5328 73.943 30.8381V30.3749C73.943 29.247 74.8441 28.746 76.6037 28.746" fill="currentColor"></path><path d="M98.7933 28.7618H108.185C108.271 28.7594 108.355 28.7399 108.434 28.7047C108.512 28.6694 108.582 28.6189 108.641 28.5562C108.7 28.4935 108.745 28.4198 108.775 28.3394C108.805 28.2589 108.819 28.1733 108.815 28.0876V24.4093C108.8 24.2197 108.711 24.0437 108.567 23.92C108.422 23.7963 108.235 23.7349 108.045 23.7492C106.498 23.5917 104.394 23.4263 101.884 23.3507C101.148 23.316 98.9556 23.3018 98.6941 23.3018C92.96 23.3018 89.0753 24.6566 89.0753 29.896V30.6175C88.9088 32.1302 89.2985 33.6518 90.1716 34.8983C91.0447 36.1447 92.3416 37.0309 93.8201 37.3913C93.8201 37.3913 100.208 39.6802 100.414 39.7637C101.411 40.2583 101.769 40.8018 101.769 41.4965V41.9502C101.769 43.0781 100.868 43.5728 99.1084 43.5728H89.7164C89.6298 43.5743 89.5444 43.5934 89.4653 43.6287C89.3863 43.6641 89.3152 43.7151 89.2563 43.7787C89.1974 43.8423 89.1521 43.9171 89.1229 43.9986C89.0936 44.0802 89.0812 44.1668 89.0863 44.2533V47.9111C89.0863 48.1317 89.2234 48.5413 89.8566 48.5854C91.4036 48.7429 93.5082 48.9083 96.0176 48.9839C96.7533 49.0186 98.9461 49.0328 99.2076 49.0328C104.942 49.0328 108.826 47.678 108.826 42.4386V41.7171C108.993 40.2044 108.603 38.6828 107.73 37.4363C106.857 36.1898 105.56 35.3037 104.082 34.9433C104.082 34.9433 97.6938 32.6544 97.4874 32.5709C96.4902 32.0762 96.1326 31.5328 96.1326 30.8381V30.3749C96.1326 29.247 97.0337 28.746 98.7933 28.746" fill="currentColor"></path><path d="M134.345 23.316C132.106 23.1876 129.868 23.5785 127.806 24.4581C125.75 23.5559 123.506 23.164 121.267 23.316C113.181 23.316 111.386 25.7987 111.386 34.132V48.4137C111.386 48.5808 111.453 48.7411 111.571 48.8592C111.689 48.9774 111.849 49.0438 112.016 49.0438H117.428C117.594 49.0413 117.753 48.9742 117.87 48.8565C117.988 48.7389 118.055 48.58 118.058 48.4137V35.8444C118.058 30.3781 118.573 29.3195 121.262 29.1194C123.765 29.3053 124.384 30.2394 124.46 34.7905V48.4042C124.466 48.5709 124.536 48.7289 124.655 48.846C124.773 48.9631 124.932 49.0304 125.099 49.0343H130.51C130.678 49.0343 130.838 48.9679 130.956 48.8498C131.074 48.7316 131.141 48.5713 131.141 48.4042V34.7921C131.216 30.2331 131.835 29.299 134.338 29.1131C137.027 29.3132 137.543 30.3733 137.543 35.8381V48.4074C137.543 48.5745 137.609 48.7348 137.727 48.8529C137.845 48.9711 138.006 49.0375 138.173 49.0375H143.584C143.75 49.0354 143.909 48.9684 144.027 48.8507C144.145 48.7329 144.212 48.5738 144.214 48.4074V34.1257C144.214 25.7924 142.461 23.3097 134.334 23.3097" fill="currentColor"></path></g><defs><clipPath id="clip0_2_90"><rect width="270.951" height="60" fill="white"></rect></clipPath></defs></svg></a></div></div></footer><div id="modal-portal"></div></div><script id="__NEXT_DATA__" type="application/json" nonce="6mJefGFOGa3GG0jrqdhRyZ4vsNEr/p8TRsydaQXH2I8=">{"props":{"pageProps":{"article":{"id":358401,"postType":"Article","title":"クッキーとセッションを雰囲気で使っているエンジニアが、違いを説明できるようになる記事","slug":"8949e8db686263","commentsCount":3,"likedCount":625,"bookmarkedCount":244,"bodyLettersCount":4879,"articleType":"tech","emoji":"🍪","isSuspendingPrivate":false,"publishedAt":"2025-01-17T19:57:25.919+09:00","bodyUpdatedAt":"2025-01-17T19:53:25.826+09:00","sourceRepoUpdatedAt":null,"pinned":false,"path":"/collabostyle/articles/8949e8db686263","bodyHtml":"\u003cp data-line=\"0\" class=\"code-line\"\u003eどうもお疲れ様です。MESIです。\u003c/p\u003e\n\u003cp data-line=\"2\" class=\"code-line\"\u003eWeb系のエンジニアをやっていると普段からクッキーやらセッションやらを使うことになると思います。\u003cbr\u003e\n皆さんの職場でも、こんな言葉を耳にするのではないでしょうか。\u003c/p\u003e\n\u003cul data-line=\"5\" class=\"code-line\"\u003e\n\u003cli data-line=\"5\" class=\"code-line\"\u003e「クッキーに保存しよう」\u003c/li\u003e\n\u003cli data-line=\"6\" class=\"code-line\"\u003e「クッキー削除しよう」\u003c/li\u003e\n\u003cli data-line=\"7\" class=\"code-line\"\u003e「セッションに保存しよう」\u003c/li\u003e\n\u003cli data-line=\"8\" class=\"code-line\"\u003e「セッションが切れた」\u003c/li\u003e\n\u003c/ul\u003e\n\u003cp data-line=\"10\" class=\"code-line\"\u003eそこで私のようなよわよわエンジニアはこう思うのです。\u003c/p\u003e\n\u003cp data-line=\"12\" class=\"code-line\"\u003e\u003cstrong\u003e「クッキーとセッションの違い is 何？」\u003c/strong\u003e\u003c/p\u003e\n\u003cp data-line=\"14\" class=\"code-line\"\u003e今回はそんな私のようなエンジニア向きにクッキーとセッションを説明していきます。\u003c/p\u003e\n\u003ch3 id=\"%E3%81%9D%E3%82%82%E3%81%9D%E3%82%82%E3%81%AA%E3%81%9C%E3%82%AF%E3%83%83%E3%82%AD%E3%83%BC%E3%82%84%E3%82%89%E3%82%BB%E3%83%83%E3%82%B7%E3%83%A7%E3%83%B3%E3%81%8C%E5%BF%85%E8%A6%81%E3%81%AA%E3%81%AE%E3%81%8B\" data-line=\"16\" class=\"code-line\"\u003e\n\u003ca class=\"header-anchor-link\" href=\"#%E3%81%9D%E3%82%82%E3%81%9D%E3%82%82%E3%81%AA%E3%81%9C%E3%82%AF%E3%83%83%E3%82%AD%E3%83%BC%E3%82%84%E3%82%89%E3%82%BB%E3%83%83%E3%82%B7%E3%83%A7%E3%83%B3%E3%81%8C%E5%BF%85%E8%A6%81%E3%81%AA%E3%81%AE%E3%81%8B\" aria-hidden=\"true\"\u003e\u003c/a\u003e そもそもなぜクッキーやらセッションが必要なのか\u003c/h3\u003e\n\u003cp data-line=\"18\" class=\"code-line\"\u003eそもそもなぜクッキーやセッションは必要なのでしょうか。\u003c/p\u003e\n\u003cp data-line=\"20\" class=\"code-line\"\u003e\u003cstrong\u003eそれはHTTPはステートレスなプロトコルだからです。\u003c/strong\u003e\u003c/p\u003e\n\u003ch4 id=\"%E3%82%B9%E3%83%86%E3%83%BC%E3%83%88%E3%83%AC%E3%82%B9%E3%81%A3%E3%81%A6%EF%BC%9F\" data-line=\"22\" class=\"code-line\"\u003e\n\u003ca class=\"header-anchor-link\" href=\"#%E3%82%B9%E3%83%86%E3%83%BC%E3%83%88%E3%83%AC%E3%82%B9%E3%81%A3%E3%81%A6%EF%BC%9F\" aria-hidden=\"true\"\u003e\u003c/a\u003e ステートレスって？\u003c/h4\u003e\n\u003cp data-line=\"23\" class=\"code-line\"\u003eステートレスは、その名の通り「状態を保持しない」ことを指します。\u003cbr\u003e\nHTTPはサーバーがクライアントの状態を覚えず、毎回新たなリクエストとして処理される仕組みです。\u003c/p\u003e\n\u003cp data-line=\"26\" class=\"code-line\"\u003e例えばあなたがハンバーガーショップに出向いたとします。\u003cbr\u003e\nすると通常では以下のようなステートフルなやりとりが行われます。\u003cbr\u003e\nステートフルなので店(サーバー)は客(クライアント)直前の状態を覚えています。\u003c/p\u003e\n\u003cdiv class=\"code-block-container\"\u003e\u003cpre\u003e\u003ccode class=\"code-line\" data-line=\"30\"\u003e客「ハンバーガーセットをください。」 \n店「サイドメニューは何になさいますか？」 \n客「ポテトで。」 \n店「ドリンクは何にしますか？」 \n客「コーラで。」 \n\u003c/code\u003e\u003c/pre\u003e\u003c/div\u003e\u003cp data-line=\"38\" class=\"code-line\"\u003e一方でもしステートレスなやり取りが行われたらこのようになります。\u003c/p\u003e\n\u003cdiv class=\"code-block-container\"\u003e\u003cpre\u003e\u003ccode class=\"code-line\" data-line=\"40\"\u003e客「ハンバーガーセットをください。」 \n店「サイドメニューは何になさいますか？」 \n客「ハンバーガーセットをポテトでお願いします。」 \n店「ドリンクは何にしますか？」 \n客「ハンバーガーセットをポテトとコーラでお願いします。」 \n\u003c/code\u003e\u003c/pre\u003e\u003c/div\u003e\u003cp data-line=\"48\" class=\"code-line\"\u003eこのようにステートフルなやりとりではサーバ(店)がクライアント(客)のそれまでの注文を覚えているのに対してステートレスなやりとりではクライアント(客)は毎回すべての注文を繰り返していますね。\u003c/p\u003e\n\u003cp data-line=\"50\" class=\"code-line\"\u003eこれがステートレスです。\u003cbr\u003e\nしかしこれではECサイトのような客が何をカートに入れたか覚えていないといけないステートフルが要求されるサイトでは困ってしまいますね。\u003c/p\u003e\n\u003ch3 id=\"%E3%81%9D%E3%81%93%E3%81%A7%E3%82%AF%E3%83%83%E3%82%AD%E3%83%BC%E3%82%92%E5%88%A9%E7%94%A8%E3%81%99%E3%82%8B\" data-line=\"53\" class=\"code-line\"\u003e\n\u003ca class=\"header-anchor-link\" href=\"#%E3%81%9D%E3%81%93%E3%81%A7%E3%82%AF%E3%83%83%E3%82%AD%E3%83%BC%E3%82%92%E5%88%A9%E7%94%A8%E3%81%99%E3%82%8B\" aria-hidden=\"true\"\u003e\u003c/a\u003e そこでクッキーを利用する\u003c/h3\u003e\n\u003cp data-line=\"54\" class=\"code-line\"\u003eHTTPがステートレスなプロトコルであるため、サーバーはクライアントの状態を覚えておく仕組みがありません。そこでクッキーを利用することで、状態（ユーザーが誰で、どんな操作をしているか）をやり取りできるようにします。\u003c/p\u003e\n\u003cp data-line=\"56\" class=\"code-line\"\u003eクッキーはサーバーからクライアント（ブラウザ）に「この情報を保存しておいてね」という形で送られ、次回以降ブラウザからサーバーに自動で送信される小さなテキストデータです。\u003c/p\u003e\n\u003cp data-line=\"58\" class=\"code-line\"\u003e例えば、あなたがネットショップを利用するときに「カートにハンバーガーを入れた」ことをサーバーは覚えられません。そこでクッキーに\u003c/p\u003e\n\u003cdiv class=\"code-block-container\"\u003e\u003cpre\u003e\u003ccode class=\"code-line\" data-line=\"60\"\u003ecart=hamburger\n\u003c/code\u003e\u003c/pre\u003e\u003c/div\u003e\u003cp data-line=\"63\" class=\"code-line\"\u003eのような\u003ccode\u003e名前=値\u003c/code\u003eの組み合わせで構成されたデータを書いておいてもらい、次にページを読み込むとき「このブラウザはcart=hamburgerというクッキーを持っているから、ハンバーガーをカートに入れている人だな」とサーバー側が判断できます。\u003c/p\u003e\n\u003cp data-line=\"65\" class=\"code-line\"\u003e\u003cimg src=\"https://storage.googleapis.com/zenn-user-upload/f8acddf27251-20250114.jpg\" loading=\"lazy\" class=\"md-img\"\u003e\u003c/p\u003e\n\u003cp data-line=\"67\" class=\"code-line\"\u003e\u003cimg src=\"https://storage.googleapis.com/zenn-user-upload/f5ef23d7cbff-20250114.jpg\" loading=\"lazy\" class=\"md-img\"\u003e\u003c/p\u003e\n\u003cp data-line=\"69\" class=\"code-line\"\u003eこうすることで、サーバーは「さっきハンバーガーを注文しかけていた人だな」「カートに何が入っているのかな」と認識できるようになります。\u003c/p\u003e\n\u003ch3 id=\"%E3%82%AF%E3%83%83%E3%82%AD%E3%83%BC%E3%81%AE%E5%8D%B1%E9%99%BA%E6%80%A7%E3%81%AB%E3%81%A4%E3%81%84%E3%81%A6\" data-line=\"71\" class=\"code-line\"\u003e\n\u003ca class=\"header-anchor-link\" href=\"#%E3%82%AF%E3%83%83%E3%82%AD%E3%83%BC%E3%81%AE%E5%8D%B1%E9%99%BA%E6%80%A7%E3%81%AB%E3%81%A4%E3%81%84%E3%81%A6\" aria-hidden=\"true\"\u003e\u003c/a\u003e クッキーの危険性について\u003c/h3\u003e\n\u003cp data-line=\"72\" class=\"code-line\"\u003eこれまで学んだクッキーを使うことでログインを実現することができます。\u003c/p\u003e\n\u003cp data-line=\"74\" class=\"code-line\"\u003e例えばクッキーに\u003c/p\u003e\n\u003cdiv class=\"code-block-container\"\u003e\u003cpre\u003e\u003ccode class=\"code-line\" data-line=\"75\"\u003euserID=1000\n\u003c/code\u003e\u003c/pre\u003e\u003c/div\u003e\u003cp data-line=\"78\" class=\"code-line\"\u003eという情報を入れてブラウザに保存してあげれば、サーバーはこのクッキーを利用して「ユーザーID=1000」の人がリクエストしてきたと判断できます。\u003c/p\u003e\n\u003cp data-line=\"80\" class=\"code-line\"\u003eしかし問題は、クッキーの内容はユーザー側で自由に書き換えられてしまう可能性がある点です。\u003cbr\u003e\nもしもクッキーを\u003c/p\u003e\n\u003cdiv class=\"code-block-container\"\u003e\u003cpre\u003e\u003ccode class=\"code-line\" data-line=\"82\"\u003euserID=1001\n\u003c/code\u003e\u003c/pre\u003e\u003c/div\u003e\u003cp data-line=\"85\" class=\"code-line\"\u003eのように編集され、実際にuserIDが1001のユーザーが存在していれば、なりすましログインされる危険があります。\u003cbr\u003e\nこのように他人のセッションに侵入する攻撃を、「セッションハイジャック」と呼びます。\u003c/p\u003e\n\u003cp data-line=\"88\" class=\"code-line\"\u003eまた、クッキーはデフォルトでは平文で保存されるため、HTTPSで暗号化されていない通信経路では盗聴・改ざんが容易に行われる恐れがあります。\u003c/p\u003e\n\u003ch3 id=\"%E3%81%9D%E3%81%93%E3%81%A7%E3%82%BB%E3%83%83%E3%82%B7%E3%83%A7%E3%83%B3%E3%82%92%E4%BD%BF%E3%81%86\" data-line=\"90\" class=\"code-line\"\u003e\n\u003ca class=\"header-anchor-link\" href=\"#%E3%81%9D%E3%81%93%E3%81%A7%E3%82%BB%E3%83%83%E3%82%B7%E3%83%A7%E3%83%B3%E3%82%92%E4%BD%BF%E3%81%86\" aria-hidden=\"true\"\u003e\u003c/a\u003e そこでセッションを使う\u003c/h3\u003e\n\u003cp data-line=\"91\" class=\"code-line\"\u003eクッキーにユーザーのIDなどをそのまま保存してしまうと、書き換えられたり盗聴されたりしてセッションハイジャックにつながる恐れがあるという問題がありました。\u003cbr\u003e\nしかし「ユーザーを識別してステートフルなやり取りをしたい」ニーズは依然としてありますよね。\u003c/p\u003e\n\u003cp data-line=\"94\" class=\"code-line\"\u003eそこで登場するのが「セッション」です。\u003c/p\u003e\n\u003ch3 id=\"%E3%82%BB%E3%83%83%E3%82%B7%E3%83%A7%E3%83%B3%E3%81%AE%E4%BB%95%E7%B5%84%E3%81%BF\" data-line=\"96\" class=\"code-line\"\u003e\n\u003ca class=\"header-anchor-link\" href=\"#%E3%82%BB%E3%83%83%E3%82%B7%E3%83%A7%E3%83%B3%E3%81%AE%E4%BB%95%E7%B5%84%E3%81%BF\" aria-hidden=\"true\"\u003e\u003c/a\u003e セッションの仕組み\u003c/h3\u003e\n\u003cp data-line=\"97\" class=\"code-line\"\u003eセッションはクッキーを応用した仕組みで、クッキーとまったく無関係なわけではありません。\u003cbr\u003e\n生のユーザー情報やカート情報などを直接クッキーに保存する代わりに、サーバー側で管理したデータにひも付くセッションIDのみをクッキーに保持させる、という方法を取ります。\u003cbr\u003e\nサーバー内ではユーザーIDやカートの中身などの機密情報を、メモリ・データベース・Redisなどに保存し、セッションIDと照合する仕組みです。\u003c/p\u003e\n\u003cp data-line=\"101\" class=\"code-line\"\u003e\u003cimg src=\"https://storage.googleapis.com/zenn-user-upload/574f56ca3678-20250114.jpg\" loading=\"lazy\" class=\"md-img\"\u003e\u003c/p\u003e\n\u003ch4 id=\"%E3%82%AF%E3%83%A9%E3%82%A4%E3%82%A2%E3%83%B3%E3%83%88%E3%81%AB%E3%81%AF%E3%82%BB%E3%83%83%E3%82%B7%E3%83%A7%E3%83%B3id%E3%81%A0%E3%81%91%E3%82%92%E6%B8%A1%E3%81%99\" data-line=\"103\" class=\"code-line\"\u003e\n\u003ca class=\"header-anchor-link\" href=\"#%E3%82%AF%E3%83%A9%E3%82%A4%E3%82%A2%E3%83%B3%E3%83%88%E3%81%AB%E3%81%AF%E3%82%BB%E3%83%83%E3%82%B7%E3%83%A7%E3%83%B3id%E3%81%A0%E3%81%91%E3%82%92%E6%B8%A1%E3%81%99\" aria-hidden=\"true\"\u003e\u003c/a\u003e クライアントにはセッションIDだけを渡す\u003c/h4\u003e\n\u003cp data-line=\"104\" class=\"code-line\"\u003eクッキーに保存するのは「セッションID」のみです。\u003cbr\u003e\n具体的には以下のようなランダムかつ推測されにくい文字列が、クッキーとしてブラウザに保存されます。\u003c/p\u003e\n\u003cdiv class=\"code-block-container\"\u003e\u003cpre\u003e\u003ccode class=\"code-line\" data-line=\"106\"\u003esessionID=abc123XYZ987\n\u003c/code\u003e\u003c/pre\u003e\u003c/div\u003e\u003ch4 id=\"%E3%82%B5%E3%83%BC%E3%83%90%E3%83%BC%E5%81%B4%E3%81%A7%E3%82%BB%E3%83%83%E3%82%B7%E3%83%A7%E3%83%B3%E6%83%85%E5%A0%B1%E3%82%92%E7%AE%A1%E7%90%86%E3%81%99%E3%82%8B\" data-line=\"110\" class=\"code-line\"\u003e\n\u003ca class=\"header-anchor-link\" href=\"#%E3%82%B5%E3%83%BC%E3%83%90%E3%83%BC%E5%81%B4%E3%81%A7%E3%82%BB%E3%83%83%E3%82%B7%E3%83%A7%E3%83%B3%E6%83%85%E5%A0%B1%E3%82%92%E7%AE%A1%E7%90%86%E3%81%99%E3%82%8B\" aria-hidden=\"true\"\u003e\u003c/a\u003e サーバー側でセッション情報を管理する\u003c/h4\u003e\n\u003cp data-line=\"111\" class=\"code-line\"\u003eたとえば「ユーザーID」「カートの中身」「ログインしているかどうか」など、重要なデータはすべてサーバー側で保持します。\u003cbr\u003e\nこれらのデータはサーバー内のメモリやデータベース、Redisなどのセッションストアに保存されることが多いです。\u003c/p\u003e\n\u003ch4 id=\"%E5%AE%9F%E9%9A%9B%E3%81%AE%E6%A9%9F%E5%AF%86%E6%83%85%E5%A0%B1%E3%81%AF%E3%82%B5%E3%83%BC%E3%83%90%E3%83%BC%E5%81%B4%E3%81%AB%E7%BD%AE%E3%81%8F\" data-line=\"114\" class=\"code-line\"\u003e\n\u003ca class=\"header-anchor-link\" href=\"#%E5%AE%9F%E9%9A%9B%E3%81%AE%E6%A9%9F%E5%AF%86%E6%83%85%E5%A0%B1%E3%81%AF%E3%82%B5%E3%83%BC%E3%83%90%E3%83%BC%E5%81%B4%E3%81%AB%E7%BD%AE%E3%81%8F\" aria-hidden=\"true\"\u003e\u003c/a\u003e 実際の機密情報はサーバー側に置く\u003c/h4\u003e\n\u003cp data-line=\"115\" class=\"code-line\"\u003eユーザーがログインしているかどうかや、カートの中身などの「第三者に知られたくない情報」は、ブラウザには置かずサーバー側に保管しておきます。\u003cbr\u003e\nユーザーがブラウザでクッキーを書き換えようとしても、そこに書かれているのは「セッションID」だけです。\u003cbr\u003e\nもしセッションIDが推測不能なランダム文字列なら、そう簡単には別のユーザーのセッションIDを作り出すことはできません。\u003c/p\u003e\n\u003ch3 id=\"%E3%82%BB%E3%83%83%E3%82%B7%E3%83%A7%E3%83%B3%E3%81%AE%E3%83%A1%E3%83%AA%E3%83%83%E3%83%88\" data-line=\"119\" class=\"code-line\"\u003e\n\u003ca class=\"header-anchor-link\" href=\"#%E3%82%BB%E3%83%83%E3%82%B7%E3%83%A7%E3%83%B3%E3%81%AE%E3%83%A1%E3%83%AA%E3%83%83%E3%83%88\" aria-hidden=\"true\"\u003e\u003c/a\u003e セッションのメリット\u003c/h3\u003e\n\u003ch4 id=\"%E7%9B%B4%E6%8E%A5%E7%9A%84%E3%81%AA%E6%94%B9%E3%81%96%E3%82%93%E3%81%8C%E9%9B%A3%E3%81%97%E3%81%84\" data-line=\"120\" class=\"code-line\"\u003e\n\u003ca class=\"header-anchor-link\" href=\"#%E7%9B%B4%E6%8E%A5%E7%9A%84%E3%81%AA%E6%94%B9%E3%81%96%E3%82%93%E3%81%8C%E9%9B%A3%E3%81%97%E3%81%84\" aria-hidden=\"true\"\u003e\u003c/a\u003e 直接的な改ざんが難しい\u003c/h4\u003e\n\u003cp data-line=\"121\" class=\"code-line\"\u003eクッキーに「userID=1000」のようにIDを直書きしていると書き換えられてしまうかもしれませんが、セッションIDだけなら意味がありませんね(ただのランダム文字列なので)。\u003c/p\u003e\n\u003cp data-line=\"123\" class=\"code-line\"\u003eたとえユーザーが勝手にクッキーのセッションIDを書き換えても、サーバー側のセッションストアと紐付かない限り正しいデータは得られません。\u003c/p\u003e\n\u003ch4 id=\"%E6%A9%9F%E5%AF%86%E6%83%85%E5%A0%B1%E3%82%92%E5%AE%89%E5%85%A8%E3%81%AB%E7%AE%A1%E7%90%86%E3%81%A7%E3%81%8D%E3%82%8B\" data-line=\"125\" class=\"code-line\"\u003e\n\u003ca class=\"header-anchor-link\" href=\"#%E6%A9%9F%E5%AF%86%E6%83%85%E5%A0%B1%E3%82%92%E5%AE%89%E5%85%A8%E3%81%AB%E7%AE%A1%E7%90%86%E3%81%A7%E3%81%8D%E3%82%8B\" aria-hidden=\"true\"\u003e\u003c/a\u003e 機密情報を安全に管理できる\u003c/h4\u003e\n\u003cp data-line=\"126\" class=\"code-line\"\u003eクッキーでやりとりされるのは「セッションID」のみなので、パスワードなど、直接的に見られたくないデータはすべてサーバー側で管理できます。\u003c/p\u003e\n\u003ch4 id=\"%E3%83%AD%E3%82%B0%E3%82%A2%E3%82%A6%E3%83%88%E3%82%84%E3%82%BF%E3%82%A4%E3%83%A0%E3%82%A2%E3%82%A6%E3%83%88%E3%82%92%E5%AE%9F%E8%A3%85%E3%81%97%E3%82%84%E3%81%99%E3%81%84\" data-line=\"128\" class=\"code-line\"\u003e\n\u003ca class=\"header-anchor-link\" href=\"#%E3%83%AD%E3%82%B0%E3%82%A2%E3%82%A6%E3%83%88%E3%82%84%E3%82%BF%E3%82%A4%E3%83%A0%E3%82%A2%E3%82%A6%E3%83%88%E3%82%92%E5%AE%9F%E8%A3%85%E3%81%97%E3%82%84%E3%81%99%E3%81%84\" aria-hidden=\"true\"\u003e\u003c/a\u003e ログアウトやタイムアウトを実装しやすい\u003c/h4\u003e\n\u003cp data-line=\"129\" class=\"code-line\"\u003e「一定時間操作がなかったらセッションを破棄する」などの仕組みをサーバー側で集中管理できるため、ログアウトやセキュリティ制限を柔軟に運用できます。\u003c/p\u003e\n\u003ch3 id=\"%E3%82%BB%E3%83%83%E3%82%B7%E3%83%A7%E3%83%B3%E3%81%AE%E6%B3%A8%E6%84%8F%E7%82%B9\" data-line=\"131\" class=\"code-line\"\u003e\n\u003ca class=\"header-anchor-link\" href=\"#%E3%82%BB%E3%83%83%E3%82%B7%E3%83%A7%E3%83%B3%E3%81%AE%E6%B3%A8%E6%84%8F%E7%82%B9\" aria-hidden=\"true\"\u003e\u003c/a\u003e セッションの注意点\u003c/h3\u003e\n\u003ch4 id=\"%E3%82%BB%E3%83%83%E3%82%B7%E3%83%A7%E3%83%B3id%E3%81%AE%E7%9B%97%E9%9B%A3%E3%83%AA%E3%82%B9%E3%82%AF\" data-line=\"132\" class=\"code-line\"\u003e\n\u003ca class=\"header-anchor-link\" href=\"#%E3%82%BB%E3%83%83%E3%82%B7%E3%83%A7%E3%83%B3id%E3%81%AE%E7%9B%97%E9%9B%A3%E3%83%AA%E3%82%B9%E3%82%AF\" aria-hidden=\"true\"\u003e\u003c/a\u003e セッションIDの盗難リスク\u003c/h4\u003e\n\u003cp data-line=\"133\" class=\"code-line\"\u003eもしセッションIDそのものが漏れてしまうと、結局はそのIDでサーバーを騙すことが可能になり、なりすましされる危険があります(セッションハイジャック)。\u003c/p\u003e\n\u003cp data-line=\"135\" class=\"code-line\"\u003e対策としては以下のものがあります。\u003c/p\u003e\n\u003cul data-line=\"136\" class=\"code-line\"\u003e\n\u003cli data-line=\"136\" class=\"code-line\"\u003eHTTPS（TLS）で通信を暗号化する\u003c/li\u003e\n\u003cli data-line=\"137\" class=\"code-line\"\u003eSecure フラグや HttpOnly フラグを付ける\u003c/li\u003e\n\u003cli data-line=\"138\" class=\"code-line\"\u003eアクセス元IPアドレスのチェックやワンタイムトークン（CSRF対策）など、追加のセキュリティ機構を取り入れる\u003c/li\u003e\n\u003c/ul\u003e\n\u003ch4 id=\"%E3%82%B5%E3%83%BC%E3%83%90%E3%83%BC%E8%B2%A0%E8%8D%B7%E3%83%BB%E3%82%B9%E3%82%B1%E3%83%BC%E3%83%AA%E3%83%B3%E3%82%B0%E3%81%AE%E5%95%8F%E9%A1%8C\" data-line=\"140\" class=\"code-line\"\u003e\n\u003ca class=\"header-anchor-link\" href=\"#%E3%82%B5%E3%83%BC%E3%83%90%E3%83%BC%E8%B2%A0%E8%8D%B7%E3%83%BB%E3%82%B9%E3%82%B1%E3%83%BC%E3%83%AA%E3%83%B3%E3%82%B0%E3%81%AE%E5%95%8F%E9%A1%8C\" aria-hidden=\"true\"\u003e\u003c/a\u003e サーバー負荷・スケーリングの問題\u003c/h4\u003e\n\u003cp data-line=\"141\" class=\"code-line\"\u003eセッションを多くのユーザーが利用すると、サーバー側でそれだけ多くのセッション情報を管理しなくてはなりません。\u003cbr\u003e\nサーバーの台数を増やして負荷分散する場合には「セッションの同期」をどうするかが課題になります(たとえば Redis やデータベースをセッションストアにして集中管理する、Sticky Session を使うなど)。\u003c/p\u003e\n\u003ch3 id=\"%E3%81%BE%E3%81%A8%E3%82%81\" data-line=\"144\" class=\"code-line\"\u003e\n\u003ca class=\"header-anchor-link\" href=\"#%E3%81%BE%E3%81%A8%E3%82%81\" aria-hidden=\"true\"\u003e\u003c/a\u003e まとめ\u003c/h3\u003e\n\u003cp data-line=\"145\" class=\"code-line\"\u003e\u003cstrong\u003e1. HTTPはステートレス\u003c/strong\u003e\u003c/p\u003e\n\u003cul data-line=\"146\" class=\"code-line\"\u003e\n\u003cli data-line=\"146\" class=\"code-line\"\u003eサーバーはリクエストごとに「誰が何をしているか」を覚えていない\u003c/li\u003e\n\u003c/ul\u003e\n\u003cp data-line=\"148\" class=\"code-line\"\u003e\u003cstrong\u003e2. クッキーで状態を擬似的に保持\u003c/strong\u003e\u003c/p\u003e\n\u003cul data-line=\"149\" class=\"code-line\"\u003e\n\u003cli data-line=\"149\" class=\"code-line\"\u003eサーバーが「クッキーを保存しておいて」と言えば、次回以降のリクエスト時にそのクッキー情報でユーザーを識別できる\u003c/li\u003e\n\u003cli data-line=\"150\" class=\"code-line\"\u003e名前=値の形式でブラウザに保持する\u003c/li\u003e\n\u003c/ul\u003e\n\u003cp data-line=\"152\" class=\"code-line\"\u003e\u003cstrong\u003e3. クッキーの改ざんや盗聴リスク\u003c/strong\u003e\u003c/p\u003e\n\u003cul data-line=\"153\" class=\"code-line\"\u003e\n\u003cli data-line=\"153\" class=\"code-line\"\u003eクッキーをそのまま使うと、書き換えによる不正ログインや通信経路上の盗聴が怖い\u003c/li\u003e\n\u003c/ul\u003e\n\u003cp data-line=\"155\" class=\"code-line\"\u003e\u003cstrong\u003e4. セッションを導入して機密情報はサーバー側で管理\u003c/strong\u003e\u003c/p\u003e\n\u003cul data-line=\"156\" class=\"code-line\"\u003e\n\u003cli data-line=\"156\" class=\"code-line\"\u003eクライアント側は「セッションID」だけ\u003c/li\u003e\n\u003cli data-line=\"157\" class=\"code-line\"\u003eサーバー側でユーザーの重要データを集中管理し、改ざんを防ぐ\u003c/li\u003e\n\u003c/ul\u003e\n\u003ch4 id=\"%E3%82%AF%E3%83%83%E3%82%AD%E3%83%BC%E3%81%A8%E3%82%BB%E3%83%83%E3%82%B7%E3%83%A7%E3%83%B3%E3%81%AE%E9%81%95%E3%81%84\" data-line=\"159\" class=\"code-line\"\u003e\n\u003ca class=\"header-anchor-link\" href=\"#%E3%82%AF%E3%83%83%E3%82%AD%E3%83%BC%E3%81%A8%E3%82%BB%E3%83%83%E3%82%B7%E3%83%A7%E3%83%B3%E3%81%AE%E9%81%95%E3%81%84\" aria-hidden=\"true\"\u003e\u003c/a\u003e クッキーとセッションの違い\u003c/h4\u003e\n\u003ctable data-line=\"160\" class=\"code-line\"\u003e\n\u003cthead data-line=\"160\" class=\"code-line\"\u003e\n\u003ctr data-line=\"160\" class=\"code-line\"\u003e\n\u003cth\u003e項目\u003c/th\u003e\n\u003cth\u003eCookie\u003c/th\u003e\n\u003cth\u003eSession\u003c/th\u003e\n\u003c/tr\u003e\n\u003c/thead\u003e\n\u003ctbody data-line=\"162\" class=\"code-line\"\u003e\n\u003ctr data-line=\"162\" class=\"code-line\"\u003e\n\u003ctd\u003eデータ保存場所\u003c/td\u003e\n\u003ctd\u003eユーザーのブラウザ\u003c/td\u003e\n\u003ctd\u003eサーバー側ストア (メモリ/DB/Redisなど)\u003c/td\u003e\n\u003c/tr\u003e\n\u003ctr data-line=\"163\" class=\"code-line\"\u003e\n\u003ctd\u003e具体的な中身\u003c/td\u003e\n\u003ctd\u003eユーザーIDなど任意の情報を直書き可\u003c/td\u003e\n\u003ctd\u003eセッションIDのみ（中身はサーバー内に保持）\u003c/td\u003e\n\u003c/tr\u003e\n\u003ctr data-line=\"164\" class=\"code-line\"\u003e\n\u003ctd\u003eセキュリティ面\u003c/td\u003e\n\u003ctd\u003e平文で書き換え可能, 窃取されやすい\u003c/td\u003e\n\u003ctd\u003eIDの盗難リスクはあるが改ざんされにくい\u003c/td\u003e\n\u003c/tr\u003e\n\u003ctr data-line=\"165\" class=\"code-line\"\u003e\n\u003ctd\u003e負荷のかかり方\u003c/td\u003e\n\u003ctd\u003eサーバー負荷は少なめ\u003c/td\u003e\n\u003ctd\u003e多数のセッションをサーバーが管理し負荷大\u003c/td\u003e\n\u003c/tr\u003e\n\u003c/tbody\u003e\n\u003c/table\u003e\n\u003chr data-line=\"168\" class=\"code-line\"\u003e\n\u003cp data-line=\"170\" class=\"code-line\"\u003e「\u003cstrong\u003eクッキーとセッションの違い is 何？\u003c/strong\u003e」と疑問に思っていた方も、これでだいぶイメージが湧いたのではないでしょうか。\u003cbr\u003e\nセッションはクッキーの弱点を補うための仕組みですが、セッションIDが盗まれるリスクもゼロにはなりません。\u003cbr\u003e\nぜひ今回の内容を踏まえ、「どこに」「どんな情報を」「どのように保存するか」を常に意識して、安全で使いやすいWebアプリケーションを作ってみてください！\u003c/p\u003e\n\u003ch3 id=\"%E5%8F%82%E8%80%83%E6%96%87%E7%8C%AE\" data-line=\"174\" class=\"code-line\"\u003e\n\u003ca class=\"header-anchor-link\" href=\"#%E5%8F%82%E8%80%83%E6%96%87%E7%8C%AE\" aria-hidden=\"true\"\u003e\u003c/a\u003e 参考文献\u003c/h3\u003e\n\u003cul data-line=\"175\" class=\"code-line\"\u003e\n\u003cli data-line=\"175\" class=\"code-line\"\u003e\u003ca href=\"https://amzn.to/3WixzQG\" target=\"_blank\" rel=\"nofollow noopener noreferrer\"\u003eWebを支える技術\u003c/a\u003e\u003c/li\u003e\n\u003cli data-line=\"176\" class=\"code-line\"\u003e\u003ca href=\"https://amzn.to/3WhTh7G\" target=\"_blank\" rel=\"nofollow noopener noreferrer\"\u003eプロになるためのWeb技術入門\u003c/a\u003e\u003c/li\u003e\n\u003c/ul\u003e\n","ogImageUrl":"https://res.cloudinary.com/zenn/image/upload/s--J0Bytc0b--/c_fit%2Cg_north_west%2Cl_text:notosansjp-medium.otf_55:%25E3%2582%25AF%25E3%2583%2583%25E3%2582%25AD%25E3%2583%25BC%25E3%2581%25A8%25E3%2582%25BB%25E3%2583%2583%25E3%2582%25B7%25E3%2583%25A7%25E3%2583%25B3%25E3%2582%2592%25E9%259B%25B0%25E5%259B%25B2%25E6%25B0%2597%25E3%2581%25A7%25E4%25BD%25BF%25E3%2581%25A3%25E3%2581%25A6%25E3%2581%2584%25E3%2582%258B%25E3%2582%25A8%25E3%2583%25B3%25E3%2582%25B8%25E3%2583%258B%25E3%2582%25A2%25E3%2581%258C%25E3%2580%2581%25E9%2581%2595%25E3%2581%2584%25E3%2582%2592%25E8%25AA%25AC%25E6%2598%258E%25E3%2581%25A7%25E3%2581%258D%25E3%2582%258B%25E3%2582%2588%25E3%2581%2586%25E3%2581%25AB%25E3%2581%25AA%25E3%2582%258B%25E8%25A8%2598%25E4%25BA%258B%2Cw_1010%2Cx_90%2Cy_100/g_south_west%2Cl_text:notosansjp-medium.otf_34:MESI%2Cx_220%2Cy_108/bo_3px_solid_rgb:d6e3ed%2Cg_south_west%2Ch_90%2Cl_fetch:aHR0cHM6Ly9zdG9yYWdlLmdvb2dsZWFwaXMuY29tL3plbm4tdXNlci11cGxvYWQvYXZhdGFyLzViM2I3NTQxYzUuanBlZw==%2Cr_20%2Cw_90%2Cx_92%2Cy_102/co_rgb:6e7b85%2Cg_south_west%2Cl_text:notosansjp-medium.otf_30:%25E3%2582%25B3%25E3%2583%25A9%25E3%2583%259C%25E3%2582%25B9%25E3%2582%25BF%25E3%2582%25A4%25E3%2583%25AB%2520Developers%2Cx_220%2Cy_160/bo_4px_solid_white%2Cg_south_west%2Ch_50%2Cl_fetch:aHR0cHM6Ly9saDMuZ29vZ2xldXNlcmNvbnRlbnQuY29tL2EvQUdObXl4WU9Qa2tIeEJCcWlvWjFvSzNwOG96LUZleXZvMGhfT2RpM0tsalNwMG89czk2LWM=%2Cr_max%2Cw_50%2Cx_139%2Cy_84/v1627283836/default/og-base-w1200-v2.png","toc":[{"id":"%E3%81%9D%E3%82%82%E3%81%9D%E3%82%82%E3%81%AA%E3%81%9C%E3%82%AF%E3%83%83%E3%82%AD%E3%83%BC%E3%82%84%E3%82%89%E3%82%BB%E3%83%83%E3%82%B7%E3%83%A7%E3%83%B3%E3%81%8C%E5%BF%85%E8%A6%81%E3%81%AA%E3%81%AE%E3%81%8B","text":"そもそもなぜクッキーやらセッションが必要なのか","level":3,"children":[]},{"id":"%E3%81%9D%E3%81%93%E3%81%A7%E3%82%AF%E3%83%83%E3%82%AD%E3%83%BC%E3%82%92%E5%88%A9%E7%94%A8%E3%81%99%E3%82%8B","text":"そこでクッキーを利用する","level":3,"children":[]},{"id":"%E3%82%AF%E3%83%83%E3%82%AD%E3%83%BC%E3%81%AE%E5%8D%B1%E9%99%BA%E6%80%A7%E3%81%AB%E3%81%A4%E3%81%84%E3%81%A6","text":"クッキーの危険性について","level":3,"children":[]},{"id":"%E3%81%9D%E3%81%93%E3%81%A7%E3%82%BB%E3%83%83%E3%82%B7%E3%83%A7%E3%83%B3%E3%82%92%E4%BD%BF%E3%81%86","text":"そこでセッションを使う","level":3,"children":[]},{"id":"%E3%82%BB%E3%83%83%E3%82%B7%E3%83%A7%E3%83%B3%E3%81%AE%E4%BB%95%E7%B5%84%E3%81%BF","text":"セッションの仕組み","level":3,"children":[]},{"id":"%E3%82%BB%E3%83%83%E3%82%B7%E3%83%A7%E3%83%B3%E3%81%AE%E3%83%A1%E3%83%AA%E3%83%83%E3%83%88","text":"セッションのメリット","level":3,"children":[]},{"id":"%E3%82%BB%E3%83%83%E3%82%B7%E3%83%A7%E3%83%B3%E3%81%AE%E6%B3%A8%E6%84%8F%E7%82%B9","text":"セッションの注意点","level":3,"children":[]},{"id":"%E3%81%BE%E3%81%A8%E3%82%81","text":"まとめ","level":3,"children":[]},{"id":"%E5%8F%82%E8%80%83%E6%96%87%E7%8C%AE","text":"参考文献","level":3,"children":[]}],"tocEnabled":true,"shouldNoindex":false,"scheduledPublishAt":null,"canSendBadge":true,"status":"published","badges":[{"badgeType":"Helpful","rank":"5"}]},"user":{"id":120560,"username":"mesi","name":"MESI","avatarSmallUrl":"https://lh3.googleusercontent.com/a/AGNmyxYOPkkHxBBqioZ1oK3p8oz-Feyvo0h_Odi3KljSp0o=s96-c","avatarUrl":"https://lh3.googleusercontent.com/a/AGNmyxYOPkkHxBBqioZ1oK3p8oz-Feyvo0h_Odi3KljSp0o=s96-c","bio":"よわよわエンジニア4年目。\n開発がしたいです。","autolinkedBio":"よわよわエンジニア4年目。\n開発がしたいです。","githubUsername":"mesichicken","twitterUsername":"mesichicken","isSupportOpen":true,"tokusyoContact":null,"tokusyoName":null,"websiteUrl":"https://www.mesihome.com","websiteDomain":"mesihome.com","totalLikedCount":3361,"gaTrackingId":"G-N20PGGTEG0","hatenaId":null,"isInvoiceIssuer":false},"topics":[{"id":259,"name":"web","taggingsCount":1969,"imageUrl":"https://storage.googleapis.com/zenn-user-upload/topics/bb6b2477a6.jpeg","displayName":"Web"},{"id":1103,"name":"session","taggingsCount":55,"imageUrl":"https://zenn.dev/images/topic.png","displayName":"session"},{"id":1104,"name":"cookie","taggingsCount":146,"imageUrl":"https://storage.googleapis.com/zenn-user-upload/topics/2ed80b27d0.png","displayName":"cookie"}],"isMine":false,"isPreview":false,"draftRevealScope":"private","githubRepository":null,"currentUserLiked":false,"currentUserBookmarked":false,"comments":[{"id":540667,"postType":"Comment","slug":"f527742323f6d1","userId":6308,"likedCount":23,"bodyUpdatedAt":null,"createdAt":"2025-01-18T15:36:12.973+09:00","pinned":false,"bodyHtml":"\u003cp data-line=\"0\" class=\"code-line\"\u003e初見で、どうしても\u003c/p\u003e\n\u003cul data-line=\"2\" class=\"code-line\"\u003e\n\u003cli data-line=\"2\" class=\"code-line\"\u003eセッションっていうのは仕組み？概念？\u003c/li\u003e\n\u003cli data-line=\"3\" class=\"code-line\"\u003eクッキーはブラウザでつかってるやつだよな\u003c/li\u003e\n\u003cli data-line=\"4\" class=\"code-line\"\u003eこれらは比較すべきものなの？\u003c/li\u003e\n\u003c/ul\u003e\n\u003cp data-line=\"6\" class=\"code-line\"\u003eという疑問が出そうだなという感想を持ってしまいました。\u003c/p\u003e\n\u003cp data-line=\"8\" class=\"code-line\"\u003eこの手の解説をする際は、実現したいこととやり方、それを支える技術といった整理をしたうえで比較対象などを検討するのが良いと思います。\u003c/p\u003e\n\u003cul data-line=\"10\" class=\"code-line\"\u003e\n\u003cli data-line=\"10\" class=\"code-line\"\u003e実現したいこと: セッション管理(より大きな定義だとアクセスコントロール)\u003c/li\u003e\n\u003cli data-line=\"11\" class=\"code-line\"\u003e設計方針\n\u003cul data-line=\"12\" class=\"code-line\"\u003e\n\u003cli data-line=\"12\" class=\"code-line\"\u003eステートフル\u003c/li\u003e\n\u003cli data-line=\"13\" class=\"code-line\"\u003eステートレス\u003c/li\u003e\n\u003c/ul\u003e\n\u003c/li\u003e\n\u003cli data-line=\"14\" class=\"code-line\"\u003eそれを実現するための技術\n\u003cul data-line=\"15\" class=\"code-line\"\u003e\n\u003cli data-line=\"15\" class=\"code-line\"\u003eサーバー\n\u003cul data-line=\"16\" class=\"code-line\"\u003e\n\u003cli data-line=\"16\" class=\"code-line\"\u003eデータストレージ\u003c/li\u003e\n\u003cli data-line=\"17\" class=\"code-line\"\u003eそれを操作するロジック(Middlewareで実装されることが多い)\u003c/li\u003e\n\u003cli data-line=\"18\" class=\"code-line\"\u003eさらにいくとJWTなどもここに入る\u003c/li\u003e\n\u003c/ul\u003e\n\u003c/li\u003e\n\u003cli data-line=\"19\" class=\"code-line\"\u003eクライアント\n\u003cul data-line=\"20\" class=\"code-line\"\u003e\n\u003cli data-line=\"20\" class=\"code-line\"\u003eブラウザのCookie管理の仕組み(Cookieを保存、付与)\u003c/li\u003e\n\u003cli data-line=\"21\" class=\"code-line\"\u003eブラウザのローカルストレージ、セッションストレージ\u003c/li\u003e\n\u003cli data-line=\"22\" class=\"code-line\"\u003eモバイルアプリで利用可能なストレージ\u003c/li\u003e\n\u003cli data-line=\"23\" class=\"code-line\"\u003eリクエストに指定する際のHttp Header: Cookie Header, Authorization Headerなど\u003c/li\u003e\n\u003c/ul\u003e\n\u003c/li\u003e\n\u003c/ul\u003e\n\u003c/li\u003e\n\u003c/ul\u003e\n\u003cp data-line=\"25\" class=\"code-line\"\u003eあと、RFCやW3Cなど標準化されているものについては、なるべくその参照を示す方が良いでしょう。\u003cbr\u003e\n厳密な定義を調べることで、アプリケーションの動作の中でどの部分の処理についての仕様なのかが明確になり、今回のような比較を用いた記事も書きやすくなるでしょう。\u003c/p\u003e\n","hiddenReason":null,"currentUserLiked":false,"isMine":false,"user":{"id":6308,"username":"ritou","name":"ritou","avatarSmallUrl":"https://lh3.googleusercontent.com/a-/AOh14GjQ_fcwsIRk6LalbnjCHWzWfk7BkYvX9XAkZP8b8Q=s80-c"},"children":[{"id":541389,"postType":"Comment","slug":"664c4074c7dfbc","userId":9125,"likedCount":18,"bodyUpdatedAt":null,"createdAt":"2025-01-19T21:20:38.403+09:00","pinned":false,"bodyHtml":"\u003cp data-line=\"0\" class=\"code-line\"\u003eそこまで示すの、この記事の本筋とはそれると思います。\u003cbr\u003e\nそこまで読みたいなら、他の記事を参照するのがいいと思う。\u003c/p\u003e\n","hiddenReason":null,"currentUserLiked":false,"isMine":false,"user":{"id":9125,"username":"aiya000","name":"あいや - aiya000","avatarSmallUrl":"https://lh3.googleusercontent.com/a-/AOh14GjYUC4AwqqWm1VfUkbAqstNkkPEeME9Ct4V5S7b=s80-c"},"children":[]}]},{"id":541646,"postType":"Comment","slug":"9087e2fe1df096","userId":2279,"likedCount":0,"bodyUpdatedAt":null,"createdAt":"2025-01-20T10:18:23.122+09:00","pinned":false,"bodyHtml":"\u003cblockquote data-line=\"0\" class=\"code-line\"\u003e\n\u003cp data-line=\"0\" class=\"code-line\"\u003e実際にuserIDが1001のユーザーが存在していれば、なりすましログインされる危険があります。\u003cbr\u003e\nこのように他人のセッションに侵入する攻撃を、「セッションハイジャック」と呼びます。\u003cbr\u003e\n...中略...\u003cbr\u003e\nそこでセッションを使う\u003c/p\u003e\n\u003c/blockquote\u003e\n\u003cp data-line=\"5\" class=\"code-line\"\u003eこれはセッションハイジャックというよりもなりすましログインな気も……？（「セッションを使う」の前な為\u003c/p\u003e\n","hiddenReason":null,"currentUserLiked":false,"isMine":false,"user":{"id":2279,"username":"juners","name":"juner","avatarSmallUrl":"https://lh3.googleusercontent.com/a-/AOh14GjI-6SfvPh1poC9vc1aJUy1hzPtGX5EtfPtiC1xAdw=s80-c"},"children":[]}],"commentedUsers":[{"id":6308,"username":"ritou","name":"ritou","avatarSmallUrl":"https://lh3.googleusercontent.com/a-/AOh14GjQ_fcwsIRk6LalbnjCHWzWfk7BkYvX9XAkZP8b8Q=s80-c"},{"id":9125,"username":"aiya000","name":"あいや - aiya000","avatarSmallUrl":"https://lh3.googleusercontent.com/a-/AOh14GjYUC4AwqqWm1VfUkbAqstNkkPEeME9Ct4V5S7b=s80-c"},{"id":2279,"username":"juners","name":"juner","avatarSmallUrl":"https://lh3.googleusercontent.com/a-/AOh14GjI-6SfvPh1poC9vc1aJUy1hzPtGX5EtfPtiC1xAdw=s80-c"}],"positiveCommentsCount":3,"publication":{"id":287,"name":"collabostyle","displayName":"コラボスタイル Developers","avatarSmallUrl":"https://res.cloudinary.com/zenn/image/fetch/s--pqhnj9ZU--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_80/https://storage.googleapis.com/zenn-user-upload/avatar/5b3b7541c5.jpeg","avatarUrl":"https://storage.googleapis.com/zenn-user-upload/avatar/5b3b7541c5.jpeg","pro":false,"avatarRegistered":true,"description":"「ワークスタイルの未来を切り拓く」を理念に掲げ、リアルとデジタルの2つの働く場に向けた事業展開に留まらず、自社が率先して新しいワークスタイルに挑戦し、発信を行うことでワークスタイルの未来を切り拓いていきます。","autolinkedDescription":"「ワークスタイルの未来を切り拓く」を理念に掲げ、リアルとデジタルの2つの働く場に向けた事業展開に留まらず、自社が率先して新しいワークスタイルに挑戦し、発信を行うことでワークスタイルの未来を切り拓いていきます。","twitterUsername":"","githubUsername":"","coverImageUrl":"https://storage.googleapis.com/zenn-user-upload/publication_cover/34a4e34083.jpeg","fixedSentencesHtml":"\u003cp\u003e株式会社コラボスタイルは、『\u003cstrong\u003eワークスタイルの未来を切り拓く\u003c/strong\u003e』を理念に掲げ、\u003cbr /\u003e\nワークスタイルのちいさなチャレンジがライフスタイルをより良くすると考えております。\u003c/p\u003e\n\u003cp\u003eITツールを提供するメーカーにとどまらず、\u003cbr /\u003e\n働く人と働く場所の未来を作っていく会社です。\u003c/p\u003e\n\u003cp\u003e社内のワークフローを整備することで、働く人の業務ストレスを軽減し\u003cbr /\u003e\nみんなが働きやすい環境を実現するため、ソフトウエアエンジニアを募集しています。\u003c/p\u003e\n\u003cp\u003e・株式会社コラボスタイルの会社情報\u003cbr /\u003e\n\u003ca href=\"https://www.wantedly.com/companies/company_8613418\" target=\"_blank\" rel=\"nofollow noopener noreferrer\"\u003ehttps://www.wantedly.com/companies/company_8613418\u003c/a\u003e\u003c/p\u003e\n","isSupportOpen":true,"isArticleCommentOpen":true,"gaTrackingId":null}}},"page":"/[username]/articles/[slug]","query":{"username":"collabostyle","slug":"8949e8db686263"},"buildId":"JFva1bnwE3BmljxDNULL3","assetPrefix":"https://static.zenn.studio","isFallback":false,"isExperimentalCompile":false,"dynamicIds":[80903,65131],"gip":true,"scriptLoader":[]}</script></body></html>