· Nacho Coll · Guides  · 15 分で読了

IPFS アップロードトークン：API キーを公開せずに安全なクライアントサイドアップロードを実現

署名付きアップロードトークンにより、API キーを公開することなくブラウザやモバイルアプリから安全に IPFS にアップロードする方法を学びましょう。

署名付きアップロードトークンにより、API キーを公開することなくブラウザやモバイルアプリから安全に IPFS にアップロードする方法を学びましょう。

モダンな Web アプリケーションの構築では、ユーザーのブラウザからクラウドストレージに直接ファイルをアップロードする必要がよくあります。しかし、IPFS アップロードのセキュリティに関して、開発者は困難なジレンマに直面します：大切な API キーを公開せずに、クライアントサイドのアップロードをどのように許可するか？

ほとんどの IPFS ピンニングサービスは、不快な選択を強います：すべてのアップロードをサーバーサイドで処理する（ボトルネックと複雑さを生む）か、クライアントコードに API キーを埋め込む（セキュリティ上の悪夢）かです。IPFS.NINJA は、他のピンニングサービスにはないユニークな機能でこの問題を解決します：署名付きアップロードトークン。

IPFS Ninja

従来の IPFS API キーの問題

IPFS へのアップロードが必要なクライアントサイドアプリケーションを構築する際、開発者は通常いくつかのセキュリティ上の課題に直面します：

API キー漏洩リスク

ブラウザの JavaScript に API キーを直接埋め込むと、誰でもソースコードを表示して認証情報を抽出できます。これにより以下のリスクが生じます：

  • 不正なアップロードによるストレージクォータの消費
  • ピンニングサービスアカウントの潜在的な悪用
  • エンタープライズ環境でのセキュリティコンプライアンス違反

サーバーサイドのボトルネック

代替手段であるバックエンドを経由したすべてのアップロードのルーティングには、いくつかの問題があります：

  • サーバー帯域幅コストの増加
  • ユーザーの高遅延
  • より複雑なインフラストラクチャ要件
  • 潜在的な単一障害点

モバイルアプリのセキュリティ

モバイルアプリケーションも同様の課題に直面しており、アプリバンドルに保存された 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
  };
}

まとめ

署名付きアップロードトークンは、分散型アプリケーション開発における重要なセキュリティ課題を解決します。API キーを公開せずにクライアントから IPFS への直接アップロードを安全に実現する方法を提供することで、モダンな Web アプリケーションの新しいアーキテクチャの可能性を開きます。

コンテンツ管理システム、NFT マーケットプレイス、またはセキュアなファイルアップロードが必要なあらゆるアプリケーションを構築する場合でも、IPFS.NINJA のアップロードトークンは必要なセキュリティと柔軟性を提供します。実装は簡単で、セキュリティ上の利点は大きく、パフォーマンスの向上も顕著です。

IPFS の基礎についてさらに学ぶには、IPFS ピンニングとはのガイドをご覧いただくか、完全な API チュートリアルをご覧ください。さまざまなオプションを評価中の開発者には、最高の IPFS ピンニングサービス比較が包括的な洞察を提供します。

アプリケーションに安全なクライアントサイド IPFS アップロードを実装する準備はできましたか？モダンなセキュリティプラクティスと分散型ストレージの組み合わせにより、セキュリティ基準を維持しながらスケーリングが必要な本番アプリケーションに理想的なアプローチとなります。

ピンニングを始める準備はできましたか？ 無料アカウントを作成 — 500 ファイル、1 GB ストレージ、専用ゲートウェイ。クレジットカードは不要です。

Share:
ブログに戻る

関連記事

すべての記事を見る »