Mise à jour importante concernant la manière d’utiliser les liens de téléchargement de fichiers générés

Chers utilisateurs de Tripo,

Nous vous écrivons pour vous informer d’un changement à venir qui pourrait affecter la façon dont vous accédez aux ressources de notre plateforme et les utilisez.

Qu’est-ce qui change ?

Nous allons appliquer la politique CORS à toutes les URL d’artefacts générés. Cela signifie que toutes les ressources hébergées sur notre plateforme nécessiteront une gestion appropriée des requêtes cross-origin ; en d’autres termes, vous ne pouvez pas servir directement les fichiers de modèles générés en utilisant le lien que l’API de Tripo vous renvoie.

Pourquoi cette mesure est-elle mise en place ?

Ce changement s’inscrit dans notre engagement à améliorer la sécurité et à empêcher les accès non autorisés aux ressources entre différentes origines. CORS (Cross-Origin Resource Sharing) est un mécanisme qui permet aux serveurs de spécifier quels domaines externes peuvent accéder aux ressources.
Pour plus d’informations sur ce qu’est CORS, vous pouvez consulter le guide de MDN.

Impact sur votre workflow

Actuellement, nous ne fournissons pas d’en-têtes CORS pour les URL d’artefacts. Par conséquent, si vous utilisez ces ressources ou créez des liens vers elles directement dans un navigateur ou depuis des domaines externes, vous pourriez rencontrer des problèmes.
Pour garantir un accès continu à ces ressources, vous devrez effectuer l’une des actions suivantes :

1. Télécharger et réenregistrer les artefacts localement : Vous pouvez télécharger les artefacts et les stocker sur votre backend. Une fois enregistrées localement, vous pourrez servir ces ressources depuis votre serveur sans restrictions CORS.
2. Utiliser un Edge Proxy (par ex., Next.js API Route, Cloudflare Workers) : Vous pouvez utiliser un edge proxy pour récupérer et servir les artefacts tout en ajoutant les en-têtes CORS nécessaires aux réponses. Par exemple :
   • Next.js API Route : Configurez une route API pour récupérer les ressources depuis notre plateforme et les transférer avec les en-têtes CORS appropriés.
   • Cloudflare Workers : Utilisez Cloudflare Workers pour ajouter des en-têtes CORS lorsque vous servez nos ressources depuis votre serveur.

Comment vous préparer :

• Vérifiez votre intégration : Assurez-vous que votre système est capable de gérer CORS pour les URL d’artefacts.
• Téléchargez et enregistrez les artefacts : Si vous n’utilisez pas d’edge proxy, envisagez de télécharger et de stocker les artefacts sur votre backend.
• Configurez un edge proxy : Si vous utilisez des solutions comme Next.js ou Cloudflare Workers, mettez à jour votre configuration pour vous assurer que les ressources sont servies avec les en-têtes CORS appropriés.
• Testez votre système : Vérifiez que toutes les requêtes cross-origin vers notre plateforme fonctionnent comme prévu.

Besoin d’exemples de code pratiques ? Si vous ne savez pas comment commencer ou si le processus vous semble difficile à mettre en œuvre, nous avons fourni des extraits de code pratiques pour vous aider à démarrer. Veuillez consulter l’Annexe pour plus de détails.

FAQ

• Mon fichier généré est-il perdu ?
  Non. Vous pouvez toujours récupérer une nouvelle URL depuis l’API à tout moment.
• Je ne renvoie pas directement votre URL, mais j’effectue un post-traitement. Dois-je m’en préoccuper ?
  Si vous ne renvoyez pas directement notre URL à vos utilisateurs, vous pouvez ignorer ce changement. Cependant, nous vous recommandons de surveiller votre utilisation, en particulier si vous remarquez une augmentation des erreurs ou un comportement anormal dans votre système.

Besoin d’aide ?

