今月誕生日を迎えたいわむ(@k_iwamu)です！徐々に1年経つのが早く感じます。。。
また1つ年を取りましたが、年齢だけじゃなくきちんとスキルセットも積み重ねられるよう引き続き頑張ります！ (Amazonのほしい物リストをブログに追加しようと思ったのですが、社内から野次が飛んできそうなので控えます。)

さて、今回はS3の署名つきURL(presigned-url)を使ってブラウザから直接S3に画像をアップロードする仕組みを作ったので、紹介したいと思います！

今回利用することになった理由

弊社でフロントエンドとバックエンド(API)を切り離して構成されているwebサービスがあります。
そのwebサービスで画像アップロード機能を実装することになりました。

画像アップロード機能では、ブラウザから直接アップロードするか、バックエンドを通じてアップロードするかで迷うことが多いと思います。
今回は、バックエンドを通じてアップロードすると、サーバーで画像を受け取ってアップロードするので処理も重くなってしまいますし、責務分離の観点から見ても避けたいということを考慮し、ブラウザから直接アップロードすることにしました。

しかし、どのようにしてブラウザにS3への権限を与えるのかという課題がありました。
もちろん単純にAWSのKEYをブラウザで利用すると、簡単にKEYを参照できてしまい、セキュリティ面で欠陥が生じてしまいます。

そこで、署名つきURLをバックエンド(API)側で発行し、そのURLを用いてブラウザから直接アップロードさせるようにしました。

署名つきURLって何？

簡単に言うと、「S3の指定のオブジェクトへの一時的なアクセス許可」を目的として発行するURLです。
このURLを利用してアクセス制限されているオブジェクトの取得や更新を行うことができます。
URLの有効期限も決められることができるので、そのURLをずっと管理しておく必要もなくセキュリティ的にも安全です。

そういった特徴から、以下のような場面で利用することができます。

(例)

通常は非公開だが、セミナー参加者だけがファイルをダウンロードできるようにしたい場合
指定されたユーザーのみファイルをアップロードできるようにしたい場合

署名つきURLの構成

署名つきURLの構成は通常以下のようになっています。(デコードしたものを表示しています)

https://<bucket名>.s3.amazonaws.com/<S3のpath>
        ?Content-Type=image/jpeg
        &X-Amz-Algorithm=AWS4-HMAC-SHA256 
        &X-Amz-Credential=accesskeysample/20191125/ap-northeast-1/s3/aws4_request
        &X-Amz-Date=20191125T101156Z
        &X-Amz-Expires=60
        &X-Amz-Signature=3c6cd643b06f0eabd92db2847b0e16cf18ffi3fjj41b79a6339a40693c6e5e5a
        &X-Amz-SignedHeaders=host;x-amz-acl
        &x-amz-acl=public-read

parameter	意味
X-Amz-Algorithm	署名の計算に使用したアルゴリズム
X-Amz-Credential	署名の有効なスコープの定義 "<your-access-key-id>//<AWS-region>/<AWS-service>/aws4_request"
X-Amz-Date	署名の発行をリクエストした時間 "yyyyMMddTHHmmssZ"
X-Amz-Expires	制限時間(秒数)
X-Amz-Signature	署名(計算方法)
X-Amz-SignedHeaders	署名の計算に使用したヘッダーのリスト
x-amz-acl	S3オブジェクトの公開・非公開設定

実装

画像アップロードのフロー

バックエンド(API)側の実装

認証

署名付きURLを発行する前に、ユーザーの認証を行っています。署名付きURLを用いると、S3の指定のpathのみとはいえ誰でも画像をアップロードできてしまいます。
そのため、認証を行ったり、IP制限などでリクエスト自体を制限することをお勧めします。

署名付きURLの発行

次に、aws-sdkを使って署名付きURLを発行します。 S3オブジェクトのgetSignedUrlを使って署名付きURLを発行します。
バックエンド側では、S3のオブジェクトを更新できるIAMユーザーのKEYをセットしておきましょう。

import { S3 } from "aws-sdk";

/**
 * メールを送信する
 * @param bucket S3のbucket名
 * @param objectKey S3のkey名
 * @param contentType オブジェクトのコンテンツタイプ
 */
export const createPresignedUrl = (bucket: string, objectKey: string, contentType: string): string => {
  const s3 = new S3({ region: "ap-northeast-1", signatureVersion: 'v4',});
  return s3.getSignedUrl('putObject', {
    ContentType: contentType,
    Bucket: bucket,
    Key: objectKey,
    // 最小で1、最大で604800(7日間)まで設定できます。
    Expires: 60,
    // アップロードされたものをパブリックに公開するなら必須です。
    ACL: "public-read",
  });
};

CORS

S3のバケットにCORSの設定をして、ブラウザのホストから署名付きURLへのリクエストを許可する必要があります。
バケットの「アクセス権限」 => 「CORSの設定」から設定ができます。

<?xml version="1.0" encoding="UTF-8"?>
<CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/">
<CORSRule>
    <AllowedOrigin>*</AllowedOrigin>
    <AllowedMethod>HEAD</AllowedMethod>
    <AllowedMethod>GET</AllowedMethod>
    <AllowedMethod>PUT</AllowedMethod>
    <AllowedMethod>POST</AllowedMethod>
    <AllowedMethod>DELETE</AllowedMethod>
    <AllowedHeader>*</AllowedHeader>
</CORSRule>
</CORSConfiguration>

import { S3 } from "aws-sdk";

/**
 * メールを送信する
 * @param bucket S3のbucket名
 * @param objectKey S3のkey名
 * @param contentType オブジェクトのコンテンツタイプ
 */
export const createPresignedUrl = (bucket: string, objectKey: string, contentType: string): string => {
  const s3 = new S3({ region: "ap-northeast-1", signatureVersion: 'v4',});
  return s3.getSignedUrl('putObject', {
    ContentType: contentType,
    Bucket: bucket,
    Key: objectKey,
    // 最小で1、最大で604800(7日間)まで設定できます。
    Expires: 60,
    // アップロードされたものをパブリックに公開するなら必須です。
    ACL: "public-read",
  });
};

フロントエンド側の実装

画像のアップロード

フロントエンド側はaws-sdkを使わなくても、署名付きURLにPUTでリクエストすれば画像ファイルをアップロードできます。

axios({
    method: 'PUT',
    url: <presigned-url>,
    headers: {
            'Content-Type': 'image/jpeg',
        },
        data: fileData
    })

これでアップロードは完了です。
アップロード完了時のレスポンスには、アップロード先のpathは返ってきませんが、署名付きURLで指定されたbucketのpathにアップロードされているので確認することができます。

以上の手順でブラウザ側に一時的にS3の権限を与えて画像を直接アップロードすることができます。