Aller au contenu

vuejsapp dans docker avec reverse proxy


Ricola62

Messages recommandés

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?

rev_prox.png

Lien vers le commentaire
Partager sur d’autres sites

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.

Lien vers le commentaire
Partager sur d’autres sites

@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😉

Lien vers le commentaire
Partager sur d’autres sites

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 

 

Lien vers le commentaire
Partager sur d’autres sites

@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é par .Shad.
Lien vers le commentaire
Partager sur d’autres sites

@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😉

 

Lien vers le commentaire
Partager sur d’autres sites

  • 2 semaines après...
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

Lien vers le commentaire
Partager sur d’autres sites

  • 11 mois après...

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.

Lien vers le commentaire
Partager sur d’autres sites

  • 4 semaines après...

@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é par .Shad.
Lien vers le commentaire
Partager sur d’autres sites

Rejoindre la conversation

Vous pouvez publier maintenant et vous inscrire plus tard. Si vous avez un compte, connectez-vous maintenant pour publier avec votre compte.

Invité
Répondre à ce sujet…

×   Collé en tant que texte enrichi.   Coller en tant que texte brut à la place

  Seulement 75 émoticônes maximum sont autorisées.

×   Votre lien a été automatiquement intégré.   Afficher plutôt comme un lien

×   Votre contenu précédent a été rétabli.   Vider l’éditeur

×   Vous ne pouvez pas directement coller des images. Envoyez-les depuis votre ordinateur ou insérez-les depuis une URL.

×
×
  • Créer...

Information importante

Nous avons placé des cookies sur votre appareil pour aider à améliorer ce site. Vous pouvez choisir d’ajuster vos paramètres de cookie, sinon nous supposerons que vous êtes d’accord pour continuer.