How to set SameSite=None on Chrome, Flask with Leaflet gives error

Viewed 52

I am making a application with Flask that renders a Leaflet map with a tile set from Mapbox. It loads perfectly but when zooming in it gives an error:

Indicate whether to send a cookie in a cross-site request by specifying its SameSite attribute

I know this has something to do with setting the cookie to SameSite=None, but I don't know how to do that.

This is my JavaScript function that renders the map:

var map = L.map('map').setView([52.18, 5.8], 7);
        L.tileLayer('https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token={accessToken}', {
                attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors, Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
                maxZoom: 16,
                minZoom: 7,
                id: 'mapbox/streets-v11',
                tileSize: 512,
                zoomOffset: -1,
                accessToken: 'pk.eyJ1Ijoia2V2aW4tc2NoZWxsaW5nZXIiLCJhIjoiY2wzNDhoMmJkMDA4cTNjbDd3MjdkODZ3ZCJ9.iLrs644NuUNBMeheczVhFA'
        }).addTo(map);
        
        map.setMaxBounds(map.getBounds());

This is the Flask route that calls the function:

@main.route("/map")
@login_required
def map():
    markers = []
    damages = Damage.query.all()
    for damage in damages:
        url = url_for('main.summary', summary_id=damage.id)
        marker = {'lat':damage.latitude, 'lon': damage.longitude, 'popup': f"<a href={url}>{damage.type}</a>"}
        markers.append(marker)
    return render_template('map.html', title='Map view', markers=markers)

Does anyone know how to pass SameSite=None to this and where to put it. I tried to add it in the tileLayer function but that didn't work... Do i need to set it with in flask or with in the leaflet functions?

Thanks in advance!

0 Answers
Related