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

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!



Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source