[解決済み] Amazon S3のクライアントブラウザからの直接ファイルアップロード - 秘密鍵の開示
質問
私は、クライアントマシンからREST API経由でAmazon S3に直接ファイルをアップロードする実装を、サーバーサイドのコードを一切使用せず、JavaScriptだけで行っています。すべてうまくいっていますが、1つだけ心配なことがあります...
Amazon S3 REST APIにリクエストを送信するとき、リクエストに署名する必要があり、署名を
Authentication
ヘッダを作成します。署名を作成するには、私の秘密鍵を使用しなければなりません。しかし、すべてのことはクライアント側で行われるので、秘密鍵は(たとえソースを難読化/暗号化したとしても)ページのソースから簡単に明らかにすることができます。
どうすればいいのでしょうか?また、全く問題ないのでしょうか?特定のCORS OriginからのREST APIコールに限定して、PUTとPOSTメソッドのみ、あるいはS3と特定のバケットにのみキーをリンクさせることができるかもしれません?もしかしたら、他の認証方法があるかもしれませんね?
サーバーレスソリューションは理想的ですが、サーバーサイドの処理を含むことも検討できます。
どのように解決しますか?
あなたが欲しいのは、Browser-Based Uploads Using POSTだと思います。
基本的に、サーバーサイドのコードは必要ですが、それは署名されたポリシーを生成するだけです。クライアント側のコードに署名されたポリシーがあれば、データをサーバーを経由せずに直接S3へPOSTでアップロードすることができます。
以下は公式ドキュメントのリンクです。
図 http://docs.aws.amazon.com/AmazonS3/latest/dev/UsingHTTPPOST.html
コード例 http://docs.aws.amazon.com/AmazonS3/latest/dev/HTTPPOSTExamples.html
署名されたポリシーは、以下のような形でhtmlに記載されます。
<html>
<head>
...
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
...
</head>
<body>
...
<form action="http://johnsmith.s3.amazonaws.com/" method="post" enctype="multipart/form-data">
Key to upload: <input type="input" name="key" value="user/eric/" /><br />
<input type="hidden" name="acl" value="public-read" />
<input type="hidden" name="success_action_redirect" value="http://johnsmith.s3.amazonaws.com/successful_upload.html" />
Content-Type: <input type="input" name="Content-Type" value="image/jpeg" /><br />
<input type="hidden" name="x-amz-meta-uuid" value="14365123651274" />
Tags for File: <input type="input" name="x-amz-meta-tag" value="" /><br />
<input type="hidden" name="AWSAccessKeyId" value="AKIAIOSFODNN7EXAMPLE" />
<input type="hidden" name="Policy" value="POLICY" />
<input type="hidden" name="Signature" value="SIGNATURE" />
File: <input type="file" name="file" /> <br />
<!-- The elements after this will be ignored -->
<input type="submit" name="submit" value="Upload to Amazon S3" />
</form>
...
</html>
FORMアクションがファイルを送信していることに注意してください。 を直接S3へ - サーバー経由ではなく
ユーザがファイルをアップロードするたびに
POLICY
と
SIGNATURE
をサーバーにインストールします。ユーザーのブラウザにページを返します。その後、ユーザーはあなたのサーバーを経由せずに、直接S3にファイルをアップロードすることができます。
ポリシーに署名するとき、通常、数分後にポリシーが失効するようにします。これにより、ユーザーはアップロードする前にあなたのサーバーと話をすることを強制されます。これにより、必要に応じてアップロードを監視し、制限することができます。
あなたのサーバーに出入りするデータは、署名されたURLだけです。あなたの秘密鍵はサーバー上で秘密にされたままです。
関連
-
vue3レスポンシブ対応のためのsetup+ref+reactive
-
vueにおけるv-forループオブジェクトのプロパティ
-
Vueのフィルタの説明
-
[解決済み】TypeScript-のAngular Frameworkエラー - "exportAsがngFormに設定されたディレクティブはありません"
-
[解決済み】 env: node: macにそのようなファイルやディレクトリはありません
-
JavaScriptのgetElementById、getElementsByTagNam、getElementsByClassNameの違いと使い方
-
[解決済み] Amazon S3 - 'The request signature we calculated does not match signature' エラーを修正する方法は?
-
[解決済み] "保護されていない秘密鍵ファイル!" Amazon EC2インスタンス(AWS)へのSSH利用時のエラーについて
-
[解決済み] JAX-RSとJerseyでRESTトークンベースの認証を実装する方法
-
[解決済み】REST認証スキームの安全性
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
親子コンポーネント通信を解決する3つのVueスロット
-
WeChatアプレット用ユニアプリによるグローバルシェアリング
-
Vueにシンプルなメモ帳機能を実装
-
VUEグローバルフィルターの概念と留意点、基本的な使い方
-
[解決済み】React - uncaught TypeError: 未定義のプロパティ 'setState' を読み取れない
-
[解決済み】awaitは非同期関数でのみ有効です。
-
[解決済み] 期待される代入または関数呼び出し: 未使用式なし ReactJS
-
[解決済み】 env: node: macにそのようなファイルやディレクトリはありません
-
[解決済み】エラー。Ionic使用中にモジュール '../lib/utils/unsupported.js' が見つかりませんでした。
-
OSSアップロードエラーを解決する: net::ERR_SSL_PROTOCOL_ERROR