Django - affichage carte OpenLayers

**DiverSIG** · 01/07/2024, 10h03

Bonjour,

J'essaie d'afficher une carte OpenLayers dans mon projet Django. Pour tester, j'essaie de reproduire l'exemple ici.

J'ai mis mon script main.js dans mon répertoire static, j'écris mon template :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
 
 
<!DOCTYPE html>
{% extends "base.html" %}
{% load static %}
 
{% block css %}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/ol@v9.2.4/ol.css">
{% endblock css %}
 
{% block styles %}
	<style>
      .map {
        width: 100%;
        height: 400px;
      }
    </style>
{% endblock styles %}
 
{% block content %}
<div id="map" class="map"></div>
 
{% endblock content %}
 
{% block scripts %}
<script src="https://cdn.jsdelivr.net/npm/ol@v9.2.4/dist/ol.js"></script>
 
<script type="module" src="{% static 'js/map.js' %}"></script>
 
{% endblock scripts %}

Mais au chargement de la page, j'ai un message d'erreur :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

Le chargement du module à l’adresse « http://localhost:8000/static/js/map.js » a été bloqué en raison d’un type MIME interdit (« text/plain »).

J'ai essayé d'installer le module django-secure, et de mettre la variable SECURE_CONTENT_TYPE_NOSNIFF à True dans mon settings.py comme indiqué ici, mais j'ai toujours l'erreur.

Qu'est ce qu'il manque ?

J'ai testé sur Firefox et sur Chrome, j'ai la même erreur.

Merci,
Nico

**fred1599** · 01/07/2024, 10h51

Bonjour,

Avez-vous configuré votre serveur pour servir les fichiers statiques ?

Ajoutez ces lignes dans votre urls.py (généralement dans le fichier de votre application principale) pour servir les fichiers statiques :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
from django.conf import settings
from django.conf.urls.static import static
 
 
urlpatterns = [
    # vos autres urls
]
 
 
if settings.DEBUG:
    urlpatterns += static(settings.STATIC_URL, document_root=settings.STATIC_ROOT)

**DiverSIG** · 01/07/2024, 11h10

J'ai mis ces lignes dans le fichier urls.py de mon application, mais j'ai toujours le même message d'erreur.

En regardant les logs de Firefox, il parle de 'CORRUPTED CONTENT', je sais pas si ça a un rapport?

Nom : mimetype.jpg
Affichages : 148
Taille : 144,8 Ko

Nom : mimetype.jpg
Affichages : 148
Taille : 144,8 Ko

Nico

**fred1599** · 01/07/2024, 14h07

tu as bien défini tes variables STATIC_URL et STATICFILES_DIR ?

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
STATIC_URL = '/static/'
STATICFILES_DIRS = [os.path.join(BASE_DIR, 'static'),]

tu exécutes bien ta commande python manage.py collectstatic ?

**DiverSIG** · 01/07/2024, 14h53

Extrait du settings.py:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
 
STATIC_URL = '/static/'
 
STATICFILES_DIRS = (
    os.path.join(BASE_DIR, 'static'),
)
 
STATIC_ROOT = os.path.join(BASE_DIR, 'staticfiles')

J'ai essayé de charger en local la librairie openlayers, stockée dans static/lib au lieu de la prendre via le lien https://cdn.jsdelivr.net/npm/......
Maintenant j'ai un warning en plus dans les logs, sur le mimetype du fichier ol.js (cf. image ci-dessous)

Je lance bien la commande python manage.py collectstatic , ça me crée un répertoire staticfiles à la racine du projet où il a copié le contenu du répertoire static de l'application, et un répertoire admin où il a mis des choses, mais je ne vois pas d'où elles viennent.
Ensuite je lance la commande python manage.py runserver.

Nom : mimetype.jpg
Affichages : 137
Taille : 184,5 Ko

Nom : mimetype.jpg
Affichages : 137
Taille : 184,5 Ko

En regardant le log, on a bien la variable X-Content-Type-Options qui a la valeur nosniff (cf. image)

Nico

**fred1599** · 01/07/2024, 16h36

J'ai jamais eu ce soucis, peut-être pouvez-vous créer un middleware pour forcer le type MIME application/javascript.

~~Mais avant on peut voir le template où vous faîtes référence à map.js ?~~

Zut, j'avais zappé que vous aviez présenté dans votre 1er post,

