vuejsapp dans docker avec reverse proxy

Ricola62 · le 20 septembre 2021

Bonjour,

j'ai une application vuejs qui utilise mon api backend via des appels axios. appvuejs et api sont situé sur le même réseau docker.

Je ne veux pas que l'adresse soit en clair sur le navigateur par souci de sécurité.

pour cela est ce que je dois configurer le reverse proxu au niveau du NAS? de docker? ou bien dans le container appvuejs?

j'aimerai pas avoir exposer le port de l'api en externe lors de la navigation sur la vueapp, mais est ce vraiment jouable?

Andrea · le 20 septembre 2021

Bonjour @Ricola62,

Je te conseille tout d'abord de te présenter dans la section appropriée : https://www.nas-forum.com/forum/forum/16-présentation/

Puis pour répondre à ta question, pourrais-tu préciser ta configuration d'accès externe au NAS ?

Est ce que c'est :

http://nas_synology pointe vers l'adresse IP dynamique de ta box qui elle-même avec son DNS et le port-forwarding redirige la requête vers l'adresse IP statique de ton NAS sur le port 80 ?

Si oui, la box fait du port-forwarding donc si tu n'as pas configuré de port forwarding sur le port 5000, http://nas_synology:5000 ne sera pas redirigé vers http://adresseIPstatiqueNAS:5000 et tu ne peux accéder à ton application que via http://adresseIPstatiqueNASsynology:5000 et non http://nas_synology:5000.

Sinon, tu n'as qu'à supprimer le port-forwarding de ta box du port 5000 et accéder à ton app sur le réseau local via http://adresseIPstatiqueNASsynology:5000.

Autre chose, avec le Reverse Proxy du panneau de configuration tu peux faire en sorte que :

http://api.nas_synology redirige vers http://nas_synology:5000, ce qui serait me semble-t-il plus propre que de retenir le port correspondant à chaque application qui s'exécute sur ton NAS, tout ça avec un certificat wildcard.

oracle7 · le 20 septembre 2021

@Ricola62

Bonjour

Pour le Reverse Proxy du NAS tu as un excellent TUTO ici.

Par ailleurs il serait judicieux et bien plus simple pour toi et tes utilisateurs que tu utilises aussi un domaine personnalisé plutôt que une @IP:port pour accéder à ton NAS depuis l'extérieur. Voir aussi ce TUTO ici. Ne pas oublier non plus de sécuriser cet accès : voir ce TUTO ici.

Cordialement

oracle7😉

.Shad. · le 20 septembre 2021

@Ricola62 Dis-moi si je me trompe mais tu ne demandes pas comment mettre en place un proxy inversé, mais plutôt comment sécuriser l'accès à ton application. Quitte à devoir utiliser un proxy interne dans ton application, c'est ça ?

Ricola62 · le 21 septembre 2021

Le 20/09/2021 à 14:47, .Shad. a dit :

@Ricola62 Dis-moi si je me trompe mais tu ne demandes pas comment mettre en place un proxy inversé, mais plutôt comment sécuriser l'accès à ton application. Quitte à devoir utiliser un proxy interne dans ton application, c'est ça ?

Salut,

effectivement, mais du coup je suis parti sur un reverse proxy dans docker. Cependant c'est pas convaincant, je n'arrive pas à accéder à mon container api. j'ai posté mon pb ici

.Shad. · le 22 septembre 2021

@Ricola62 Généralement, dans ce genre de cas, les créateurs d'image intègrent effectivement un conteneur nginx en frontend dans leur image. Ce conteneur fait office de proxy inversé au sein de l'application, ainsi la personne qui utilise un proxy inversé en amont de ton application redirigera toutes ses requêtes vers un seul et unique port, par exemple 80.

Avoir un proxy inversé dans ton application évite à l'utilisateur qui souhaite utiliser son proxy inversé de rediriger vers des ports différents suivant les blocs location.

Tu peux t'inspirer de ce que fait Bitwarden (officiel), c'est exactement ce qu'ils utilisent :

Au sein de leur application :

