slicejs-web-framework 2.2.6 → 2.2.8

package/Slice/Components/Structural/Controller/Controller.js

@@ -7,14 +7,365 @@ export default class Controller {
       this.classes = new Map();
       this.requestedStyles = new Set(); // ✅ CRÍTICO: Para tracking de CSS cargados
       this.activeComponents = new Map();
-      
+
       // 🚀 OPTIMIZACIÓN: Índice inverso para búsqueda rápida de hijos
       // parentSliceId → Set<childSliceId>
       this.childrenIndex = new Map();
-      
+
+      // 📦 Bundle system
+      this.loadedBundles = new Set();
+      this.bundleConfig = null;
+      this.criticalBundleLoaded = false;
+
       this.idCounter = 0;
    }
 
+   /**
+    * 📦 Initializes bundle system (called automatically when config is loaded)
+    */
+   initializeBundles(config = null) {
+      if (config) {
+         this.bundleConfig = config;
+
+         // Register critical bundle components if available
+         if (config.bundles?.critical) {
+            // The critical bundle should already be loaded, register its components
+            this.loadedBundles.add('critical');
+            // Note: Critical bundle registration is handled by the auto-import
+         }
+         this.criticalBundleLoaded = true;
+      } else {
+         // No bundles available, will use individual component loading
+         this.bundleConfig = null;
+         this.criticalBundleLoaded = false;
+      }
+   }
+
+   /**
+    * 📦 Loads a bundle by name or category
+    */
+   async loadBundle(bundleName) {
+      if (this.loadedBundles.has(bundleName)) {
+         return; // Already loaded
+      }
+
+      try {
+         const bundleInfo = this.bundleConfig?.bundles?.routes?.[bundleName];
+
+         if (!bundleInfo) {
+            console.warn(`Bundle ${bundleName} not found in configuration`);
+            return;
+         }
+
+         const bundlePath = `/bundles/${bundleInfo.file}`;
+
+         // Dynamic import of the bundle
+         const bundleModule = await import(bundlePath);
+
+         // Manually register components from the imported bundle
+         if (bundleModule.SLICE_BUNDLE) {
+            this.registerBundle(bundleModule.SLICE_BUNDLE);
+         }
+
+         this.loadedBundles.add(bundleName);
+
+      } catch (error) {
+         console.warn(`Failed to load bundle ${bundleName}:`, error);
+      }
+   }
+
+   /**
+    * 📦 Registers a bundle's components (called automatically by bundle files)
+    */
+   registerBundleLegacy(bundle) {
+      const { components, metadata } = bundle;
+
+      console.log(`📦 Registering bundle: ${metadata.type} (${metadata.componentCount} components)`);
+
+      // Phase 1: Register templates and CSS for all components first
+      for (const [componentName, componentData] of Object.entries(components)) {
+         try {
+            // Register HTML template
+            if (componentData.html !== undefined && !this.templates.has(componentName)) {
+               const template = document.createElement('template');
+               template.innerHTML = componentData.html || '';
+               this.templates.set(componentName, template);
+            }
+
+            // Register CSS styles
+            if (componentData.css !== undefined && !this.requestedStyles.has(componentName)) {
+               // Use the existing stylesManager to register component styles
+               if (window.slice && window.slice.stylesManager) {
+                  window.slice.stylesManager.registerComponentStyles(componentName, componentData.css || '');
+                  this.requestedStyles.add(componentName);
+               }
+            }
+         } catch (error) {
+            console.warn(`❌ Failed to register assets for ${componentName}:`, error);
+         }
+      }
+
+      // Phase 2: Evaluate all external file dependencies
+      const processedDeps = new Set();
+      for (const [componentName, componentData] of Object.entries(components)) {
+         if (componentData.dependencies) {
+            for (const [depName, depContent] of Object.entries(componentData.dependencies)) {
+               if (!processedDeps.has(depName)) {
+                  try {
+                     // Convert ES6 exports to global assignments
+                     let processedContent = depContent
+                        .replace(/export\s+const\s+(\w+)\s*=/g, 'window.$1 =')
+                        .replace(/export\s+let\s+(\w+)\s*=/g, 'window.$1 =')
+                        .replace(/export\s+var\s+(\w+)\s*=/g, 'window.$1 =')
+                        .replace(/export\s+function\s+(\w+)/g, 'window.$1 = function')
+                        .replace(/export\s+default\s+/g, 'window.defaultExport =')
+                        .replace(/export\s*{\s*([^}]+)\s*}/g, (match, exports) => {
+                           return exports.split(',').map(exp => {
+                              const cleanExp = exp.trim();
+                              const varName = cleanExp.split(' as ')[0].trim();
+                              return `window.${varName} = ${varName};`;
+                           }).join('\n');
+                        })
+                        // Remove any remaining export keywords
+                        .replace(/^\s*export\s+/gm, '');
+
+                     // Evaluate the dependency
+                     try {
+                        new Function('slice', 'customElements', 'window', 'document', processedContent)
+                           (window.slice, window.customElements, window, window.document);
+                     } catch (evalError) {
+                        console.warn(`❌ Failed to evaluate processed dependency ${depName}:`, evalError);
+                        console.warn('Processed content preview:', processedContent.substring(0, 200));
+                        // Try evaluating the original content as fallback
+                        try {
+                           new Function('slice', 'customElements', 'window', 'document', depContent)
+                              (window.slice, window.customElements, window, window.document);
+                           console.log(`✅ Fallback evaluation succeeded for ${depName}`);
+                        } catch (fallbackError) {
+                           console.warn(`❌ Fallback evaluation also failed for ${depName}:`, fallbackError);
+                        }
+                     }
+
+                     processedDeps.add(depName);
+                     console.log(`📄 Dependency loaded: ${depName}`);
+                  } catch (depError) {
+                     console.warn(`⚠️ Failed to load dependency ${depName} for ${componentName}:`, depError);
+                  }
+               }
+            }
+         }
+      }
+
+      // Phase 3: Evaluate all component classes (now that dependencies are available)
+      for (const [componentName, componentData] of Object.entries(components)) {
+         // For JavaScript classes, we need to evaluate the code
+         if (componentData.js && !this.classes.has(componentName)) {
+               try {
+                  // Create evaluation context with dependencies
+                  let evalCode = componentData.js;
+
+                  // Prepend dependencies to make them available
+                  if (componentData.dependencies) {
+                     const depCode = Object.entries(componentData.dependencies)
+                        .map(([depName, depContent]) => {
+                           // Convert ES6 exports to global assignments
+                           return depContent
+                              .replace(/export\s+const\s+(\w+)\s*=/g, 'window.$1 =')
+                              .replace(/export\s+let\s+(\w+)\s*=/g, 'window.$1 =')
+                              .replace(/export\s+function\s+(\w+)/g, 'window.$1 = function')
+                              .replace(/export\s+default\s+/g, 'window.defaultExport =')
+                              .replace(/export\s*{\s*([^}]+)\s*}/g, (match, exports) => {
+                                 return exports.split(',').map(exp => {
+                                    const cleanExp = exp.trim();
+                                    return `window.${cleanExp} = ${cleanExp};`;
+                                 }).join('\n');
+                              });
+                        })
+                        .join('\n\n');
+
+                     evalCode = depCode + '\n\n' + evalCode;
+                  }
+
+                  // Evaluate the complete code
+                  const componentClass = new Function('slice', 'customElements', 'window', 'document', `
+                     "use strict";
+                     ${evalCode}
+                     return ${componentName};
+                  `)(window.slice, window.customElements, window, window.document);
+
+                  if (componentClass) {
+                     this.classes.set(componentName, componentClass);
+                     console.log(`📝 Class registered for: ${componentName}`);
+                  }
+               } catch (error) {
+                  console.warn(`❌ Failed to evaluate class for ${componentName}:`, error);
+                  console.warn('Code that failed:', componentData.js.substring(0, 200) + '...');
+               }
+            }
+         }
+      }
+
+
+
+   /**
+    * 📦 New bundle registration method (simplified and robust)
+    */
+   registerBundle(bundle) {
+      const { components, metadata } = bundle;
+
+      console.log(`📦 Registering bundle: ${metadata.type} (${metadata.componentCount} components)`);
+
+      // Phase 1: Register all templates and CSS first
+      for (const [componentName, componentData] of Object.entries(components)) {
+         try {
+            if (componentData.html !== undefined && !this.templates.has(componentName)) {
+               const template = document.createElement('template');
+               template.innerHTML = componentData.html || '';
+               this.templates.set(componentName, template);
+            }
+
+            if (componentData.css !== undefined && !this.requestedStyles.has(componentName)) {
+               if (window.slice && window.slice.stylesManager) {
+                  window.slice.stylesManager.registerComponentStyles(componentName, componentData.css || '');
+                  this.requestedStyles.add(componentName);
+                  console.log(`🎨 CSS registered for: ${componentName}`);
+               }
+            }
+         } catch (error) {
+            console.warn(`❌ Failed to register assets for ${componentName}:`, error);
+         }
+      }
+
+      // Phase 2: Evaluate all external file dependencies first
+      const processedDeps = new Set();
+      for (const [componentName, componentData] of Object.entries(components)) {
+         if (componentData.externalDependencies) {
+            for (const [depName, depContent] of Object.entries(componentData.externalDependencies)) {
+               if (!processedDeps.has(depName)) {
+                  try {
+                     // Process ES6 exports to make the code evaluable
+                     let processedContent = depContent
+                        // Convert named exports: export const varName = ... → window.varName = ...
+                        .replace(/export\s+const\s+(\w+)\s*=\s*/g, 'window.$1 = ')
+                        .replace(/export\s+let\s+(\w+)\s*=\s*/g, 'window.$1 = ')
+                        .replace(/export\s+function\s+(\w+)/g, 'window.$1 = function')
+                        .replace(/export\s+default\s+/g, 'window.defaultExport = ')
+                        // Handle export { var1, var2 } statements
+                        .replace(/export\s*{\s*([^}]+)\s*}/g, (match, exportsStr) => {
+                           const exports = exportsStr.split(',').map(exp => exp.trim().split(' as ')[0].trim());
+                           return exports.map(varName => `window.${varName} = ${varName};`).join('\n');
+                        })
+                        // Remove any remaining export keywords
+                        .replace(/^\s*export\s+/gm, '');
+
+                     // Evaluate the processed content
+                     new Function('slice', 'customElements', 'window', 'document', processedContent)
+                        (window.slice, window.customElements, window, window.document);
+
+                     processedDeps.add(depName);
+                     console.log(`📄 External dependency loaded: ${depName}`);
+                  } catch (depError) {
+                     console.warn(`⚠️ Failed to load external dependency ${depName}:`, depError);
+                     console.warn('Original content preview:', depContent.substring(0, 200));
+                  }
+               }
+            }
+         }
+      }
+
+      // Phase 3: Evaluate all component classes (external dependencies are now available)
+      for (const [componentName, componentData] of Object.entries(components)) {
+         if (componentData.js && !this.classes.has(componentName)) {
+            try {
+               // Simple evaluation
+               const componentClass = new Function('slice', 'customElements', 'window', 'document', `
+                  ${componentData.js}
+                  return ${componentName};
+               `)(window.slice, window.customElements, window, window.document);
+
+               if (componentClass) {
+                  this.classes.set(componentName, componentClass);
+                  console.log(`📝 Class registered for: ${componentName}`);
+               }
+            } catch (error) {
+               console.warn(`❌ Failed to evaluate class for ${componentName}:`, error);
+               // Continue with other components instead of failing completely
+            }
+         }
+      }
+
+      console.log(`✅ Bundle registration completed: ${metadata.componentCount} components processed`);
+   }
+
+   /**
+    * 📦 Determines which bundle to load for a component
+    */
+   getBundleForComponent(componentName) {
+      if (!this.bundleConfig?.bundles) return null;
+
+      // Check if component is in critical bundle
+      if (this.bundleConfig.bundles.critical?.components?.includes(componentName)) {
+         return 'critical';
+      }
+
+      // Find component in route bundles
+      if (this.bundleConfig.bundles.routes) {
+         for (const [bundleName, bundleInfo] of Object.entries(this.bundleConfig.bundles.routes)) {
+            if (bundleInfo.components?.includes(componentName)) {
+               return bundleName;
+            }
+         }
+      }
+
+      return null;
+   }
+
+   /**
+    * 📦 Checks if a component is available from loaded bundles
+    */
+   isComponentFromBundle(componentName) {
+      if (!this.bundleConfig?.bundles) return false;
+
+      // Check critical bundle
+      if (this.bundleConfig.bundles.critical?.components?.includes(componentName)) {
+         return this.criticalBundleLoaded;
+      }
+
+      // Check route bundles
+      if (this.bundleConfig.bundles.routes) {
+         for (const [bundleName, bundleInfo] of Object.entries(this.bundleConfig.bundles.routes)) {
+            if (bundleInfo.components?.includes(componentName)) {
+               return this.loadedBundles.has(bundleName);
+            }
+         }
+      }
+
+      return false;
+   }
+
+   /**
+    * 📦 Gets component data from loaded bundles
+    */
+   getComponentFromBundle(componentName) {
+      if (!this.bundleConfig?.bundles) return null;
+
+      // Find component in any loaded bundle
+      const allBundles = [
+         { name: 'critical', data: this.bundleConfig.bundles.critical },
+         ...Object.entries(this.bundleConfig.bundles.routes || {}).map(([name, data]) => ({ name, data }))
+      ];
+
+      for (const { name: bundleName, data: bundleData } of allBundles) {
+         if (bundleData?.components?.includes(componentName) && this.loadedBundles.has(bundleName)) {
+            // Find the bundle file and extract component data
+            // This is a simplified version - in practice you'd need to access the loaded bundle data
+            return { bundleName, componentName };
+         }
+      }
+
+      return null;
+   }
+
    logActiveComponents() {
       this.activeComponents.forEach((component) => {
          let parent = component.parentComponent;

package/Slice/Slice.js

@@ -11,6 +11,8 @@ export default class Slice {
       this.loggerConfig = sliceConfig.logger;
       this.debuggerConfig = sliceConfig.debugger;
       this.loadingConfig = sliceConfig.loading;
+
+      // 📦 Bundle system is initialized automatically via import in index.js
    }
 
    async getClass(module) {
@@ -46,8 +48,17 @@ export default class Slice {
          return null;
       }
 
+      // 📦 Try to load from bundles first
+      const bundleName = this.controller.getBundleForComponent(componentName);
+      if (bundleName && !this.controller.loadedBundles.has(bundleName)) {
+         await this.controller.loadBundle(bundleName);
+      }
+
       let componentCategory = this.controller.componentCategories.get(componentName);
 
+      // 📦 Check if component is already available from loaded bundles
+      const isFromBundle = this.controller.isComponentFromBundle(componentName);
+
       if (componentCategory === 'Structural') {
          this.logger.logError(
             'Slice',
@@ -57,27 +68,31 @@ export default class Slice {
          return null;
       }
 
-      let isVisual = slice.paths.components[componentCategory].type === "Visual";     
+      let isVisual = slice.paths.components[componentCategory].type === "Visual";
       let modulePath = `${slice.paths.components[componentCategory].path}/${componentName}/${componentName}.js`;
 
       // Load template, class, and CSS concurrently if needed
       try {
-         const loadTemplate =
-            isVisual && !this.controller.templates.has(componentName)
-               ? this.controller.fetchText(componentName, 'html', componentCategory)
-               : Promise.resolve(null);
+         // 📦 Skip individual loading if component is available from bundles
+         const loadTemplate = (isFromBundle || !isVisual || this.controller.templates.has(componentName))
+            ? Promise.resolve(null)
+            : this.controller.fetchText(componentName, 'html', componentCategory);
 
-         const loadClass = !this.controller.classes.has(componentName)
-            ? this.getClass(modulePath)
-            : Promise.resolve(null);
+         const loadClass = (isFromBundle || this.controller.classes.has(componentName))
+            ? Promise.resolve(null)
+            : this.getClass(modulePath);
 
-         const loadCSS =
-            isVisual && !this.controller.requestedStyles.has(componentName)
-               ? this.controller.fetchText(componentName, 'css', componentCategory)
-               : Promise.resolve(null);
+         const loadCSS = (isFromBundle || !isVisual || this.controller.requestedStyles.has(componentName))
+            ? Promise.resolve(null)
+            : this.controller.fetchText(componentName, 'css', componentCategory);
 
          const [html, ComponentClass, css] = await Promise.all([loadTemplate, loadClass, loadCSS]);
 
+         // 📦 If component is from bundle but not in cache, it should have been registered by registerBundle
+         if (isFromBundle) {
+            console.log(`📦 Using bundled component: ${componentName}`);
+         }
+
          if (html || html === '') {
             const template = document.createElement('template');
             template.innerHTML = html;
@@ -219,4 +234,16 @@ async function init() {
    
 }
 
-await init();
+   await init();
+
+   // Initialize bundles if available
+   try {
+      const { initializeBundles } = await import('/bundles/bundle.config.js');
+      if (initializeBundles) {
+         await initializeBundles(window.slice);
+         console.log('📦 Bundles initialized automatically');
+      }
+   } catch (error) {
+      // Bundles not available, continue with individual component loading
+      console.log('📄 Using individual component loading (no bundles found)');
+   }

package/api/index.js

@@ -1,15 +1,20 @@
+// api/index.js - Seguridad automática sin configuración
 import express from 'express';
 import path from 'path';
+import fs from 'fs';
 import { fileURLToPath } from 'url';
 import { dirname } from 'path';
-import inquirer from 'inquirer';
+import { 
+  securityMiddleware, 
+  sliceFrameworkProtection, 
+  suspiciousRequestLogger
+} from './middleware/securityMiddleware.js';
 
 const __filename = fileURLToPath(import.meta.url);
 const __dirname = dirname(__filename);
 import sliceConfig from '../src/sliceConfig.json' with { type: 'json' };
 
 let server;
-
 const app = express();
 
 // Parsear argumentos de línea de comandos
@@ -22,12 +27,48 @@ const folderDeployed = 'src';
 // Obtener puerto desde sliceConfig.json, con fallback a process.env.PORT
 const PORT = sliceConfig.server?.port || process.env.PORT || 3001;
 
-
-app.use('/Slice/', express.static(path.join(__dirname, '..', 'node_modules', 'slicejs-web-framework', 'Slice')));
-
-
-// Middleware para servir archivos estáticos
-app.use(express.static(path.join(__dirname, `../${folderDeployed}`)));
+// ==============================================
+// MIDDLEWARES DE SEGURIDAD (APLICAR PRIMERO)
+// ==============================================
+
+// 1. Logger de peticiones sospechosas (solo observación, no bloquea)
+app.use(suspiciousRequestLogger());
+
+// 2. Protección del framework - TOTALMENTE AUTOMÁTICA
+// Detecta automáticamente el dominio desde los headers
+// Funciona en localhost, IP, y cualquier dominio
+app.use(sliceFrameworkProtection());
+
+// 3. Middleware de seguridad general
+app.use(securityMiddleware({
+  allowedExtensions: [
+    '.js', '.css', '.html', '.json', 
+    '.svg', '.png', '.jpg', '.jpeg', '.gif', 
+    '.woff', '.woff2', '.ttf', '.ico'
+  ],
+  blockedPaths: [
+    '/node_modules',
+    '/package.json',
+    '/package-lock.json',
+    '/.env',
+    '/.git',
+    '/api/middleware'
+  ],
+  allowPublicAssets: true
+}));
+
+// ==============================================
+// MIDDLEWARES DE APLICACIÓN
+// ==============================================
+
+// Middleware global para archivos JavaScript con MIME types correctos
+app.use((req, res, next) => {
+  if (req.path.endsWith('.js')) {
+    // Forzar headers correctos para TODOS los archivos .js
+    res.setHeader('Content-Type', 'application/javascript; charset=utf-8');
+  }
+  next();
+});
 
 // Middleware para parsear JSON y formularios
 app.use(express.json());
@@ -46,6 +87,90 @@ app.use((req, res, next) => {
   }
 });
 
+// ==============================================
+// ARCHIVOS ESTÁTICOS (DESPUÉS DE SEGURIDAD)
+// ==============================================
+
+// Función de utilidad para verificar si existe el directorio bundles
+function bundlesDirectoryExists() {
+  const bundleDir = path.join(__dirname, `../${folderDeployed}`, 'bundles');
+  return fs.existsSync(bundleDir) && fs.statSync(bundleDir).isDirectory();
+}
+
+// Capturar todas las peticiones a bundles para debugging
+app.use('/bundles/', (req, res, next) => {
+  console.log(`🔍 Bundle request: ${req.method} ${req.originalUrl}`);
+  next();
+});
+
+// Middleware personalizado para archivos de bundles con MIME types correctos
+// ⚠️ DEBE IR ANTES del middleware general para tener prioridad
+app.use('/bundles/', (req, res, next) => {
+  // Verificar si existe el directorio bundles
+  if (!bundlesDirectoryExists()) {
+    console.log(`ℹ️ Bundles directory does not exist, skipping bundle processing`);
+    return next(); // Continuar con el siguiente middleware
+  }
+
+  // Solo procesar archivos .js
+  if (req.path.endsWith('.js')) {
+    const filePath = path.join(__dirname, `../${folderDeployed}`, 'bundles', req.path);
+    console.log(`📂 Processing bundle: ${req.path} -> ${filePath}`);
+
+    // Verificar que el archivo existe
+    if (fs.existsSync(filePath)) {
+      try {
+        // Leer y servir el archivo con headers correctos
+        const fileContent = fs.readFileSync(filePath, 'utf8');
+        res.setHeader('Content-Type', 'application/javascript; charset=utf-8');
+        res.setHeader('Cache-Control', 'no-cache, no-store, must-revalidate'); // No cachear para permitir actualizaciones en tiempo real
+        res.setHeader('Pragma', 'no-cache');
+        res.setHeader('Expires', '0');
+        console.log(`✅ Serving bundle: ${req.path} (${fileContent.length} bytes, ${Buffer.byteLength(fileContent, 'utf8')} bytes UTF-8)`);
+        return res.send(fileContent);
+      } catch (error) {
+        console.log(`❌ Error reading bundle file: ${error.message}`);
+        return res.status(500).send('Error reading bundle file');
+      }
+    } else {
+      console.log(`❌ Bundle file not found: ${filePath}`);
+      // Listar archivos disponibles para debugging
+      try {
+        const bundleDir = path.join(__dirname, `../${folderDeployed}`, 'bundles');
+        if (fs.existsSync(bundleDir)) {
+          const files = fs.readdirSync(bundleDir);
+          console.log(`📁 Available files in bundles: ${files.join(', ')}`);
+        }
+      } catch (e) {
+        console.log(`❌ Could not list bundle directory: ${e.message}`);
+      }
+      return res.status(404).send('Bundle file not found');
+    }
+  }
+
+  // Para archivos no .js, continuar con el middleware estático normal
+  next();
+});
+
+// Servir otros archivos de bundles (CSS, etc.) con el middleware estático normal
+// Solo si existe el directorio bundles
+if (bundlesDirectoryExists()) {
+  app.use('/bundles/', express.static(path.join(__dirname, `../${folderDeployed}`, 'bundles')));
+  console.log(`📦 Bundles directory found, serving static files`);
+} else {
+  console.log(`ℹ️ Bundles directory not found, skipping static bundle serving`);
+}
+
+// Servir framework Slice.js
+app.use('/Slice/', express.static(path.join(__dirname, '..', 'node_modules', 'slicejs-web-framework', 'Slice')));
+
+// Servir archivos estáticos del proyecto
+app.use(express.static(path.join(__dirname, `../${folderDeployed}`)));
+
+// ==============================================
+// RUTAS DE API
+// ==============================================
+
 // Ruta de ejemplo para API
 app.get('/api/status', (req, res) => {
   res.json({
@@ -54,13 +179,23 @@ app.get('/api/status', (req, res) => {
     folder: folderDeployed,
     timestamp: new Date().toISOString(),
     framework: 'Slice.js',
-    version: '2.0.0'
+    version: '2.0.0',
+    security: {
+      enabled: true,
+      mode: 'automatic',
+      description: 'Zero-config security - works with any domain'
+    }
   });
 });
 
+
+// ==============================================
+// SPA FALLBACK
+// ==============================================
+
 // SPA fallback - servir index.html para rutas no encontradas
 app.get('*', (req, res) => {
-  const indexPath = path.join(__dirname, `../${folderDeployed}`,"App", 'index.html');
+  const indexPath = path.join(__dirname, `../${folderDeployed}`, "App", 'index.html');
   res.sendFile(indexPath, (err) => {
     if (err) {
       res.status(404).send(`
@@ -76,8 +211,14 @@ app.get('*', (req, res) => {
   });
 });
 
+// ==============================================
+// INICIO DEL SERVIDOR
+// ==============================================
+
 function startServer() {
   server = app.listen(PORT, () => {
+    console.log(`🔒 Security middleware: active (zero-config, automatic)`);
+    console.log(`🚀 Slice.js server running on port ${PORT}`);
   });
 }
 
@@ -95,4 +236,4 @@ process.on('SIGTERM', () => {
 // Iniciar servidor
 startServer();
 
-export default app;
+export default app;

package/api/middleware/securityMiddleware.js

@@ -0,0 +1,253 @@
+// api/middleware/securityMiddleware.js
+import path from 'path';
+
+/**
+ * Middleware de seguridad para prevenir acceso directo malicioso
+ * pero permitir que la aplicación cargue sus dependencias normalmente
+ */
+export function securityMiddleware(options = {}) {
+  const {
+    allowedExtensions = ['.js', '.css', '.html', '.json', '.svg', '.png', '.jpg', '.jpeg', '.gif', '.woff', '.woff2', '.ttf'],
+    blockedPaths = [
+      '/node_modules',
+      '/package.json',
+      '/package-lock.json',
+      '/.env',
+      '/.git'
+    ],
+    allowPublicAssets = true
+  } = options;
+
+  return (req, res, next) => {
+    const requestPath = req.path;
+    
+    // 1. Bloquear acceso a rutas definitivamente sensibles (configuración, dependencias)
+    const isBlockedPath = blockedPaths.some(blocked => 
+      requestPath.startsWith(blocked) || requestPath.includes(blocked)
+    );
+    
+    if (isBlockedPath) {
+      console.warn(`🚫 Blocked access to sensitive path: ${requestPath}`);
+      return res.status(403).json({
+        error: 'Forbidden',
+        message: 'Access to this resource is not allowed',
+        path: requestPath
+      });
+    }
+
+    // 2. Permitir acceso a assets públicos
+    if (allowPublicAssets) {
+      const publicPaths = ['/assets', '/public', '/images', '/styles'];
+      const isPublicAsset = publicPaths.some(publicPath => 
+        requestPath.startsWith(publicPath)
+      );
+      
+      if (isPublicAsset) {
+        return next();
+      }
+    }
+
+    // 3. Validar extensiones de archivo
+    const fileExtension = path.extname(requestPath).toLowerCase();
+    
+    if (fileExtension && !allowedExtensions.includes(fileExtension)) {
+      console.warn(`🚫 Blocked file type: ${requestPath}`);
+      return res.status(403).json({
+        error: 'Forbidden',
+        message: 'File type not allowed',
+        extension: fileExtension
+      });
+    }
+
+    // 4. Prevenir path traversal attacks
+    const normalizedPath = path.normalize(requestPath);
+    if (normalizedPath.includes('..') || normalizedPath.includes('~')) {
+      console.warn(`🚫 Path traversal attempt: ${requestPath}`);
+      return res.status(403).json({
+        error: 'Forbidden',
+        message: 'Invalid path',
+        path: requestPath
+      });
+    }
+
+    // Todo está bien, continuar
+    next();
+  };
+}
+
+/**
+ * Middleware específico para proteger archivos del framework Slice.js
+ * PERMITE acceso cuando viene desde la propia aplicación (Referer válido)
+ * BLOQUEA acceso directo desde navegador o herramientas externas
+ */
+export function sliceFrameworkProtection(options = {}) {
+  const { 
+    port = 3000, 
+    strictMode = false,
+    allowedDomains = [] // Dominios personalizados permitidos
+  } = options;
+  
+  return (req, res, next) => {
+    const requestPath = req.path;
+
+    // Rutas del framework que requieren verificación
+    const frameworkPaths = [
+      '/Slice/Components/Structural',
+      '/Slice/Core',
+      '/Slice/Services'
+    ];
+
+    const isFrameworkFile = frameworkPaths.some(fwPath => 
+      requestPath.startsWith(fwPath)
+    );
+
+    if (!isFrameworkFile) {
+      return next();
+    }
+
+    // Verificar el origen de la petición
+    const referer = req.get('Referer') || req.get('Referrer');
+    const origin = req.get('Origin');
+    const host = req.get('Host');
+    
+    // Construir lista de orígenes válidos dinámicamente
+    const validOrigins = [
+      `http://localhost:${port}`,
+      `http://127.0.0.1:${port}`,
+      `http://0.0.0.0:${port}`,
+      `https://localhost:${port}`,
+      ...allowedDomains // Dominios personalizados del usuario
+    ];
+    
+    // Si hay un Host header, agregarlo automáticamente
+    if (host) {
+      validOrigins.push(`http://${host}`);
+      validOrigins.push(`https://${host}`);
+    }
+
+    // Verificar si la petición viene de un origen válido
+    const hasValidReferer = referer && validOrigins.some(valid => referer.startsWith(valid));
+    const hasValidOrigin = origin && validOrigins.some(valid => origin === valid);
+    const isSameHost = host && referer && referer.includes(host);
+    
+    // Permitir si viene desde la aplicación
+    if (hasValidReferer || hasValidOrigin || isSameHost) {
+      return next();
+    }
+
+    // En modo estricto, bloquear todo acceso sin referer válido
+    if (strictMode) {
+      console.warn(`🚫 Blocked direct framework file access: ${requestPath}`);
+      return res.status(403).json({
+        error: 'Framework Protection',
+        message: 'Direct access to Slice.js framework files is blocked',
+        tip: 'Framework files must be loaded through the application',
+        path: requestPath
+      });
+    }
+
+    // En modo normal (desarrollo), permitir pero advertir
+    console.warn(`⚠️  Framework file accessed without valid referer: ${requestPath}`);
+    next();
+  };
+}
+
+/**
+ * Middleware para logging de peticiones sospechosas
+ */
+export function suspiciousRequestLogger() {
+  const suspiciousPatterns = [
+    /\.\.\//, // Path traversal
+    /~/, // Home directory access
+    /\.env/, // Environment files
+    /\.git/, // Git files
+    /package\.json/, // Package files
+    /package-lock\.json/,
+    /node_modules/, // Dependencies
+  ];
+
+  return (req, res, next) => {
+    const requestPath = req.path;
+    
+    const isSuspicious = suspiciousPatterns.some(pattern => 
+      pattern.test(requestPath)
+    );
+
+    if (isSuspicious) {
+      const clientIp = req.ip || req.connection.remoteAddress;
+      console.warn(`⚠️  Suspicious request: ${requestPath} from ${clientIp}`);
+    }
+
+    next();
+  };
+}
+
+/**
+ * Middleware para bloquear acceso directo vía navegador (typing en la URL)
+ * pero permitir peticiones desde scripts (fetch, import, etc.)
+ */
+export function directAccessProtection(options = {}) {
+  const { protectedPaths = [] } = options;
+  
+  return (req, res, next) => {
+    const requestPath = req.path;
+    
+    const isProtectedPath = protectedPaths.some(protectedPath => 
+      requestPath.startsWith(protectedPath)
+    );
+    
+    if (!isProtectedPath) {
+      return next();
+    }
+
+    // Detectar acceso directo: 
+    // - No tiene Referer (usuario escribió la URL directamente)
+    // - Accept header indica navegación HTML
+    const referer = req.get('Referer');
+    const accept = req.get('Accept') || '';
+    
+    const isDirectBrowserAccess = !referer && accept.includes('text/html');
+    
+    if (isDirectBrowserAccess) {
+      console.warn(`🚫 Blocked direct browser access: ${requestPath}`);
+      return res.status(403).send(`
+        <!DOCTYPE html>
+        <html>
+        <head>
+          <title>Access Denied</title>
+          <style>
+            body { 
+              font-family: system-ui; 
+              max-width: 600px; 
+              margin: 100px auto; 
+              padding: 20px;
+            }
+            h1 { color: #d32f2f; }
+            code { 
+              background: #f5f5f5; 
+              padding: 2px 6px; 
+              border-radius: 3px;
+            }
+          </style>
+        </head>
+        <body>
+          <h1>🚫 Direct Access Denied</h1>
+          <p>This file cannot be accessed directly.</p>
+          <p>Path: <code>${requestPath}</code></p>
+          <p>Framework files are automatically loaded by the application.</p>
+          <p><a href="/">← Return to application</a></p>
+        </body>
+        </html>
+      `);
+    }
+
+    next();
+  };
+}
+
+export default {
+  securityMiddleware,
+  sliceFrameworkProtection,
+  suspiciousRequestLogger,
+  directAccessProtection
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "slicejs-web-framework",
-  "version": "2.2.6",
+  "version": "2.2.8",
   "description": "",
   "engines": {
     "node": ">=20"