Flask+Vue Flask session are not persistant because of SameSite problem in chrome

Question

I'm trying to use Flask + Vue build using the SPA style mentioned in the article: https://testdriven.io/blog/combine-flask-vue/

When using chrome, Flask sessions are not persistent google dev tools is raising a SameSite problem:

I tried to fix it according to the information I found in stack overflow: settings:

from flask import Flask, make_response
from flask import session
from flask_cors import CORS
from flask_session import Session

from SodukoUtils import init_board_options, find_next_move
from data.sudopy import Sudoku

app = Flask(__name__)
SESSION_TYPE = 'filesystem'
app.secret_key = b'abjdslgjl'
app.config.from_object(__name__)
CORS(app, supports_credentials=True)
Session(app)
app.config.update(
    SESSION_COOKIE_SECURE=True,
    SESSION_COOKIE_HTTPONLY=True,
    SESSION_COOKIE_SAMESITE='None',
)

However, the problem stil remains when I use the chrome browser. When I use the Mozila browser, the flask sessions work fine.

In Vue I use fetch to send http requests by setting mode to 'cors' and credentials to 'include' For example:

fetch(url, {
        mode: 'cors',
        credentials: 'include',
      })

github repository link

packages information:

@TarunLalwani I added to the details https://github.com/idannik/Flask_Sudoku — Idan, Sep 18 '20 at 04:30

score 0 · Answer 1 · answered Sep 19 '20 at 18:38

0

It's difficult to solve this because I can't install your dependencies or run your application.

I think you're doing this correctly. I suggest setting the app.config values before initializing the CORS and Sessions packages. Additionally, in the response handler you could manually set the headers to mark "SameSite=None". The code for this is below.

response.set_cookie('username', 'flask', secure=True, httponly=True, samesite='Lax')

See the documentation here

answered Sep 19 '20 at 18:38

Jess

3,097
2
16
42

I wrote the package information above. I tried your suggestion, it didn't work – Idan Sep 19 '20 at 19:07
1

OK, the first thing you need to figure out is how to set *any* headers with flask. This is not a Vue issue. Do a Flask tutorial for creating a server with custom headers. – Jess Sep 19 '20 at 19:18

score 0 · Answer 2 · answered Sep 24 '20 at 13:27

If you're trying to set samesite=None on Chrome for a flask app, i wrote a workaround on this thread by using the SecureCookieSessisonInterface class from flask.sessions and adding the after_request decorator on the response using the response.headers.add().

Flask+Vue Flask session are not persistant because of SameSite problem in chrome

2 Answers2