· Nacho Coll · Guides  · 10 perc olvasás

IPFS feltöltési tokenek: biztonságos kliensoldali feltöltések API kulcsok felfedése nélkül

Ismerje meg, hogyan teszik lehetővé az aláírt feltöltési tokenek az IPFS-re való biztonságos feltöltést böngészőkből és mobilalkalmazásokból az API kulcs felfedése nélkül.

Ismerje meg, hogyan teszik lehetővé az aláírt feltöltési tokenek az IPFS-re való biztonságos feltöltést böngészőkből és mobilalkalmazásokból az API kulcs felfedése nélkül.

A modern webalkalmazások fejlesztése gyakran megköveteli a fájlok közvetlen feltöltését a felhasználók böngészőiből a felhőtárolóba. Azonban az IPFS feltöltési biztonság terén a fejlesztők nehéz dilemmával szembesülnek: hogyan lehet lehetővé tenni a kliensoldali feltöltéseket az értékes API kulcsok potenciális visszaélésnek való kitétele nélkül?

A legtöbb IPFS pinning szolgáltatás kellemetlen választás elé állít: vagy az összes feltöltést szerver oldalon kezeled (szűk keresztmetszeteket és bonyolultságot teremtve), vagy az API kulcsot beágyazod a kliens kódba (biztonsági rémálom). Az IPFS.NINJA ezt egy egyedülálló funkcióval oldja meg, amelyet egyetlen másik pinning szolgáltatás sem kínál: aláírt feltöltési tokenek.

IPFS Ninja

A probléma a hagyományos IPFS API kulcsokkal

A kliensoldali alkalmazások fejlesztésekor, amelyeknek IPFS-re kell feltölteniük, a fejlesztők jellemzően több biztonsági kihívással szembesülnek:

API kulcs felfedésének kockázata

Az API kulcsok közvetlen beágyazása a böngésző JavaScriptjébe azt jelenti, hogy bárki megtekintheti a forráskódot és kinyerheti a hitelesítő adatokat. Ez a következőkhöz vezethet:

  • Jogosulatlan feltöltések, amelyek felhasználják a tárolási kvótát
  • A pinning szolgáltatási fiók potenciális visszaélése
  • Biztonsági megfelelőségi megsértések vállalati környezetben

Szerveroldali szűk keresztmetszetek

Az alternatíva — az összes feltöltés átirányítása a backendon — több problémát okoz:

  • Megnövekedett szerver sávszélesség költségek
  • Magasabb késleltetés a felhasználók számára
  • Összetettebb infrastrukturális követelmények
  • Potenciális egypontos meghibásodások

Mobilalkalmazás-biztonság

A mobilalkalmazások hasonló kihívásokkal szembesülnek — az alkalmazáscsomagokban tárolt API kulcsok visszafejtéssel kinyerhetők.

Bemutatjuk az IPFS feltöltési tokeneket

Az IPFS.NINJA aláírt feltöltési tokenjei biztonságos középutat kínálnak. Így működnek:

  1. A szerver generálja a tokent: A backend időkorlátos, aláírt tokent hoz létre az API kulcs segítségével
  2. A kliens megkapja a tokent: A token biztonságosan eljut a frontend alkalmazáshoz
  3. Közvetlen feltöltés: A kliensek közvetlenül az IPFS.NINJA-ra töltenek fel az aláírt token segítségével
  4. Automatikus lejárat: A tokenek meghatározott idő után lejárnak, korlátozva a kitettségi ablakot

Ez a megközelítés ötvözi a szerveroldali hitelesítés biztonságát a közvetlen kliensoldali feltöltések teljesítménybeli előnyeivel.

A feltöltési tokenek biztonságának megértése

Az aláírt feltöltési tokenek kriptográfiai aláírásokat használnak a hitelesség biztosítására a fő API kulcs felfedése nélkül. Minden token tartalmazza:

  • Lejárati időbélyeg: Automatikus érvénytelenítés meghatározott idő után
  • Használati korlátozások: Opcionális fájlszám- vagy összméret-korlátok
  • Kriptográfiai aláírás: Megakadályozza a manipulációt vagy hamisítást
  • Kibocsátó ellenőrzése: Visszakapcsolás a hitelesített fiókhoz

