Sketchfab APIを使って3DモデルをGLBファイルとしてダウンロードし、ブラウザ上でThree.jsで表示するWebアプリを作成しました。本記事では、セキュリティを考慮したアーキテクチャ設計から実装まで解説します。

やりたかったこと

  • Sketchfab上の3DモデルをGLB形式でダウンロードしたい
  • ダウンロードしたGLBをブラウザ上で3D表示したい
  • APIトークンを安全に管理したい

技術スタック

  • Next.js 16（App Router）
  • React Three Fiber / @react-three/drei
  • TypeScript

最初に試したこと：クライアントサイドのみで実装

最初はシンプルにHTML + JavaScriptだけで実装しようとしました。

c)cco;oon`{}nnSshssktth}toeteltrpa'decesdAa.hs:eutlfprtaoa/shgbna:o=(sprdAei{iaaP.zwtI=saaaかkti.らaeitgダwtolウacnrbンih'e.ロtf:suーaprドfb`olUe.Tn)Rtcos;Lcokeをhme.取(/nj得vs3$o署/{n名ma(付op)きdi;SeT3loskU/eR$nL{}m`odelUid}/download`,

これ自体は動作しましたが、2つの問題がありました。

問題1: APIトークンの露出

クライアントサイドでAPIトークンを使用すると、ブラウザの開発者ツールから簡単に確認できてしまいます。APIトークンが漏洩すると、他人があなたのアカウントでAPIを利用できてしまうため、これは避けるべきです。

問題2: CORSエラー（場合による）

ブラウザのセキュリティ制限により、異なるオリジンへのリクエストが制限されることがあります。今回のケースでは、Sketchfab APIへのリクエスト自体はCORSが許可されていましたが、環境によっては問題になる可能性があります。

解決策：サーバーサイドAPIを経由する設計

Next.jsのAPI Routesを使って、サーバーサイドでSketchfab APIと通信する設計にしました。

┌││││└───────(──CB──lr──io──ew─│││└─ns───te───r───)─────────────────┐││││┘──◀▶──┌│││└────────▶──署─┌││││└─S名────3付────き────(U──N──GR──e(──LL──xS──B──te──)──.r────jv────se────r──│──A)────P────I─┐││┘──────┐││││┘─◀──────▶─┌││││└─────S──k──e──t──c──h──f──a──b────A──P──I─────┐││││┘

ポイント：署名付きURLの活用

Sketchfab APIは、GLBファイルの実体ではなく「署名付きS3 URL」を返します。

{}"}gl"""buse"rix:lzp"ei{:"r:e"sh1"t0:t0p43s80:00/8/,sketchfab-prod-media.s3.amazonaws.com/archives/.../model.glb?AWSAccessKeyId=...&Signature=...&Expires=1769553560",

この署名付きURLには以下の特徴があります：

  • 有効期限付き （数分で無効化）
  • 特定ファイルへのアクセスのみ許可
  • 読み取り専用

つまり、この署名付きURLをクライアントに渡しても安全です。クライアントはこのURLから直接S3にアクセスしてGLBをダウンロードできます。

なぜサーバー経由でGLBを転送しないのか？

サーバー経由でGLBファイル全体を転送する方法もありますが、以下の理由から署名付きURLを返す方式を採用しました：

方式メリットデメリット
サーバー経由でGLB転送CORSを完全に回避サーバー負荷大、転送速度低下
署名付きURLを返す高速、サーバー負荷なしCORSに依存（今回は問題なし）

Sketchfab S3は Access-Control-Allow-Origin: * を返すため、クライアントから直接アクセス可能でした。

実装

1. 環境変数の設定

#SK.EeTnCvH.FlAoBc_aAlPI_TOKEN=your_api_token_here

APIトークンはサーバーサイドでのみ使用するため、NEXT_PUBLIC_ プレフィックスは付けません。

2. API Route（サーバーサイド）

ie}mxppccc)cr}sooooo;oe)rrrnnn`{}ntuse;cttssSshs署urix/ttktth}t名rlzpa{aete,付n:eipsmatrpaAdき:rpNyopcesduaUNde/endihs:ettReadsaxceTfprhaLxta:ptloa/soをtatiRfUkbna:r=クR.ad/euiespiラeg.asqndnAei{zaイslgtkucP.awアpblaeet==I=staンo.b.tsiかkiiトnu.gctorpらaeotにsrslh,nerダwtn返elibfqoウac:rす.,z.aNGucンihejeebeEeeロtf`ss,x/xTssーaTpopdt(tsドfboonioRr..Ue.kn(rweeneRtces{ensqenLconeslpuxvをhm.,ooet.取(/$jansUS得v{sdstrK3ao/e:lE/pnr.Tmi(o}NsCoT)ueeHdo;tfxaFekertrAle.oRcBsntmeh_/}sqPA$`'uaP{,nerImesa_oxtmTdt)sOe/.Kls{gEUeeNirt;dv(}e'/rud'io;dw'n)l;oad`,

3. GLBビューワーコンポーネント（クライアントサイド）

'iiiif}e}ummmmuxsppppncr)pcu}r)seoooocoe;oos,e;rrrrrtnt<rneft<ccttttisuC/tsEe[uC//lotre<Ctft..mra<<<<Cci{{{{nnnpedfサcttonnadS/Oaoegtrne[eーhhhdvmiu{<SrnmnCOuGMl(eitfgcバ(eee(abrsgEubvptarsLotrmealtー`nnlsieplnsiao'nbeTdf>irub(A/((Uecebvptsn;viLFet>lU(PardicntnUieC>eatoLl=itr)IpeadatisrrnonsCao(vlかist]mLoelosntoda{uef,=ら/a)einnets}nedsu>署s=;rgaf&m>r/treueons名k>=ahla&eoGfrrrLbce{付e>=tLlnlLro}lojttきtr{il<tsBol}aeiGUces{igbMVmsf}dcolRhsenhaopi,rf:etnbLf.tpttcdre'orr=UをajGoekeew@Emo{({Gr取bslsnp=lsernmGgLl得/obiso{erev'uLlB]dnUtisnut.ai@'rTtVo(ritiur=tcrrtlFfi=w)loytll"stoeh:L.en)(n=il=sx-naroswuld:{o}{ttmcesacesoa0n>guhetetdereat[.=ldrn-/ren(Sda05{bietteire{t?.,}[Uoe,hxn,}auu5r"/ragmtir2,lfCemuoedl,}ieep}rd<=)1bn/l)les$)50etfe)lt{;],>reis{;Urm,}'rb/iio7;ejdndf.}rsgeo5'm}lv]f;/:|U:}rlioo{nd4mau}5dml`'eol)}@rd>}rse(>e/lnaGUucLiltTdl-F:)tL;hosratedreei/rnd.grjes}i')';;{

4. ビューワーページ

'ic}e}umo)xspns;pcr)seoSssooe;rrStrrnt<cctR:tsum//l無Gtra<<maid効LfdniiGapeyでBae[nnvoLipnn読Vlfm(>panBn/taみisaoulCV>['m込eeudtuhil;iみw,leeaeoc（etl=nwcTrU{geafhfimerlrr=udo=eoen,d{m]medce(o/.ytsledv'jnieU)einsaotileeはmnMd=Uwxブio}>ietラcVddr/ウ(ies=/dザ(ele{pyA)wUtmanPeiMogaI=rdodemに>P]de.i依aeltc存ig=lUs'）meUix;p(uido)sd}re(t{Se(t.'at@ta/erc(go'em0tpd.obvn8ae3ln6ut5esf)/d}G0LcB4V4i9e3w8ebr6'6)6,34{5ef0f99d6d');

セキュリティまとめ

情報露出理由
Sketchfab APIトークン❌ 非公開サーバーサイドの環境変数で管理
署名付きS3 URL✅ 公開OK有効期限付き、特定ファイルのみ、読み取り専用

注意点

  • ダウンロード可能なモデルのみ対応 : Sketchfab上で作者が「downloadable」に設定したモデルのみAPIからダウンロードできます
  • 署名付きURLの有効期限 : 数分で期限切れになるため、長時間放置後は再取得が必要です

まとめ

Sketchfab APIを使ったGLBダウンロード・表示機能を、セキュリティを考慮して実装しました。

  • APIトークンはサーバーサイドで管理し、クライアントには露出させない
  • Sketchfabが返す署名付きURLを活用し、効率的にファイルを転送
  • React Three Fiberで簡単に3Dビューワーを構築

ソースコードは以下で公開しています：
https://github.com/nakamura196/sketchfab-api-test