Du coup vous pouvez essayer d'ajouter ce middleware dans le répertoire où se trouve settings.py

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
class CorrectMimeTypeMiddleware:
    def __init__(self, get_response):
        self.get_response = get_response
 
 
    def __call__(self, request):
        response = self.get_response(request)
        if request.path.endswith('.js'):
            response['Content-Type'] = 'application/javascript'
        return response

et vous placez dans settings.py

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
MIDDLEWARE = [
   ...
    'myproject.middleware.CorrectMimeTypeMiddleware',
]

modifiez myproject par le nom de votre projet.

**DiverSIG** · 02/07/2024, 07h39

Bonjour,

Maintenant j'ai une erreur concernant clickjacking :

Nom : mimetype2.jpg
Affichages : 121
Taille : 104,6 Ko

Ma vue index2 :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
 
def index2(request):
    return render(request, 'index.html',)

Pourtant j'ai dans settings.py :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

'django.middleware.clickjacking.XFrameOptionsMiddleware',

J'ai aussi essayé de mettre un decorateur sur la vue index2 comme expliqué ici, mais ça ne change rien

EDIT:
Dans la fonction __call__ du middleware, si je rajoute un print(request.path), dans la console, j'ai seulement :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

/ol_app/

(c'est le nom de mon appli)

Nico

**fred1599** · 02/07/2024, 09h30

Dans le middleware que je propose, vérifiez que response ne vaut pas None.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
class CorrectMimeTypeMiddleware:
    def __init__(self, get_response):
        self.get_response = get_response
 
 
    def __call__(self, request):
        response = self.get_response(request)
        if response and request.path.endswith('.js'):
            response['Content-Type'] = 'application/javascript'
        return response

**DiverSIG** · 02/07/2024, 09h37

Le middleware modifié :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
class CorrectMimeTypeMiddleware:
    def __init__(self, get_response):
        self.get_response = get_response
 
 
    def __call__(self, request):
        print('request.path : ', request.path)
        response = self.get_response(request)
        if response and request.path.endswith('.js'):
            response['Content-Type'] = 'application/javascript'
        print('response : ', response)
        return response

Le résultat quand je lance mon appli dans le navigateur :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
Django version 5.0.6, using settings 'ol_project.settings'
Starting development server at http://127.0.0.1:8000/
Quit the server with CTRL-BREAK.
 
request.path :  /ol_app/
response :  <HttpResponse status_code=200, "text/html; charset=utf-8">
[02/Jul/2024 09:34:47] "GET /ol_app/ HTTP/1.1" 200 975
[02/Jul/2024 09:34:47] "GET /static/js/map.js HTTP/1.1" 200 899
[02/Jul/2024 09:34:47] "GET /static/js/ol-v9.2.4/ol.css HTTP/1.1" 200 6284
[02/Jul/2024 09:34:47] "GET /static/js/ol-v9.2.4/dist/ol.js HTTP/1.1" 200 824309
[02/Jul/2024 09:34:47] "GET /static/img/favicon.ico HTTP/1.1" 200 16958

**fred1599** · 02/07/2024, 09h49

Vous ne retournez pas response, vous l'affichez, vous avez besoin de retourner cette valeur.

Apparemment vos fichiers js sont bien chargés.

**DiverSIG** · 02/07/2024, 09h54

il y a un return response à la fin de la fonction __call__

**fred1599** · 02/07/2024, 09h58

ok, du coup c'est quoi le problème, vous n'indiquez rien si ce n'est le bon chargement des fichiers statiques.

**DiverSIG** · 02/07/2024, 10h01

Le problème, c'est que malgré ça, j'ai toujours un message d'erreur dans le navigateur :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

Le chargement du module à l’adresse « http://localhost:8000/static/js/map.js » a été bloqué en raison d’un type MIME interdit (« text/plain »).

et ma page ne se charge pas.

**fred1599** · 02/07/2024, 10h19

Vous avez essayé de vider le cache de votre navigateur ?

Dans le cas où ça ne fonctionne toujours pas, utilisez le module WhiteNoise qui est un package Python qui peut servir les fichiers statiques avec les bons types MIME en production. Vous pouvez l'utiliser en mode développement pour voir si cela résout le problème.

Django - affichage carte OpenLayers

Django Python

Discussions similaires

Partager

Partager