Az API kulcsokkal ellentétben a feltöltési tokenek úgy vannak tervezve, hogy biztonságosan beágyazhatók legyenek a kliensoldali kódba. Még ha ki is nyerik őket, korlátozott hozzáférést biztosítanak, amely automatikusan lejár.

Backend implementáció: Express.js példa

Építsünk egy teljes példát, amely bemutatja a biztonságos kliensoldali IPFS feltöltések megvalósítását. Először az Express.js backend, amely feltöltési tokeneket generál:

// server.js
const express = require('express');
const cors = require('cors');
const app = express();

app.use(express.json());
app.use(cors());

// Your IPFS.NINJA API key (keep this secure on server-side only)
const IPFS_API_KEY = 'bws_1234567890abcdef1234567890abcdef12345678';

// Generate a signed upload token
app.post('/api/generate-upload-token', async (req, res) => {
  try {
    const response = await fetch('https://api.ipfs.ninja/upload-tokens', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
        'X-Api-Key': IPFS_API_KEY
      },
      body: JSON.stringify({
        expiresIn: '1h', // Token valid for 1 hour
        maxUploads: 10,  // Optional: limit number of uploads
        maxSizeMB: 50    // Optional: limit total upload size
      })
    });

    if (!response.ok) {
      throw new Error(`HTTP error! status: ${response.status}`);
    }

    const tokenData = await response.json();
    
    res.json({
      success: true,
      uploadToken: tokenData.token,
      expiresAt: tokenData.expiresAt
    });
  } catch (error) {
    console.error('Token generation failed:', error);
    res.status(500).json({
      success: false,
      error: 'Failed to generate upload token'
    });
  }
});

// Optional: Endpoint to verify uploads completed successfully
app.post('/api/verify-upload', async (req, res) => {
  const { cid } = req.body;
  
  try {
    // Verify the file was pinned successfully
    const response = await fetch(`https://api.ipfs.ninja/pins/${cid}`, {
      headers: {
        'X-Api-Key': IPFS_API_KEY
      }
    });

    const pinData = await response.json();
    
    res.json({
      success: true,
      verified: pinData.pinned,
      metadata: pinData
    });
  } catch (error) {
    res.status(500).json({
      success: false,
      error: 'Verification failed'
    });
  }
});

app.listen(3000, () => {
  console.log('Server running on port 3000');
});

Frontend implementáció: biztonságos kliensoldali feltöltés

Most a frontend kód, amely biztonságosan tölti fel a fájlokat az aláírt token segítségével:

