· Nacho Coll · Guides  · 15 分鐘閱讀

IPFS 上傳令牌：無需暴露 API 金鑰即可安全進行客戶端上傳

了解簽名上傳令牌如何讓您從瀏覽器和行動應用程式安全上傳到 IPFS，而無需暴露您的 API 金鑰。

了解簽名上傳令牌如何讓您從瀏覽器和行動應用程式安全上傳到 IPFS，而無需暴露您的 API 金鑰。

建構現代 Web 應用程式時，通常需要直接從使用者的瀏覽器上傳檔案到雲端儲存。然而，當涉及 IPFS 上傳安全時，開發者面臨一個棘手的難題：如何在不暴露珍貴 API 金鑰的情況下允許客戶端上傳？

大多數 IPFS 釘選服務迫使您做出不舒服的選擇：要麼在伺服器端處理所有上傳（造成瓶頸和複雜性），要麼在客戶端程式碼中嵌入 API 金鑰（這是一場安全噩夢）。IPFS.NINJA 透過一個其他釘選服務都沒有的獨特功能解決了這個問題：簽名上傳令牌。

IPFS Ninja

傳統 IPFS API 金鑰的問題

當建構需要上傳到 IPFS 的客戶端應用程式時，開發者通常會遇到幾個安全挑戰：

API 金鑰暴露風險

將 API 金鑰直接嵌入瀏覽器 JavaScript 意味著任何人都可以檢視您的原始碼並提取您的憑證。這可能導致：

  • 未經授權的上傳消耗您的儲存配額
  • 您的釘選服務帳戶可能被濫用
  • 在企業環境中違反安全合規要求

伺服器端瓶頸

另一種方案——透過後端路由所有上傳——會產生幾個問題：

  • 伺服器頻寬成本增加
  • 使用者延遲更高
  • 基礎設施需求更複雜
  • 潛在的單點故障

行動應用程式安全

行動應用程式面臨類似的挑戰，儲存在應用程式套件中的 API 金鑰可以透過逆向工程被提取。

IPFS 上傳令牌介紹

IPFS.NINJA 的簽名上傳令牌提供了安全的折衷方案。以下是其運作原理：

  1. 伺服器產生令牌：您的後端使用 API 金鑰建立一個限時簽名令牌
  2. 客戶端接收令牌：令牌安全地傳輸到您的前端應用程式
  3. 直接上傳：客戶端使用簽名令牌直接上傳到 IPFS.NINJA
  4. 自動過期：令牌在設定的時間後過期，限制暴露視窗

這種方法將伺服器端身份驗證的安全性與直接客戶端上傳的效能優勢相結合。

理解上傳令牌安全性

簽名上傳令牌使用加密簽名來確保真實性，而無需暴露您的主 API 金鑰。每個令牌包含：

  • 過期時間戳記：在指定時間後自動失效
  • 使用限制：可選的檔案數量或總大小限制
  • 加密簽名：防止竄改或偽造
  • 發行者驗證：連結回您的已認證帳戶

與 API 金鑰不同，上傳令牌被設計為可以安全地嵌入客戶端程式碼中。即使被提取，它們提供的存取權限也是有限的，並且會自動過期。

後端實作：Express.js 範例

讓我們建構一個完整的範例，展示如何實作安全的客戶端 IPFS 上傳。首先，這是產生上傳令牌的 Express.js 後端：

// 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');
});

前端實作：安全的客戶端上傳

現在，這是使用簽名令牌安全上傳檔案的前端程式碼：

<!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');

                // Drag and drop handlers
                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));
                });

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

            async getUploadToken() {
                // Check if we have a valid token
                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();
                    
                    // Convert file to base64 for JSON transport
                    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 {
                    // Upload files concurrently
                    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 = () => {
                        // Remove the data:mime/type;base64, prefix
                        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 = '';
            }
        }

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

進階安全注意事項

在使用簽名令牌實作 IPFS 上傳安全時，請考慮以下額外的安全措施：

令牌範圍限制

使用適當的限制設定令牌：

// 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
  })
});

內容驗證

始終在後端驗證上傳的內容：

app.post('/api/validate-upload', async (req, res) => {
  const { cid } = req.body;
  
  try {
    // Fetch and validate the uploaded content
    const response = await fetch(`https://ipfs.ninja/ipfs/${cid}`);
    const contentType = response.headers.get('content-type');
    
    // Implement your validation logic
    if (!isValidContentType(contentType)) {
      // Remove invalid content
      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' });
  }
});

速率限制

在令牌產生端點上實施額外的速率限制：

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);

相比傳統方法的優勢

簽名上傳令牌相比其他 IPFS 上傳安全方法具有多項優勢：

與伺服器端代理相比

  • 效能：直接上傳消除了伺服器頻寬佔用
  • 可擴展性：高上傳量期間無伺服器瓶頸
  • 成本：減少頻寬和處理成本
  • 使用者體驗：更快的上傳速度和進度追蹤

與客戶端 API 金鑰相比

  • 安全性：無 API 金鑰被提取或濫用的風險
  • 合規性：滿足安全稽核要求
  • 存取控制：細粒度權限和自動過期
  • 監控：更好地追蹤上傳來源和模式

與其他釘選服務相比

IPFS.NINJA 目前是唯一提供簽名上傳令牌的主要釘選服務。像 Pinata 這樣的競爭對手需要伺服器端代理或客戶端 API 金鑰暴露，這使得此功能成為獨特的差異化優勢。

有關 IPFS.NINJA 與其他服務的比較詳情，請查看我們的全面比較指南。

正式環境部署提示

在正式環境中部署簽名上傳令牌時：

環境設定

安全地儲存敏感設定：

// 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']
};

監控和日誌記錄

實施全面的日誌記錄以進行安全監控：

const winston = require('winston');

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

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

錯誤處理

實施健壯的錯誤處理，不洩露敏感資訊：

app.use((error, req, res, next) => {
  // Log full error details server-side
  logger.error('Upload token error', {
    error: error.message,
    stack: error.stack,
    userId: req.user?.id,
    endpoint: req.path
  });
  
  // Send safe error message to client
  res.status(500).json({
    success: false,
    error: 'An internal error occurred. Please try again.'
  });
});

與熱門框架整合

簽名上傳令牌可以與現代 Web 框架無縫整合。以下是快速整合範例：

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
  };
}

結論

簽名上傳令牌解決了去中心化應用程式開發中的一個關鍵安全挑戰。透過提供一種安全的方式來實現直接客戶端到 IPFS 的上傳，而無需暴露 API 金鑰，它們為現代 Web 應用程式開闢了新的架構可能性。

無論您是在建構內容管理系統、NFT 市場，還是任何需要安全檔案上傳的應用程式，IPFS.NINJA 的上傳令牌都能提供您所需的安全性和靈活性。實作過程簡單直接，安全收益顯著，效能提升明顯。

要了解更多關於 IPFS 基礎知識，請查看我們的什麼是 IPFS 釘選指南，或瀏覽我們的完整 API 教學。對於正在評估不同選項的開發者，我們的最佳 IPFS 釘選服務比較提供了全面的洞察。

準備好在您的應用程式中實作安全的客戶端 IPFS 上傳了嗎？現代安全實務與去中心化儲存的結合使這種方法成為需要在維持安全標準的同時進行擴展的正式應用程式的理想選擇。

準備好開始釘選了嗎？ 建立免費帳戶 — 500 個檔案，1 GB 儲存，專用閘道。無需信用卡。

Share:
返回部落格

相關文章

查看所有文章 »