No se puede acceder a la carpeta pública en el servidor Express desde una aplicación de React.

25 Jul, 2023 Programación 0

El Problema

Obtengo una imagen rota en el navegador al renderizar la ruta a las imágenes guardadas en el backend (usando express).
Sé que hay preguntas similares, pero ninguna pudo resolver el problema para mí.

Detalles

Tengo esto en mi archivo server.ts ejecutándose en http://localhost:5000:

import express from 'express';
export const app = express();
require('dotenv').config();
import cookieParser from 'cookie-parser';

import path from 'path';
const pathToFile = path.resolve(__dirname, './public');

import cors from 'cors';
const corsOptions = {
  credentials: true,
  origin: 'http://localhost:3000',
}

app.use(express.json());
app.use(express.urlencoded({ extended: true }));
app.use(cookieParser());
app.use(express.static(pathToFile));
app.use(cors(corsOptions));

Tengo esto en uno de los componentes de mi aplicación de React que se ejecuta en http://localhost:3000:

{petToRender.petPicture &&
<img
src={`http://localhost:5000/${petToRender.petPicture.replace(/\\/g, "/").replace('public/','')}`}
/>}

Lo intenté también sin .replace('public/',''), pero tampoco funciona.

Más referencias y comprobaciones

Los datos en MongoDB para petToRender.petPicture se ven como muestra la captura de pantalla y se obtienen correctamente:

La imagen se carga correctamente en ./public/images usando multer:

En la consola del navegador, obtengo:

GET http://localhost:5000/images/61b3441440535e9b69a74356.jpg 404 (No encontrado)

Cuando ingreso al enlace directo de las imágenes, la consola también muestra lo siguiente:

Refused to load the image 'data:image/png;base64,iVBORw0KGgoAAAA...' because it violates the following Content Security Policy directive: "default-src 'none'". Note that 'img-src' was not explicitly set, so 'default-src' is used as a fallback

Solución

El problema podría estar relacionado con la Política de Seguridad de Contenido (Content Security Policy, CSP) impuesta por el navegador. CSP es una característica de seguridad que ayuda a prevenir los ataques de scripting entre sitios (XSS) mediante la especificación de qué fuentes de contenido se permiten cargar en una página web.

En este caso, el mensaje de error en la consola indica que la imagen está siendo bloqueada por el CSP porque su origen no está permitido de manera explícita. La directiva default-src 'none' significa que no se permite ninguna fuente de manera predeterminada, y como img-src no está establecida explícitamente, la directiva default-src se utiliza como alternativa.

Para solucionar esto, puedes agregar una etiqueta meta en la sección head de tu HTML para establecer la política CSP. Por ejemplo, para permitir la carga de imágenes desde el mismo dominio (localhost), puedes establecer la directiva img-src a 'self':

<meta http-equiv="Content-Security-Policy" content="default-src 'none'; img-src 'self';">

Alternativamente, puedes modificar las opciones CORS en el servidor para permitir solicitudes entre orígenes desde el dominio localhost:3000 estableciendo la cabecera Access-Control-Allow-Origin:

const corsOptions = { credentials: true, origin: 'http://localhost:3000', exposedHeaders: 'Access-Control-Allow-Origin', } app.use(cors(corsOptions)); app.use((req, res, next) => { res.setHeader('Access-Control-Allow-Origin', 'http://localhost:3000'); next(); });

Ten en cuenta que habilitar CORS puede introducir otros riesgos de seguridad, como permitir ataques de falsificación de solicitud entre sitios (CSRF), así que asegúrate de implementar las protecciones adecuadas (como el uso de tokens anti-CSRF) si es necesario.

Answer

davy.ai

July 25, 2023 at 6:56 am
Solución

El problema podría estar relacionado con la Política de Seguridad de Contenido (Content Security Policy, CSP) impuesta por el navegador. CSP es una característica de seguridad que ayuda a prevenir los ataques de scripting entre sitios (XSS) mediante la especificación de qué fuentes de contenido se permiten cargar en una página web.

En este caso, el mensaje de error en la consola indica que la imagen está siendo bloqueada por el CSP porque su origen no está permitido de manera explícita. La directiva default-src 'none' significa que no se permite ninguna fuente de manera predeterminada, y como img-src no está establecida explícitamente, la directiva default-src se utiliza como alternativa.

Para solucionar esto, puedes agregar una etiqueta meta en la sección head de tu HTML para establecer la política CSP. Por ejemplo, para permitir la carga de imágenes desde el mismo dominio (localhost), puedes establecer la directiva img-src a 'self':
```
<meta http-equiv="Content-Security-Policy" content="default-src 'none'; img-src 'self';">
```
Alternativamente, puedes modificar las opciones CORS en el servidor para permitir solicitudes entre orígenes desde el dominio localhost:3000 estableciendo la cabecera Access-Control-Allow-Origin:
```
const corsOptions = {
  credentials: true,
  origin: 'http://localhost:3000',
  exposedHeaders: 'Access-Control-Allow-Origin',
}
app.use(cors(corsOptions));
app.use((req, res, next) => {
  res.setHeader('Access-Control-Allow-Origin', 'http://localhost:3000');
  next();
});
```
Ten en cuenta que habilitar CORS puede introducir otros riesgos de seguridad, como permitir ataques de falsificación de solicitud entre sitios (CSRF), así que asegúrate de implementar las protecciones adecuadas (como el uso de tokens anti-CSRF) si es necesario.

Comments are closed.

es.davy.ai

¿Tienes una pregunta?