<!DOCTYPE html>
<html>
<head>
    <title>Secure IPFS Upload Demo</title>
    <style>
        body { font-family: Arial, sans-serif; max-width: 600px; margin: 50px auto; padding: 20px; }
        .upload-area { border: 2px dashed #ccc; padding: 20px; text-align: center; margin: 20px 0; }
        .upload-area.dragover { border-color: #007cba; background: #f0f8ff; }
        button { background: #007cba; color: white; border: none; padding: 10px 20px; cursor: pointer; }
        .status { margin: 10px 0; padding: 10px; border-radius: 4px; }
        .success { background: #d4edda; color: #155724; }
        .error { background: #f8d7da; color: #721c24; }
        .info { background: #d1ecf1; color: #0c5460; }
    </style>
</head>
<body>
    <h1>Secure IPFS Upload with Signed Tokens</h1>
    
    <div class="upload-area" id="uploadArea">
        <p>Drag & drop files here or click to select</p>
        <input type="file" id="fileInput" multiple style="display: none;">
        <button onclick="document.getElementById('fileInput').click()">Select Files</button>
    </div>

    <div id="status"></div>
    <div id="results"></div>

    <script>
        class SecureIPFSUploader {
            constructor() {
                this.uploadToken = null;
                this.tokenExpiry = null;
                this.setupEventListeners();
            }

            setupEventListeners() {
                const uploadArea = document.getElementById('uploadArea');
                const fileInput = document.getElementById('fileInput');

                uploadArea.addEventListener('dragover', (e) => {
                    e.preventDefault();
                    uploadArea.classList.add('dragover');
                });

                uploadArea.addEventListener('dragleave', () => {
                    uploadArea.classList.remove('dragover');
                });

                uploadArea.addEventListener('drop', (e) => {
                    e.preventDefault();
                    uploadArea.classList.remove('dragover');
                    this.handleFiles(Array.from(e.dataTransfer.files));
                });

                fileInput.addEventListener('change', (e) => {
                    this.handleFiles(Array.from(e.target.files));
                });
            }

            async getUploadToken() {
                if (this.uploadToken && this.tokenExpiry && new Date() < new Date(this.tokenExpiry)) {
                    return this.uploadToken;
                }

                try {
                    this.showStatus('Generating secure upload token...', 'info');
                    
                    const response = await fetch('/api/generate-upload-token', {
                        method: 'POST',
                        headers: { 'Content-Type': 'application/json' }
                    });

                    if (!response.ok) {
                        throw new Error(`Failed to generate token: ${response.statusText}`);
                    }

                    const data = await response.json();
                    if (!data.success) {
                        throw new Error(data.error || 'Token generation failed');
                    }

                    this.uploadToken = data.uploadToken;
                    this.tokenExpiry = data.expiresAt;
                    return this.uploadToken;
                } catch (error) {
                    this.showStatus(`Token generation failed: ${error.message}`, 'error');
                    throw error;
                }
            }

            async uploadFile(file) {
                try {
                    const token = await this.getUploadToken();
                    const fileBase64 = await this.fileToBase64(file);
                    
                    this.showStatus(`Uploading ${file.name} to IPFS...`, 'info');

                    const response = await fetch('https://api.ipfs.ninja/upload/new', {
                        method: 'POST',
                        headers: {
                            'Content-Type': 'application/json',
                            'Authorization': `Signed ${token}`
                        },
                        body: JSON.stringify({
                            content: fileBase64,
                            description: `File uploaded via secure token: ${file.name}`,
                            metadata: {
                                filename: file.name,
                                fileType: file.type,
                                uploadedAt: new Date().toISOString(),
                                uploadMethod: 'signed-token'
                            }
                        })
                    });

                    if (!response.ok) {
                        const errorText = await response.text();
                        throw new Error(`Upload failed: ${response.status} ${errorText}`);
                    }

                    const result = await response.json();
                    return {
                        success: true, filename: file.name, cid: result.cid,
                        size: result.sizeMB, ipfsUri: result.uris.ipfs, httpUrl: result.uris.url
                    };
                } catch (error) {
                    return { success: false, filename: file.name, error: error.message };
                }
            }

            async handleFiles(files) {
                if (files.length === 0) return;
                this.clearResults();
                try {
                    const uploadPromises = files.map(file => this.uploadFile(file));
                    const results = await Promise.all(uploadPromises);
                    this.displayResults(results);
                    const successful = results.filter(r => r.success).length;
                    const total = results.length;
                    if (successful === total) {
                        this.showStatus(`✅ Successfully uploaded ${successful} file(s) to IPFS!`, 'success');
                    } else {
                        this.showStatus(`⚠️ Uploaded ${successful}/${total} files. Check results below.`, 'error');
                    }
                } catch (error) {
                    this.showStatus(`Upload failed: ${error.message}`, 'error');
                }
            }

            fileToBase64(file) {
                return new Promise((resolve, reject) => {
                    const reader = new FileReader();
                    reader.readAsDataURL(file);
                    reader.onload = () => {
                        const base64 = reader.result.split(',')[1];
                        resolve(base64);
                    };
                    reader.onerror = error => reject(error);
                });
            }

            showStatus(message, type) {
                const statusDiv = document.getElementById('status');
                statusDiv.className = `status ${type}`;
                statusDiv.textContent = message;
            }

            displayResults(results) {
                const resultsDiv = document.getElementById('results');
                resultsDiv.innerHTML = '<h3>Upload Results:</h3>' + 
                    results.map(result => `
                        <div class="status ${result.success ? 'success' : 'error'}" style="margin: 10px 0;">
                            <strong>${result.filename}</strong><br>
                            ${result.success ? 
                                `✅ CID: ${result.cid}<br>
                                 📊 Size: ${result.size} MB<br>
                                 🔗 URL: <a href="${result.httpUrl}" target="_blank">${result.httpUrl}</a>` :
                                `❌ Error: ${result.error}`
                            }
                        </div>
                    `).join('');
            }

            clearResults() {
                document.getElementById('results').innerHTML = '';
            }
        }

        const uploader = new SecureIPFSUploader();
    </script>
</body>
</html>

Haladó biztonsági megfontolások

Az IPFS feltöltési biztonság aláírt tokenekkel történő megvalósításakor vegye figyelembe ezeket a további biztonsági intézkedéseket:

Token hatókör korlátozások

Konfigurálja a tokeneket megfelelő korlátozásokkal:

// Generate token with specific constraints
const restrictedToken = await fetch('https://api.ipfs.ninja/upload-tokens', {
  method: 'POST',
  headers: {
    'X-Api-Key': IPFS_API_KEY
  },
  body: JSON.stringify({
    expiresIn: '30m',        // Short expiration
    maxUploads: 5,           // Limited upload count
    maxSizeMB: 10,          // Size restriction
    allowedMimeTypes: ['image/jpeg', 'image/png'], // File type restrictions
    ipWhitelist: ['192.168.1.0/24'] // IP-based access control
  })
});

Tartalom validáció

Mindig validálja a feltöltött tartalmat a backenden:

app.post('/api/validate-upload', async (req, res) => {
  const { cid } = req.body;
  
  try {
    const response = await fetch(`https://ipfs.ninja/ipfs/${cid}`);
    const contentType = response.headers.get('content-type');
    
    if (!isValidContentType(contentType)) {
      await deleteFromIPFS(cid);
      return res.status(400).json({ error: 'Invalid content type' });
    }
    
    res.json({ success: true, validated: true });
  } catch (error) {
    res.status(500).json({ error: 'Validation failed' });
  }
});

Kérésszám korlátozás

Valósítson meg további kérésszám korlátozást a token generáló végponton:

const rateLimit = require('express-rate-limit');

const tokenLimiter = rateLimit({
  windowMs: 15 * 60 * 1000, // 15 minutes
  max: 10, // Limit each IP to 10 token requests per windowMs
  message: 'Too many token requests, please try again later'
});

app.use('/api/generate-upload-token', tokenLimiter);

Előnyök a hagyományos megközelítésekkel szemben

Az aláírt feltöltési tokenek számos előnyt kínálnak az alternatív IPFS feltöltési biztonsági módszerekkel szemben:

Szerveroldali proxy-val szemben

  • Teljesítmény: A közvetlen feltöltések megszüntetik a szerver sávszélesség használatát
  • Skálázhatóság: Nincs szerver szűk keresztmetszet intenzív feltöltési időszakokban
  • Költség: Csökkentett sávszélesség és feldolgozási költségek
  • Felhasználói élmény: Jobb feltöltési sebességek és haladáskövetés

Kliensoldali API kulcsokkal szemben

  • Biztonság: Nincs API kulcs kinyerési vagy visszaélési kockázat
  • Megfelelőség: Megfelel a biztonsági audit követelményeknek
  • Hozzáférés-vezérlés: Részletes jogosultságok és automatikus lejárat
  • Monitorozás: Jobb feltöltési források és minták nyomon követése

Más pinning szolgáltatásokkal szemben

Az IPFS.NINJA jelenleg az egyetlen nagy pinning szolgáltatás, amely aláírt feltöltési tokeneket kínál. A versenytársak, mint a Pinata, szerveroldali proxy-t vagy kliensoldali API kulcs felfedést igényelnek, ami ezt a funkciót egyedi megkülönböztető tényezővé teszi.

További részletekért az IPFS.NINJA és más szolgáltatások összehasonlításáról tekintse meg átfogó összehasonlító útmutatónkat.

Éles üzembe helyezési tippek

Aláírt feltöltési tokenek éles környezetben történő telepítésekor:

Környezeti konfiguráció

Tárolja biztonságosan az érzékeny konfigurációt:

// Use environment variables for production
const config = {
  ipfsApiKey: process.env.IPFS_API_KEY,
  tokenExpiry: process.env.UPLOAD_TOKEN_EXPIRY || '1h',
  maxFileSize: process.env.MAX_FILE_SIZE_MB || 50,
  allowedOrigins: process.env.ALLOWED_ORIGINS?.split(',') || ['localhost:3000']
};

Monitorozás és naplózás

Valósítson meg átfogó naplózást a biztonsági monitorozáshoz:

const winston = require('winston');

const logger = winston.createLogger({
  level: 'info',
  format: winston.format.json(),
  transports: [
    new winston.transports.File({ filename: 'upload-security.log' })
  ]
});

logger.info('Upload token generated', {
  userId: req.user.id,
  clientIP: req.ip,
  userAgent: req.get('User-Agent'),
  expiresAt: tokenData.expiresAt
});

Hibakezelés

Valósítson meg robusztus hibakezelést, amely nem fed fel érzékeny információkat:

app.use((error, req, res, next) => {
  logger.error('Upload token error', {
    error: error.message,
    stack: error.stack,
    userId: req.user?.id,
    endpoint: req.path
  });
  
  res.status(500).json({
    success: false,
    error: 'An internal error occurred. Please try again.'
  });
});

Integráció népszerű keretrendszerekkel

Az aláírt feltöltési tokenek zökkenőmentesen működnek a modern webes keretrendszerekkel. Íme gyors integrációs példák:

React Hook

import { useState, useCallback } from 'react';

export function useSecureIPFSUpload() {
  const [uploading, setUploading] = useState(false);
  const [uploadToken, setUploadToken] = useState(null);

  const getToken = useCallback(async () => {
    if (uploadToken?.expiresAt && new Date() < new Date(uploadToken.expiresAt)) {
      return uploadToken.token;
    }

    const response = await fetch('/api/generate-upload-token', {
      method: 'POST'
    });
    const data = await response.json();
    setUploadToken(data);
    return data.uploadToken;
  }, [uploadToken]);

  const uploadFile = useCallback(async (file) => {
    setUploading(true);
    try {
      const token = await getToken();
      // Upload logic here...
    } finally {
      setUploading(false);
    }
  }, [getToken]);

  return { uploadFile, uploading };
}

Vue.js Composable

import { ref } from 'vue';

export function useSecureUpload() {
  const uploading = ref(false);
  const uploadProgress = ref(0);

  const uploadFile = async (file) => {
    uploading.value = true;
    // Implementation here...
  };

  return {
    uploading: readonly(uploading),
    uploadProgress: readonly(uploadProgress),
    uploadFile
  };
}

Összefoglalás

Az aláírt feltöltési tokenek kritikus biztonsági kihívást oldanak meg a decentralizált alkalmazásfejlesztésben. Biztonságos módot biztosítanak a közvetlen kliensoldali IPFS feltöltések engedélyezésére API kulcsok felfedése nélkül, új architektúrális lehetőségeket nyitva a modern webalkalmazások számára.

Akár tartalomkezelő rendszert, NFT piacteret vagy bármilyen biztonságos fájlfeltöltést igénylő alkalmazást épít, az IPFS.NINJA feltöltési tokenek biztosítják a szükséges biztonságot és rugalmasságot. A megvalósítás egyszerű, a biztonsági előnyök jelentősek, a teljesítménybeli nyereségek pedig lényegesek.

Ha többet szeretne megtudni az IPFS alapjairól, tekintse meg útmutatónkat Mi az IPFS pinning címmel, vagy fedezze fel teljes API útmutatónkat. A különböző lehetőségeket értékelő fejlesztők számára a legjobb IPFS pinning szolgáltatások összehasonlítása átfogó betekintést nyújt.

Készen áll a biztonságos kliensoldali IPFS feltöltések megvalósítására az alkalmazásában? A modern biztonsági gyakorlatok és a decentralizált tárolás kombinációja ideálissá teszi ezt a megközelítést éles alkalmazások számára, amelyeknek skálázódniuk kell a biztonsági szabványok fenntartása mellett.

Készen áll a pinning megkezdésére? Hozzon létre ingyenes fiókot — 500 fájl, 1 GB tárhely, dedikált átjáró. Bankkártya nem szükséges.

Vissza a Blogra