secure-bits-axios v1.0.6

secure-bits-axios

secure-bits-axios es una biblioteca diseñada para asegurar tus comunicaciones HTTP/HTTPS en aplicaciones web. Al integrarse directamente con Axios, una de las librerías más populares para manejo de peticiones HTTP en JavaScript, secure-bits-axios proporciona una capa adicional de seguridad, cifrando y descifrando automáticamente los datos de tus solicitudes y respuestas. Ideal para proyectos que requieren un alto nivel de seguridad, como aplicaciones financieras, de salud o cualquier sistema que maneje información sensible.

Características

• Cifrado transparente de solicitudes y respuestas HTTP/HTTPS.
• Fácil integración con proyectos basados en Axios.
• Configuración sencilla para claves y vectores de inicialización.
• Compatible con frameworks modernos de JavaScript como React, Vue, Angular, y otros.

Instalación

Puedes instalar secure-bits-axios usando npm:

npm install secure-bits-axios

O usando yarn:

yarn add secure-bits-axios

Uso

En JavaScript Puro

javascript
import axios from 'axios';
import 'secure-bits-axios';

// Configura tu clave y vector de inicialización aquí
const base64Key = 'tu_base64Key';
const base64Iv = 'tu_base64Iv';
const encryptionConfig = {
    request: {
      dataPath: "data",
    },
    response: {
      dataPath: "data.response", // selecciona el path donde esta encriptado Actualizado para reflejar la ubicación real de los datos encriptados
      tagPath: "data.transaction.tag", // selecciona el path del donde esta el  tag
    }
  };
  ;// recuerda modificar el path adecuado para el request y el response

window.setupGlobalAxios(base64Key, base64Iv, encryptionConfig);

// Uso de axios como de costumbre
axios.get('tu_endpoint')
  .then(response => console.log(response.data))
  .catch(error => console.error('Ocurrió un error:', error));

React

import React, { useEffect } from 'react';
import axios from 'axios';
import 'secure-bits-axios';

const App = () => {
  useEffect(() => {
    // Configura tu clave y vector de inicialización aquí
    const base64Key = 'tu_base64Key';
    const base64Iv = 'tu_base64Iv';
    const encryptionConfig = {
    request: {
      dataPath: "data",
    },
    response: {
      dataPath: "data.response", // selecciona el path donde esta encriptado Actualizado para reflejar la ubicación real de los datos encriptados
      tagPath: "data.transaction.tag", // selecciona el path del donde esta el  tag
    }
  };
  ;// recuerda modificar el path adecuado para el request y el response

    window.setupGlobalAxios(base64Key, base64Iv, encryptionConfig);
  }, []);

  const fetchData = async () => {
    try {
      const response = await axios.get('tu_endpoint');
      console.log(response.data);
    } catch (error) {
      console.error('Ocurrió un error:', error);
    }
  };

  return (
    <div>
      <h1>Secure Axios App</h1>
      <button onClick={fetchData}>Fetch Data</button>
    </div>
  );
};

export default App;

Vue

<template>
  <div>
  <h1>Secure Axios App < /h1>
    < button @click="fetchData" > Fetch Data < /button>
  < /div>
< /template>

      <script>
import axios from 'axios';
import 'secure-bits-axios';

export default {
  name: 'App',
  mounted() {
    // Configura tu clave y vector de inicialización aquí
    const base64Key = 'tu_base64Key';
    const base64Iv = 'tu_base64Iv';
    const encryptionConfig = {
    request: {
      dataPath: "data",
    },
    response: {
      dataPath: "data.response", // selecciona el path donde esta encriptado Actualizado para reflejar la ubicación real de los datos encriptados
      tagPath: "data.transaction.tag", // selecciona el path del donde esta el  tag
    }
  };
  ;// recuerda modificar el path adecuado para el request y el response

    window.setupGlobalAxios(base64Key, base64Iv, encryptionConfig);
  },
  methods: {
    async fetchData() {
      try {
        const response = await axios.get('tu_endpoint');
        console.log(response.data);
      } catch (error) {
        console.error('Ocurrió un error:', error);
      }
    },
  },
};
</script>

Uso en Microfrontends

secure-bits-axios es perfecto para arquitecturas de microfrontends, permitiendo que la configuración de seguridad de las comunicaciones HTTP/HTTPS se centralice en el nivel principal del contenedor de microfrontends. Una vez configurado en el contenedor principal, window.globalAxios estará disponible globalmente y se encargará de todas las solicitudes y respuestas HTTP, asegurando la encriptación y desencriptación de forma transparente y sin necesidad de configuración adicional en cada microfrontend.

En el Contenedor Principal:

Configura secure-bits-axios en el nivel más alto de tu aplicación para que esté disponible en todos los microfrontends:

// main.js del contenedor principal
import axios from 'axios';
import 'secure-bits-axios';

// Configura tu clave y vector de inicialización aquí
const base64Key = 'tu_base64Key';
const base64Iv = 'tu_base64Iv';
const encryptionConfig = {
    request: {
      dataPath: "data",
    },
    response: {
      dataPath: "data.response", // selecciona el path donde esta encriptado Actualizado para reflejar la ubicación real de los datos encriptados
      tagPath: "data.transaction.tag", // selecciona el path del donde esta el  tag
    }
  };
  // recuerda modificar el path adecuado para el request y el response

window.setupGlobalAxios(base64Key, base64Iv, encryptionConfig);

Después de ejecutar setupGlobalAxios, window.globalAxios estará configurado y listo para ser usado en todos los microfrontends.

En los Microfrontends:

Dentro de tus microfrontends, utiliza window.globalAxios para realizar solicitudes HTTP/HTTPS. La configuración de cifrado/descifrado se aplicará automáticamente:

// Un archivo dentro de un microfrontend
// No es necesario importar axios aquí, usa window.globalAxios directamente

const fetchData = async () => {
  try {
    const dataToSend = {
      // tu data aquí
    };
    const response = await window.globalAxios.post('/tu_endpoint', dataToSend);
    console.log(response.data);
  } catch (error) {
    console.error('Ocurrió un error:', error);
  }
};

fetchData();