server {
  listen 8080 default_server;
  listen [::]:8080 default_server;
  server_name bitwarden.xxx.ovh;
  include /etc/nginx/security-headers.conf;

  set_real_ip_from 10.0.0.0/8;
  set_real_ip_from 172.16.0.0/12;
  set_real_ip_from 192.168.0.0/16;
  set_real_ip_from fd00:abcd::/32;
  real_ip_header X-Forwarded-For;
  real_ip_recursive on;

  location / {
    proxy_pass http://web:5000/;
    include /etc/nginx/security-headers.conf;
    add_header Content-Security-Policy "default-src 'self'; style-src 'self' 'unsafe-inline'; img-src 'self' data: https://haveibeenpwned.com https://www.gravatar.com; child-src 'self' https://*.duosecurity.com https://*.duofederal.com; frame-src 'self' https://*.duosecurity.com https://*.duofederal.com; connect-src 'self' wss://bitwarden.aelnas.ovh https://api.pwnedpasswords.com https://twofactorauth.org; object-src 'self' blob:;";
    add_header X-Frame-Options SAMEORIGIN;
    add_header X-Robots-Tag "noindex, nofollow";
  }

  location /alive {
    return 200 'alive';
    add_header Content-Type text/plain;
  }

  location = /app-id.json {
    proxy_pass http://web:5000/app-id.json;
    include /etc/nginx/security-headers.conf;
    proxy_hide_header Content-Type;
    add_header Content-Type $fido_content_type;
  }

  location = /.well-known/assetlinks.json {
    proxy_pass http://web:5000/assetlinks.json;
    include /etc/nginx/security-headers.conf;
    proxy_hide_header Content-Type;
    add_header Content-Type application/json;
  }

  location = /duo-connector.html {
    proxy_pass http://web:5000/duo-connector.html;
  }

  location = /u2f-connector.html {
    proxy_pass http://web:5000/u2f-connector.html;
  }

  location = /webauthn-connector.html {
    proxy_pass http://web:5000/webauthn-connector.html;
  }

  location = /webauthn-fallback-connector.html {
    proxy_pass http://web:5000/webauthn-fallback-connector.html;
  }

  location = /sso-connector.html {
    proxy_pass http://web:5000/sso-connector.html;
  }


  location /attachments/ {
    proxy_pass http://attachments:5000/;
  }

  location /api/ {
    proxy_pass http://api:5000/;
  }

  location /icons/ {
    proxy_pass http://icons:5000/;
  }

  location /notifications/ {
    proxy_pass http://notifications:5000/;
  }

  location /notifications/hub {
    proxy_pass http://notifications:5000/hub;
    proxy_set_header Upgrade $http_upgrade;
    proxy_set_header Connection $http_connection;
  }

  location /events/ {
    proxy_pass http://events:5000/;
  }

  location /sso {
    proxy_pass http://sso:5000;
    include /etc/nginx/security-headers.conf;
    add_header X-Frame-Options SAMEORIGIN;
  }

  location /identity {
    proxy_pass http://identity:5000;
    include /etc/nginx/security-headers.conf;
    add_header X-Frame-Options SAMEORIGIN;
  }

  location /admin {
    proxy_pass http://admin:5000;
    include /etc/nginx/security-headers.conf;
    add_header X-Frame-Options SAMEORIGIN;
  }

  location /portal {
    proxy_pass http://portal:5000;
    include /etc/nginx/security-headers.conf;
    add_header X-Frame-Options SAMEORIGIN;
  }
}

Nginx écoute sur le port 8080 et renvoie vers différents conteneurs composants l'application suivant le path demandé.

Dans mon proxy inversé sur l'hôte :

