· 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.

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.

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:
- A szerver generálja a tokent: A backend időkorlátos, aláírt tokent hoz létre az API kulcs segítségével
- A kliens megkapja a tokent: A token biztonságosan eljut a frontend alkalmazáshoz
- 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
- 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.
