Frontend

Es imprescindible para nuestras aplicaciones frontend tengan las mejores prácticas alíneadas con CyberSeguridad por lo que habilitamos una imagen de Docker que viene con los templates la cual permite ciertas configuraciones.

• Habilitar las configuraciones siempre optando por la más restrictiva
• Utilizar las variables de entorno para configurar el comportamiento de nginx según la necesidad. (No necesita un build son configuraciones dinamicas en runtime)

Actualmente disponemos de las siguientes variables de entorno asociadas a temas de seguridad para nginx

Se pueden configurar a nivel Dockerfile o a nivel variable de entorno

Es decir se puede agregar en el Dockerfile como en el ejemplo de abajo, o se pueden agregar directamente a los n archivos: value-<ENTORNO>.yml

## ...Ignoramos el resto del archivo por brevedad
env:
    # Definición de Variabless
    normal:
        NGINX_FRAME_ANCESTORS: "'self' https://www.example.com"
## ...Ignoramos el resto del archivo por brevedad

Variable	Descripción	Default
NGINX_RUNTIME_ENV_PREFIX	Prefijo con el que se cargan las variables internamente (para inyectar en el HTML). Tomar en cuenta que debe terminar en _	REACT_APP_
NGINX_CACHE_DURATION_ASSETS	Duración del cache para archivos estáticos (svg|css|js) excepto __ENV.js y remoteEntry.js. *	6M
NGINX_CACHE_DURATION_IMAGES	Duración del cache para imágenes (jpg|jpeg|png|gif|ico) *	6M
NGINX_FRAME_ANCESTORS	Permite consumir como iframe. Sintaxis. No recomendamos está opción, sería para casos muy puntuales.	"'self'"
NGINX_ORIGIN_CORS_1	Permite cors origin. Cualquier variable que tenga el prefijo NGINX_ORIGIN_CORS_ será tomada y agregada al map que usa internamente para habilitar cors. Permite configuración mediante Regex ejemplo ~^https?://(www\.)?(localhost:3000)$ Notese que el ~ es necesario
NGINX_ORIGIN_REDIRECT_1	Permite redirección de origen. Cualquier variable que tenga el prefijo NGINX_ORIGIN_REDIRECT_ será tomada y agregada al map que usa internamente para habilitar redirección de origen. Ejemplo: NGINX_ORIGIN_REDIRECT_OTHER=http://other:9000 Va a generar la ruta internamente para que cuando el usuario ingrese en {host}/_internal/other internamente lo redirija a http://other:9000 con los argumentos que se le envíen

* Acepta formato reducido ya que utiliza expires por debajo. Ej: 2d, 3h

Dockerfile

# ...ignorado el resto por brevedad

FROM ghcr.io/architecture-it/nginx:latest

# Configure Nginx caching duration for static assets (svg|css|js) except __ENV.js. Default 6M
ENV NGINX_CACHE_DURATION_ASSETS 1M
# Configure Nginx caching duration for images (jpg|jpeg|png|gif|ico). Default 6M
ENV NGINX_CACHE_DURATION_IMAGES 6M
# Allow consume as iframe https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/frame-ancestors#syntax
# always include self in the frame-ancestors directive
ENV NGINX_FRAME_ANCESTORS "'self'"
# Allow cors origin
# this works with regex and compare the http origin (allow only for http or https localhost:3000)
ENV NGINX_ORIGIN_CORS_1 ~^https?://(www\.)?(localhost:3000)$
# We can pass many origins as we want For example allowing any port
# ENV NGINX_ORIGIN_CORS_2 ~^https?://(www\.)?(localhost:\d+)$

COPY --from=builder --chown=nginx:nginx /app/dist .

CMD ["/bin/sh", "-c", "react-env -d ./ -- && nginx -g \"daemon off;\""]

FAQ

Necesita hailitarse el consumo de un iframe de un dominio en específico

Sencillamente tienes que aregar la variable de entorno NGINX_FRAME_ANCESTORS con el dominio que deseas permitir. Ejemplo NGINX_FRAME_ANCESTORS="'self' https://www.example.com"