server {
    listen 443 ssl;
    listen [::]:443 ssl;

    server_name bitwarden.*;

    include /config/nginx/ssl.conf;

    client_max_body_size 128M;

    # enable for ldap auth, fill in ldap details in ldap.conf
    #include /config/nginx/ldap.conf;

    # enable for Authelia
    include /config/nginx/authelia-server.conf;

    location / {
        # enable the next two lines for http auth
        #auth_basic "Restricted";
        #auth_basic_user_file /config/nginx/.htpasswd;

        # enable the next two lines for ldap auth
        #auth_request /auth;
        #error_page 401 =200 /ldaplogin;

        # enable for Authelia
        include /config/nginx/authelia-location.conf;

        include /config/nginx/proxy.conf;
        include /config/nginx/resolver.conf;
        set $upstream_app bitwarden-nginx;
        set $upstream_port 8080;
        set $upstream_proto http;
        proxy_pass $upstream_proto://$upstream_app:$upstream_port;

    }

Toutes mes requêtes sont redirigées vers le conteneur nginx sur le port d'écoute.
Pas de double chiffrement SSL.

Je ne sais pas si ça t'aide...

Modifié le 22 septembre 2021 par .Shad.

oracle7 · le 22 septembre 2021

@Ricola62

Bonjour,

Il y a 14 heures, Ricola62 a dit :

mais du coup je suis parti sur un reverse proxy dans docker. Cependant c'est pas convaincant

Si j'étais toi je regarderais cet excellent TUTO de @.Shad., à mon humble avis, ce sera sûrement plus convaincant !

Cordialement

oracle7😉

Ricola62 · le 4 octobre 2021

Le 22/09/2021 à 08:51, .Shad. a dit :

@Ricola62 Généralement, dans ce genre de cas, les créateurs d'image intègrent effectivement un conteneur nginx en frontend dans leur image. Ce conteneur fait office de proxy inversé au sein de l'application, ainsi la personne qui utilise un proxy inversé en amont de ton application redirigera toutes ses requêtes vers un seul et unique port, par exemple 80.

Avoir un proxy inversé dans ton application évite à l'utilisateur qui souhaite utiliser son proxy inversé de rediriger vers des ports différents suivant les blocs location.

Tu peux t'inspirer de ce que fait Bitwarden (officiel), c'est exactement ce qu'ils utilisent :

Au sein de leur application :

server {
  listen 8080 default_server;
  listen [::]:8080 default_server;
  server_name bitwarden.xxx.ovh;
  include /etc/nginx/security-headers.conf;

  set_real_ip_from 10.0.0.0/8;
  set_real_ip_from 172.16.0.0/12;
  set_real_ip_from 192.168.0.0/16;
  set_real_ip_from fd00:abcd::/32;
  real_ip_header X-Forwarded-For;
  real_ip_recursive on;

  location / {
    proxy_pass http://web:5000/;
    include /etc/nginx/security-headers.conf;
    add_header Content-Security-Policy "default-src 'self'; style-src 'self' 'unsafe-inline'; img-src 'self' data: https://haveibeenpwned.com https://www.gravatar.com; child-src 'self' https://*.duosecurity.com https://*.duofederal.com; frame-src 'self' https://*.duosecurity.com https://*.duofederal.com; connect-src 'self' wss://bitwarden.aelnas.ovh https://api.pwnedpasswords.com https://twofactorauth.org; object-src 'self' blob:;";
    add_header X-Frame-Options SAMEORIGIN;
    add_header X-Robots-Tag "noindex, nofollow";
  }

  location /alive {
    return 200 'alive';
    add_header Content-Type text/plain;
  }

  location = /app-id.json {
    proxy_pass http://web:5000/app-id.json;
    include /etc/nginx/security-headers.conf;
    proxy_hide_header Content-Type;
    add_header Content-Type $fido_content_type;
  }

  location = /.well-known/assetlinks.json {
    proxy_pass http://web:5000/assetlinks.json;
    include /etc/nginx/security-headers.conf;
    proxy_hide_header Content-Type;
    add_header Content-Type application/json;
  }

  location = /duo-connector.html {
    proxy_pass http://web:5000/duo-connector.html;
  }

  location = /u2f-connector.html {
    proxy_pass http://web:5000/u2f-connector.html;
  }

  location = /webauthn-connector.html {
    proxy_pass http://web:5000/webauthn-connector.html;
  }

  location = /webauthn-fallback-connector.html {
    proxy_pass http://web:5000/webauthn-fallback-connector.html;
  }

  location = /sso-connector.html {
    proxy_pass http://web:5000/sso-connector.html;
  }


  location /attachments/ {
    proxy_pass http://attachments:5000/;
  }

  location /api/ {
    proxy_pass http://api:5000/;
  }

  location /icons/ {
    proxy_pass http://icons:5000/;
  }

  location /notifications/ {
    proxy_pass http://notifications:5000/;
  }

  location /notifications/hub {
    proxy_pass http://notifications:5000/hub;
    proxy_set_header Upgrade $http_upgrade;
    proxy_set_header Connection $http_connection;
  }

  location /events/ {
    proxy_pass http://events:5000/;
  }

  location /sso {
    proxy_pass http://sso:5000;
    include /etc/nginx/security-headers.conf;
    add_header X-Frame-Options SAMEORIGIN;
  }

  location /identity {
    proxy_pass http://identity:5000;
    include /etc/nginx/security-headers.conf;
    add_header X-Frame-Options SAMEORIGIN;
  }

  location /admin {
    proxy_pass http://admin:5000;
    include /etc/nginx/security-headers.conf;
    add_header X-Frame-Options SAMEORIGIN;
  }

  location /portal {
    proxy_pass http://portal:5000;
    include /etc/nginx/security-headers.conf;
    add_header X-Frame-Options SAMEORIGIN;
  }
}

Nginx écoute sur le port 8080 et renvoie vers différents conteneurs composants l'application suivant le path demandé.

Dans mon proxy inversé sur l'hôte :

server {
    listen 443 ssl;
    listen [::]:443 ssl;

    server_name bitwarden.*;

    include /config/nginx/ssl.conf;

    client_max_body_size 128M;

    # enable for ldap auth, fill in ldap details in ldap.conf
    #include /config/nginx/ldap.conf;

    # enable for Authelia
    include /config/nginx/authelia-server.conf;

    location / {
        # enable the next two lines for http auth
        #auth_basic "Restricted";
        #auth_basic_user_file /config/nginx/.htpasswd;

        # enable the next two lines for ldap auth
        #auth_request /auth;
        #error_page 401 =200 /ldaplogin;

        # enable for Authelia
        include /config/nginx/authelia-location.conf;

        include /config/nginx/proxy.conf;
        include /config/nginx/resolver.conf;
        set $upstream_app bitwarden-nginx;
        set $upstream_port 8080;
        set $upstream_proto http;
        proxy_pass $upstream_proto://$upstream_app:$upstream_port;

    }

Toutes mes requêtes sont redirigées vers le conteneur nginx sur le port d'écoute.
Pas de double chiffrement SSL.

Je ne sais pas si ça t'aide...

merci bcp c'est exactement ce que je cherché comme réponse

Ricola62 · le 21 septembre 2022

Bonjour (je reviens sur ce sujet),

J'utilise docker et un reverse proxy (nginx), je peux donc accéder à celui ci mais uniquement en http. Peut on vraiment pas utilisé le certificat nn.synology.me dans mon reverse proxy?

Car effectivement si j’écoute sur le port 443 ssl avec nginx reverse proxy celui ci me demande les certificats.

.Shad. · le 18 octobre 2022

@Ricola62 On parle toujours bien d'un proxy inversé intégré à ton image ?

Tu pourrais, il faudrait monter le dossier où est stocké le certificat Synology sur le NAS dans ton conteneur, mais je pense que c'est se prendre la tête pour pas grand chose.
Alors que tu pourrais simplement créer un conteneur dans la même stack : certbot ou acme.sh par exemple, qui gère automatiquement le renouvellement d'un certificat pour un domaine quelconque (au prix d'un domaine...).
Ou intégrer la gestion du certificat dans le conteneur, ça marche aussi (c'est l'histoire de quelques paquets).

Modifié le 18 octobre 2022 par .Shad.

Connexion

vuejsapp dans docker avec reverse proxy

Messages recommandés

Ricola62

Lien vers le commentaire

Partager sur d’autres sites

Andrea

Lien vers le commentaire

Partager sur d’autres sites

oracle7

Lien vers le commentaire

Partager sur d’autres sites

.Shad.

Lien vers le commentaire

Partager sur d’autres sites

Ricola62

Lien vers le commentaire

Partager sur d’autres sites

.Shad.

Lien vers le commentaire

Partager sur d’autres sites

oracle7

Lien vers le commentaire

Partager sur d’autres sites

Ricola62

Lien vers le commentaire

Partager sur d’autres sites

Ricola62

Lien vers le commentaire

Partager sur d’autres sites

.Shad.

Lien vers le commentaire

Partager sur d’autres sites

Rejoindre la conversation

Qui est en ligne 8 membres, 0 anonyme, 507 invités (Afficher la liste complète)

Contributeurs populaires

Forum

Discussions

Articles

Information importante