3.2 KiB
3.2 KiB
Secure Browser-Hosted Website Architecture
This document outlines the architecture for a secure website hosted entirely within the user's browser, with all content and metadata retrieved from IPFS.
Core Principles
- Decentralization: All website assets (metadata, markdown pages, images) are stored on IPFS, removing the need for a centralized web server for content delivery.
- Browser-Based Execution: The website logic runs directly in the user's browser using standard web technologies (HTML, CSS, JavaScript).
- IPFS Client: A client-side IPFS library is used to fetch content based on content identifiers (CIDs/hashes).
- Metadata-Driven: The website structure, navigation, and content references are defined by a set of JSON metadata files.
- Security: The architecture prioritizes security by leveraging the immutability and content-addressing properties of IPFS.
Components
- Browser Environment: The user's web browser, responsible for executing the website's code and rendering the content.
- Website Code: HTML, CSS, and JavaScript files that constitute the website's front-end logic. These files are initially loaded into the browser (potentially also from IPFS, though the initial load mechanism is outside the scope of this document).
- IPFS Client Library: A JavaScript library running in the browser that interacts with the IPFS network to fetch data.
- Metadata Files: JSON files stored on IPFS that define:
- Header structure
- Footer structure
- Navbar structure
- List of all available pages, including their IPFS hashes.
- Content Files: Markdown files and image files stored on IPFS, organized into collections.
Workflow
- The user's browser loads the initial website code.
- The website code uses the IPFS client library to fetch the main metadata file (which itself could be referenced by a known IPFS hash or other mechanism).
- The main metadata file contains references (IPFS hashes) to the header, footer, navbar, and pages list metadata files.
- The website code fetches these individual metadata files using the IPFS client.
- Based on the navbar metadata and pages list, the website renders the navigation.
- When a user navigates to a specific page:
- The website code identifies the corresponding entry in the pages list metadata.
- It retrieves the markdown content for the page from IPFS using the associated hash.
- It parses and renders the markdown content.
- Any referenced images within the markdown (which are part of the same collection) are also fetched from IPFS using their respective hashes.
Advantages
- Security: Content immutability on IPFS prevents tampering after publication.
- Resilience: Content can be served from any IPFS node that has it, reducing reliance on a single server.
- Efficiency: Content addressing means fetching is based on content itself, not location.
Considerations
- Initial loading mechanism of the website code.
- Handling of IPFS network connectivity and potential errors.
- Caching strategies for metadata and content.
- Search and indexing of content (requires external services or pre-computation).