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

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

新規登録して質問してみよう
ただいま回答率
87.20%
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アプリケーションを提供します。

解決済

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

iban
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アプリケーションを提供します。

1回答

0評価

1クリップ

37閲覧

投稿2020/08/31 05:25

編集2022/01/12 10:58

前提・実現したいこと

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

該当のソースコード

express

callback_url = env.URL + "oauth/callback"; app.use( cookieSession({ name: "session", keys: ["thisappisawesome"], maxAge: 24 * 60 * 60 * 100 }) ); app.use(cookieParser()); // セッションに保存 passport.serializeUser(function(user, done) { done(null, user.id); }); // セッションから復元 routerのreq.userから利用可能 passport.deserializeUser(function(user, done) { done(null, user); }); passport.use( new TwitterStrategy({ consumerKey: env.TWITTER_CONSUMER_KEY, consumerSecret: env.TWITTER_CONSUMER_SECRET, callbackURL: callback_url }, async (token, tokenSecret, profile, done) => { return done(null, profile); } )); app.use(session({ allowedHeaders: ['sessionId', 'Content-Type'], exposedHeaders: ['sessionId'], secret: 'reply-analyzer', resave: false, saveUninitialized: false })); var cors_set = { origin: env.CORS_ORIGIN_URL, methods: "GET,HEAD,PUT,PATCH,POST,DELETE", credentials: true // allow session cookie from browser to pass through }; app.use(passport.initialize()); app.use(passport.session()); app.use(cors(cors_set));

試したこと

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

express

app.use(session({ allowedHeaders: ['sessionId', 'Content-Type'], exposedHeaders: ['sessionId'], secret: 'reply-analyzer', resave: false, saveUninitialized: false, cookie : { secure: true, sameSite: 'None' } }));

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

express

var sameSiteCookieMiddleware = require("express-samesite-default"); app.use(sameSiteCookieMiddleware.sameSiteCookieMiddleware());

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

Node.js v12.18.2
chrome v84.0.4147.135

良い質問の評価を上げる

以下のような質問は評価を上げましょう

  • 質問内容が明確
  • 自分も答えを知りたい
  • 質問者以外のユーザにも役立つ

評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

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

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

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

teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

  • プログラミングに関係のない質問
  • やってほしいことだけを記載した丸投げの質問
  • 問題・課題が含まれていない質問
  • 意図的に内容が抹消された質問
  • 過去に投稿した質問と同じ内容の質問
  • 広告と受け取られるような投稿

評価を下げると、トップページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

まだ回答がついていません

会員登録して回答してみよう

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

ただいまの回答率
87.20%

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

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

質問する

関連した質問

同じタグがついた質問を見る

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アプリケーションを提供します。