質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Ajax

Ajaxとは、Webブラウザ内で搭載されているJavaScriptのHTTP通信機能を使って非同期通信を利用し、インターフェイスの構築などを行う技術の総称です。XMLドキュメントを指定したURLから読み込み、画面描画やユーザの操作などと並行してサーバと非同期に通信するWebアプリケーションを実現することができます。

AWS(Amazon Web Services)

Amazon Web Services (AWS)は、仮想空間を機軸とした、クラスター状のコンピュータ・ネットワーク・データベース・ストーレッジ・サポートツールをAWSというインフラから提供する商用サービスです。

Q&A

2回答

10954閲覧

javascriptからpresigned url を使ってAWS S3 にアップロードする

popup

総合スコア24

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Ajax

Ajaxとは、Webブラウザ内で搭載されているJavaScriptのHTTP通信機能を使って非同期通信を利用し、インターフェイスの構築などを行う技術の総称です。XMLドキュメントを指定したURLから読み込み、画面描画やユーザの操作などと並行してサーバと非同期に通信するWebアプリケーションを実現することができます。

AWS(Amazon Web Services)

Amazon Web Services (AWS)は、仮想空間を機軸とした、クラスター状のコンピュータ・ネットワーク・データベース・ストーレッジ・サポートツールをAWSというインフラから提供する商用サービスです。

0グッド

1クリップ

投稿2015/03/25 01:51

公式のsdkを使ってpresigned urlを発行してブラウザからs3にファイルをアップロードしよう試みたところ、
403 Access Denied SignatureDoesNotMatch が帰ってきます。
他のメソッド(GET, DELETE)では、同じ鍵を使って生成したpresigned urlを使って成功しています。
また、presigned urlを使わずに直接putObjectを呼んだ際にも成功します。

SignatureDoesNotMatchの原因は何だと考えられるでしょうか。

Javascriptはほとんどさわったことがありません。

lang

1 2$(document).ready(function () { 3 AWS.config.update({ 4 accessKeyId: AWS_ACCESS_KEY_ID, 5 secretAccessKey: AWS_SECRET_ACCESS_KEY 6 }); 7 AWS.config.region = AWS_S3_REGION; 8 9 var fileChooser = document.getElementById('file-chooser'); 10 var button = document.getElementById('upload'); 11 button.addEventListener('click', function () { 12 var file = fileChooser.files[0]; 13 if (file) { 14 var params = {Bucket: BUCKET_NAME, Key: file.name, ContentType: file.type, Body: file}; 15 var signed_url = new AWS.S3().getSignedUrl('putObject', params); 16 17 $.ajax({ 18 url: signed_url, 19 type: 'PUT', 20 data: file, 21 contentType: file.type, 22 processData: false 23 }) 24 .done(function (data, a, b) { 25 console.log(data); 26 }); 27 } 28 }) 29}) 30

lang

1 2<!DOCTYPE html> 3 4<html lang='ja'> 5 <head> 6 <script src="https://sdk.amazonaws.com/js/aws-sdk-2.1.18.min.js"></script> 7 <script src="http://code.jquery.com/jquery-1.11.2.min.js"></script> 8 <script src="/static/main.js" type="text/javascript"></script> 9 </head> 10 11 <body> 12 <input id='file-chooser' type='file' /> 13 <button id='upload'>upload</button> 14 </body> 15</html> 16

よろしくお願いします。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答2

0

>STSというのはSecurity Token Service のことでしょうか。
それです。
サーバ側からgetSignedUrlで発行したURLをクライアントに投げる場合も、一度STSで一時ユーザのCredentialを作って、それでgetSignedUrlを実行するのが推奨されています。(AWSの中の人から言われました)
理由としては、signedUrlにはAccess keyが含まれてしまうので、これを隠ぺいする為です。
セキュリティ自体はAccess keyだけで破られる訳ではありませんが、それが漏れるとアタックの対象になりやすいのだとか。

投稿2015/03/25 10:24

utun

総合スコア384

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

utun

2015/03/25 10:25

間違えて回答で投げてしまいました!
popup

2015/03/26 01:47

ありがとうございます m(_ _)m STS、調べて実装してみます。 私もAccess Key がおおやけになるのが気になっておりましたが、 こういうものなのだと諦めておりました。 STSを使うとより安全そうですね。
guest

0

あまりちゃんと読んでませんが、実行順序的にGetSignedUrlの行は以下のようにすべきな気がします。
var signed_url = (new AWS.S3()).getSignedUrl('putObject', params);
Bodyのチェックサムでエラーが出てる可能性もありそうなので、Bodyを消して試してみるのもいいかもしれませんね。

ただ、AWS SDKを読み込んでいるのであれば、getSignedUrlを利用するまでもなく、普通にS3.putObjectを利用すればいけます。
getSignedUrlは、基本的に渡した先(基本はサーバ⇒クライアント)でAWS SDKを利用できない場合に、簡単にHTTPリクエストからS3を利用できる仕組みです。
AWS SDKを読み込んでいる環境で無理に使うメリットはあまり無いかと思います。

以下、余計なお世話かもしれませんが・・・。

これがNode.js上の話であれば良いのですが、ブラウザ側にAWS_ACCESS_KEY_ID,AWS_SECRET_ACCESS_KEYを書いてしまうと、誰でもこのユーザの権限で貴方のAWSアカウントにアクセスできてしまうので、非常にまずいです。
こういった操作をする場合は、サーバ側でSTSを利用して、限定的な権限の一時ユーザを作成して利用する形にする事を強くお勧めします。

以上、ご参考になれば幸いです。

投稿2015/03/25 02:58

utun

総合スコア384

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

popup

2015/03/25 09:43

ありがとうございます。 大変勉強になります。 STSというのはSecurity Token Service のことでしょうか。 本番ではphpサーバー側でsigned urlを発行してブラウザに渡そうと思います。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問