Nous comprenons que ce changement puisse nécessiter des mises à jour de votre workflow. Si vous avez besoin d’aide pour configurer un edge proxy ou si vous avez des questions concernant cette transition, veuillez contacter notre équipe d’assistance à l’adresse support@tripo3d.ai.
Nous apprécions votre coopération alors que nous travaillons à renforcer la sécurité de notre plateforme ! Restez prudents et productifs !
Cordialement,
L’équipe Tripo

Annexe A : Approche de réenregistrement côté backend

Si vous utilisez FastAPI (qui est facile à porter ou à traduire vers tout autre framework ou langage), voici comment vous pouvez ajuster votre code existant pour gérer CORS et enregistrer l’artefact localement :

Code actuel :

@app.post("/")
def generate(prompt: str) -> str:
    resp = ...  # API works
    return resp.json()['url']

Vous pouvez facilement le modifier ainsi :

import httpx
import uuid

from fastapi.responses import FileResponse
from fastapi import HTTPException

@app.post("/")
def generate(prompt: str) -> str:
    resp = ...  # same as above

    # Add the code below
    file_id = str(uuid.uuid4())
    with httpx.Client() as client:
        # Download the artifact
        response = client.get(url)

        # Check if the request was successful
        if response.status_code == 200:
            # Then resave it
            with open(f"./downloaded/{file_id}.glb", "wb") as file:
                file.write(response.content)

    return file_id

@app.get("/artifact/{file_id}")
def download(file_id: str) -> FileResponse:
    if os.path.exists(f"./downloaded/{file_id}.glb"):
      return FileResponse(f"./downloaded/{file_id}.glb")
    raise HTTPException(status_code=404, detail="Item not found")

Après avoir téléchargé et enregistré le fichier localement, vous devrez servir vos utilisateurs avec la nouvelle URL. Par exemple, si votre application est hébergée sur https://app.example.com, l’URL que vous devrez servir ressemblera à ceci :

https://app.example.com/artifact/<file_id>

Cet extrait de code est simplement une démonstration de la manière d’ajuster votre intégration. Cependant, il y a quelques points importants à prendre en compte :

• Ajoutez une authentification appropriée : Assurez-vous que les liens de téléchargement sont protégés par des méthodes d’authentification appropriées afin d’empêcher les accès non autorisés.
• Utilisez un stockage fiable : Il est recommandé d’enregistrer les fichiers dans des solutions de stockage plus fiables, telles que des serveurs dédiés ou des options de stockage cloud comme les buckets S3.
• Stockez les métadonnées : Conservez un enregistrement des métadonnées de l’artefact dans votre base de données ou un autre système de stockage pour une utilisation ultérieure (comme le suivi ou l’audit).

Annexe B : Approche Edge Proxy

Si vous développez une Single Page Application (SPA) ou un serveur Backend for Frontend (BFF) et préférez ne pas gérer directement les téléchargements et le stockage de fichiers sur votre serveur, vous pouvez utiliser une approche edge proxy. Cela vous permet de récupérer le fichier depuis notre serveur, d’appliquer les en-têtes CORS nécessaires, puis de le servir à vos utilisateurs.

Solution 1 : Télécharger et renvoyer le fichier à l’aide d’Edge Functions

Vous trouverez ci-dessous un exemple de mise en œuvre de cette approche avec Cloudflare Workers. Cette solution gérera les problèmes de CORS en téléchargeant le fichier et en le renvoyant sous votre domaine.

addEventListener('fetch', event => {
  event.respondWith(handleRequest(event.request));
});

