Access denied to bucket in S3 - Error 403 Forbidden (Fine-Uploader)

Question

I have a problem getting access to the bucket in Amazon S3. I follow step-by-step the instructions in the Fineuploader in official blog (Fineuploader S3 Upload Directly to Amazon S3 from your Browser), I check similar questions but non of them make reference to this specific case.

My intention is to replicate the fineuploader.com demo for S3, with the only difference that I'm not using advance features (chunking, drag & drop, retry, and more), in other words make a "Simple Upload".

Excuse me if I'm very redundant or very explicit, I only want to make clear the procedure I have done.

I copied the code in client-side of http://fineuploader.com/demos.html#amazon-demo and changed some lines:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="shortcut icon" href="favicon.ico" >

    <title></title>

    <!--[if lt IE 9]>
    <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->

</head>
<body>

<!-- jQuery ====================================================================== -->
<script src="http://code.jquery.com/jquery-latest.js"></script>

<!-- Fine Uploader JS ====================================================================== -->
<script src="../../custom.fineuploader-5.0.8.js"></script>
<script>
$(document).ready(function () {
    $('#fineuploader-s3').fineUploaderS3({
        debug: true,
        request: {
            // REQUIRED: We are using a custom domain
            // for our S3 bucket, in this case.  You can
            // use any valid URL that points to your bucket.
            endpoint: "bucketname.s3.amazonaws.com",

            // REQUIRED: The AWS public key for the client-side user
            // we provisioned.

            // Access key - User create in IAM
            accessKey: "AKIAJUGFU2PN7PXXXXXX"
        },

        template: "simple-previews-template",

        // REQUIRED: Path to our local server where requests
        // can be signed.
        signature: {
            endpoint: "/fineuploader/html/templates/s3demo.php"
        },

        // OPTIONAL: An endopint for Fine Uploader to POST to
        // after the file has been successfully uploaded.
        // Server-side, we can declare this upload a failure
        // if something is wrong with the file.
        uploadSuccess: {
            endpoint: "/fineuploader/html/templates/s3demo.php?success"
        },

        // USUALLY REQUIRED: Blank file on the same domain
        // as this page, for IE9 and older support.
        // iframeSupport: {
        //     localBlankPagePath: "/server/success.html"
        // },

        // optional feature
        // chunking: {
        //     enabled: true
        // },

        // optional feature
        // resume: {
        //     enabled: true
        // },

        // optional feature
        // deleteFile: {
        //     enabled: true,
        //     method: "POST",
        //     endpoint: "/s3demo.php"
        // },

        // optional feature
        // validation: {
        //     itemLimit: 5,
        //     sizeLimit: 15000000
        // },

        // thumbnails: {
        //     placeholders: {
        //         notAvailablePath: "images/not_available-generic.png",
        //         waitingPath: "images/waiting-generic.png"
        //     }
        // }
    })
        // Enable the "view" link in the UI that allows the file to be downloaded/viewed
        .on('complete', function(event, id, name, response) {
            var $fileEl = $(this).fineUploaderS3("getItemByFileId", id),
                $viewBtn = $fileEl.find(".view-btn");

            if (response.success) {
                $viewBtn.show();
                $viewBtn.attr("href", response.tempLink);
            }
        });
    });
</script>

<!-- Fine Uploader CSS ====================================================================== -->
<link href="../../custom.fineuploader-5.0.8.css" rel="stylesheet">

<!-- Fine Uploader DOM Element ====================================================================== -->
<div id="fineuploader-s3"></div>

<!-- Fine Uploader template ====================================================================== -->
<script type="text/template" id="simple-previews-template">
    <div class="qq-uploader-selector qq-uploader">
    <div class="qq-upload-drop-area-selector qq-upload-drop-area" qq-hide-dropzone>
        <span>Drop files here to upload</span>
    </div>
    <div class="qq-upload-button-selector qq-upload-button">
        <div>Upload a file</div>
    </div>
      <span class="qq-drop-processing-selector qq-drop-processing">
          <span>Processing dropped files...</span>
          <span class="qq-drop-processing-spinner-selector qq-drop-processing-spinner"></span>
      </span>
    <ul class="qq-upload-list-selector qq-upload-list">
        <li>
            <div class="qq-progress-bar-container-selector">
                <div class="qq-progress-bar-selector qq-progress-bar"></div>
            </div>
            <span class="qq-upload-spinner-selector qq-upload-spinner"></span>
            <img class="qq-thumbnail-selector" qq-max-size="100" qq-server-scale>
            <span class="qq-edit-filename-icon-selector qq-edit-filename-icon"></span>
            <span class="qq-upload-file-selector qq-upload-file"></span>
            <input class="qq-edit-filename-selector qq-edit-filename" tabindex="0" type="text">
            <span class="qq-upload-size-selector qq-upload-size"></span>
            <a class="qq-upload-cancel-selector btn-small btn-warning" href="#">Cancel</a>
            <a class="qq-upload-retry-selector btn-small btn-info" href="#">Retry</a>
            <a class="qq-upload-delete-selector btn-small btn-warning" href="#">Delete</a>
            <a class="qq-upload-pause-selector btn-small btn-info" href="#">Pause</a>
            <a class="qq-upload-continue-selector btn-small btn-info" href="#">Continue</a>
            <span class="qq-upload-status-text-selector qq-upload-status-text"></span>
            <a class="view-btn btn-small btn-info hide" target="_blank">View</a>
        </li>
    </ul>
</div>
</script>

</body>
</html>

My code in the server-side was taken from https://github.com/FineUploader/server-examples/blob/master/php/s3/s3demo-thumbnails-cors.php only comment and changed comment the following lines.

Commented lines:

// require 'aws-autoloader.php';
// use Aws\S3\S3Client;

// $serverPublicKey = $_SERVER['PARAM1'];
// $serverPrivateKey = $_SERVER['PARAM2'];

// $expectedMaxSize = 15000000;

Changed lines:

// Secret key - User create in IAM
$clientPrivateKey = $_SERVER['BIsYDPrOfWyWeUXueJaiaAem7he3R5THxx000Xxx'];
$expectedBucketName = "bucketname";

Everything appears to be in order, but when I upload an image, I have an error in my Chrome console:

POST http://bucketname.s3.amazonaws.com/ 403 (Forbidden)

The access key and secret key contains characters X and 0 that were placed for illustrative purposes. The keys are not real.

I will appreciate your help.

Answer 1

$clientPrivateKey = $_SERVER['xxx'];

I think this is wrong. In the original file it says:

// These assume you have the associated AWS keys stored in
// the associated system environment variables
$clientPrivateKey = $_SERVER['AWS_SECRET_KEY'];

So either set up a variable in your environment named AWS_SECRET_KEY and restore the line to what it was, or just use

$clientPrivateKey = 'xxx';

I'd also recommend changing the key, as you've posted it in a public place now and someone is bound to do nasty things to your bucket!

Access denied to bucket in S3 - Error 403 Forbidden (Fine-Uploader)

Question

1 answers

solution1
2 2014-10-26 00:04:36

Access denied to bucket in S3 - Error 403 Forbidden (Fine-Uploader)

Question

1 answers

solution1 2 2014-10-26 00:04:36

solution1
2 2014-10-26 00:04:36