Django - affichage carte OpenLayers

Version imprimable

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:

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:

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

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:

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)

01/07/2024, 11h10
DiverSIG

1 pièce(s) jointe(s)

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?

Pièce jointe 656647

Nico
01/07/2024, 14h07
fred1599
tu as bien défini tes variables STATIC_URL et STATICFILES_DIR ?
Code:

1 2 STATIC_URL = '/static/' STATICFILES_DIRS = [os.path.join(BASE_DIR, 'static'),]
tu exécutes bien ta commande python manage.py collectstatic ?
01/07/2024, 14h53
DiverSIG

1 pièce(s) jointe(s)
Extrait du settings.py:
Code:

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.

Pièce jointe 656656

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

Nico

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:

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:

1 2 3 4 MIDDLEWARE = [ ... 'myproject.middleware.CorrectMimeTypeMiddleware', ]
modifiez myproject par le nom de votre projet.

02/07/2024, 07h39
DiverSIG

1 pièce(s) jointe(s)
Bonjour,

Maintenant j'ai une erreur concernant clickjacking :

Pièce jointe 656688

Ma vue index2 :
Code:

1 2 3 def index2(request): return render(request, 'index.html',)
Pourtant j'ai dans settings.py :

Code:

'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:

/ol_app/

(c'est le nom de mon appli)

Nico

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

Code:

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

Le middleware modifié :

Code:

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:

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

02/07/2024, 09h49
fred1599

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

Apparemment vos fichiers js sont bien chargés.
02/07/2024, 09h54
DiverSIG

il y a un return response à la fin de la fonction __call__
02/07/2024, 09h58
fred1599

ok, du coup c'est quoi le problème, vous n'indiquez rien si ce n'est le bon chargement des fichiers statiques.
02/07/2024, 10h01
DiverSIG

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

Code:

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.
02/07/2024, 10h19
fred1599

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.