質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.48%
Cookie

HTTPにおけるCookieとは、クライアントのウェブブラウザ上に保存された一時的なデータを指します。クライアント側のJavaScriptでも、サーバー側のHTTPヘッダーでもクッキーの読み書き・修正・削除が可能です。

Chrome

Google Chromeは携帯、テレビ、デスクトップなどの様々なプラットフォームで利用できるウェブブラウザです。Googleが開発したもので、Blink (レンダリングエンジン) とアプリケーションフレームワークを使用しています。

Node.js

Node.jsとはGoogleのV8 JavaScriptエンジンを使用しているサーバーサイドのイベント駆動型プログラムです。

Twitter

Twitterは、140文字以内の「ツイート」と呼ばれる短文を投稿できるサービスです。Twitter上のほぼ全ての機能に対応するAPIが存在し、その関連サービスが多く公開されています。

Express

ExpressはNode.jsのWebアプリケーションフレームワークです。 マルチページを構築するための機能セットおよびハイブリッドのWebアプリケーションを提供します。

Q&A

解決済

1回答

3453閲覧

Nodejs(Express)でcookieのSameSite属性をNoneに設定することができない

iban

総合スコア0

Cookie

HTTPにおけるCookieとは、クライアントのウェブブラウザ上に保存された一時的なデータを指します。クライアント側のJavaScriptでも、サーバー側のHTTPヘッダーでもクッキーの読み書き・修正・削除が可能です。

Chrome

Google Chromeは携帯、テレビ、デスクトップなどの様々なプラットフォームで利用できるウェブブラウザです。Googleが開発したもので、Blink (レンダリングエンジン) とアプリケーションフレームワークを使用しています。

Node.js

Node.jsとはGoogleのV8 JavaScriptエンジンを使用しているサーバーサイドのイベント駆動型プログラムです。

Twitter

Twitterは、140文字以内の「ツイート」と呼ばれる短文を投稿できるサービスです。Twitter上のほぼ全ての機能に対応するAPIが存在し、その関連サービスが多く公開されています。

Express

ExpressはNode.jsのWebアプリケーションフレームワークです。 マルチページを構築するための機能セットおよびハイブリッドのWebアプリケーションを提供します。

0グッド

1クリップ

投稿2020/08/31 05:25

編集2020/08/31 06:04

前提・実現したいこと

Nodejs(Express)にてTwitterのビューアプリのバックエンドを作成しております。
ログイン方法はTwitter Apiを使用して認証後に返ってくるトークンをセッションに保存し、再度アクセスのあった際にcookieからセッションを復元するようにしようと考えております。
しかし、再度アクセスの際にcookieがブロックされてしまいセッション情報を復元するとこができません。
使用してるブラウザはchromeなのですが、chromeのバージョン80からはSameSite属性を指定しなかった場合はSameSite属性がLax(同じドメインのサイトから呼び出された場合にCookieを送信する)となるようで、今回の場合はフロントとバックエンドは異なるドメインなのでcookieがブロックされるようです。
そこでSameSite属性をNone(どのサイトから呼び出されてもCookieを送信する)で設定しようとしているのですが、なかなか上手く設定することができず質問しました。
おそらくapp.use(session({})の部分で工夫をすればSameSite属性をNoneにすることができるのではないかと思っているのですが、、、
解決策をご存知の方がおられましたら、お力をお貸しいただけないでしょうか。
よろしくお願いいたします。

該当のソースコード

express

1callback_url = env.URL + "oauth/callback"; 2 3app.use( 4 cookieSession({ 5 name: "session", 6 keys: ["thisappisawesome"], 7 maxAge: 24 * 60 * 60 * 100 8 }) 9); 10 11app.use(cookieParser()); 12 13// セッションに保存 14passport.serializeUser(function(user, done) { 15 done(null, user.id); 16}); 17 18// セッションから復元 routerのreq.userから利用可能 19passport.deserializeUser(function(user, done) { 20 done(null, user); 21}); 22 23passport.use( 24 new TwitterStrategy({ 25 consumerKey: env.TWITTER_CONSUMER_KEY, 26 consumerSecret: env.TWITTER_CONSUMER_SECRET, 27 callbackURL: callback_url 28 }, 29 async (token, tokenSecret, profile, done) => { 30 31 return done(null, profile); 32 } 33)); 34 35app.use(session({ 36 allowedHeaders: ['sessionId', 'Content-Type'], 37 exposedHeaders: ['sessionId'], 38 secret: 'reply-analyzer', 39 resave: false, 40 saveUninitialized: false 41})); 42 43var cors_set = { 44 origin: env.CORS_ORIGIN_URL, 45 methods: "GET,HEAD,PUT,PATCH,POST,DELETE", 46 credentials: true // allow session cookie from browser to pass through 47}; 48 49app.use(passport.initialize()); 50app.use(passport.session()); 51app.use(cors(cors_set)); 52

試したこと

1.app.use(session({})の部分でcookieのオプションを設定してみましたが、変わらすSameSite属性をNoneとすることができませんでした。

express

1app.use(session({ 2 allowedHeaders: ['sessionId', 'Content-Type'], 3 exposedHeaders: ['sessionId'], 4 secret: 'reply-analyzer', 5 resave: false, 6 saveUninitialized: false, 7 cookie : { 8 secure: true, 9 sameSite: 'None' 10 } 11}));

2.以下のミドルウェアー(express-samesite-default)を使用してみましたが、変わらすSameSite属性をNoneとすることができませんでした。

express

1var sameSiteCookieMiddleware = require("express-samesite-default"); 2 3app.use(sameSiteCookieMiddleware.sameSiteCookieMiddleware()); 4

補足情報(FW/ツールのバージョンなど)

Node.js v12.18.2
chrome v84.0.4147.135

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

自己解決

自己解決できましたので解決できた方法を記載いたします。
コード中にcookieSessionとsessionがありますが、どちらかで良いようなので、今回はcookieSessionを使うこととしました。
最終的に以下のようになりました。

nodejs

1 var cookieSession = require("cookie-session"); 2 app.set('trust proxy', 1) 3 app.use( 4 cookieSession({ 5 name: "__session", 6 keys: ["key1"], 7 maxAge: 24 * 60 * 60 * 100, 8 secure: true, 9 httpOnly: true, 10 sameSite: 'none' 11 }) 12 ); 13 14

投稿2020/10/22 03:19

iban

総合スコア0

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.48%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問