async function handleRequest(request) {
  // Parse the request URL
  const url = new URL(request.url);

  // Get the target URL from the 'url' query parameter
  const targetUrl = url.searchParams.get('url');

  // If no URL is provided, return an error
  if (!targetUrl) {
    return new Response('Please provide a URL parameter', {
      status: 400,
      headers: {
        'Content-Type': 'text/plain',
        'Access-Control-Allow-Origin': '*',
        'Access-Control-Allow-Methods': 'GET, OPTIONS',
        'Access-Control-Allow-Headers': 'Content-Type'
      }
    });
  }

  // Handle preflight OPTIONS request
  if (request.method === 'OPTIONS') {
    return handleCORS();
  }

  try {
    // Fetch the file from the target URL
    const response = await fetch(targetUrl);

    // If the fetch failed, return the error
    if (!response.ok) {
      return new Response(`Failed to fetch from target URL: ${response.statusText}`, {
        status: response.status,
        headers: corsHeaders()
      });
    }

    // Get the content type from the response or default to octet-stream
    const contentType = response.headers.get('Content-Type') || 'application/octet-stream';

    // Get the content disposition or create one from the URL
    let contentDisposition = response.headers.get('Content-Disposition');
    if (!contentDisposition) {
      // Extract filename from the URL
      const fileName = targetUrl.split('/').pop().split('?')[0] || 'file';
      contentDisposition = `attachment; filename="${fileName}"`;
    }

    // Create a new response with CORS headers
    const newResponse = new Response(response.body, {
      status: response.status,
      statusText: response.statusText,
      headers: {
        'Content-Type': contentType,
        'Content-Disposition': contentDisposition,
        'Access-Control-Allow-Origin': '*',
        'Access-Control-Allow-Methods': 'GET, OPTIONS',
        'Access-Control-Allow-Headers': 'Content-Type',
        'Cache-Control': 'public, max-age=3600' // Cache for 1 hour
      }
    });

    return newResponse;
  } catch (error) {
    return new Response(`Error fetching the file: ${error.message}`, {
      status: 500,
      headers: corsHeaders()
    });
  }
}

// Handle CORS preflight requests
function handleCORS() {
  return new Response(null, {
    status: 204, // No content
    headers: corsHeaders()
  });
}

// Create CORS headers object
function corsHeaders() {
  return {
    'Access-Control-Allow-Origin': '*',
    'Access-Control-Allow-Methods': 'GET, OPTIONS',
    'Access-Control-Allow-Headers': 'Content-Type',
    'Access-Control-Max-Age': '86400' // 24 hours
  };
}

Une fois votre Cloudflare Worker configuré, vous pouvez l’intégrer à votre SPA en utilisant le code JavaScript suivant pour récupérer le fichier :

fetch('https://your-worker-url.workers.dev/?url=<target_url>')
  .then(response => response.blob())
  .then(blob => {
    // Create a download link
    const url = window.URL.createObjectURL(blob);
    const a = document.createElement('a');
    a.href = url;
    a.download = 'downloaded-file.pdf';
    document.body.appendChild(a);
    a.click();
    a.remove();
  })
  .catch(error => console.error('Error:', error));

Cette solution est parfaite pour les SPA ou les serveurs BFF qui doivent contourner les restrictions CORS tout en téléchargeant et en servant des fichiers aux utilisateurs finaux. Le fichier est récupéré depuis l’URL cible, passe par l’edge proxy, puis est servi avec les en-têtes CORS nécessaires.

Solution 2 : Configurer un proxy d’en-têtes CORS

Si vous préférez configurer un proxy CORS simple, vous pouvez consulter cet exemple fourni par Cloudflare : Cloudflare Workers - CORS Header Proxy
Cela vous permettra de gérer plus facilement les requêtes cross-origin, tout en restant conforme aux politiques CORS.

Points importants à considérer :

• Authentification : Assurez-vous de sécuriser correctement vos edge functions avec des méthodes d’authentification (par ex., clés API, OAuth, etc.) afin d’empêcher tout accès non autorisé à vos fichiers.
• Stockage : Bien que cette approche fonctionne, nous recommandons toujours d’enregistrer l’artefact sur votre serveur pour une utilisation future, en particulier si vous devez gérer des téléchargements à grande échelle ou garantir un accès fiable aux ressources.