Upload images securely but directly from our frontend to AWS

thxprotocol / monorepo-legacy

Monorepo containing THX Network applications and infrastructure for quest and reward campaigns.

https://dashboard.thx.network

5 stars 5 forks source link

Upload images securely but directly from our frontend to AWS #226

Open peterpolman opened 1 year ago

peterpolman commented 1 year ago

[ ] Research how to upload files to public S3 bucket from Dashboard directly
[ ] Would be nice to restrict file upload access to a sub based folder or something like that
[ ] Would be even nicer to secure uploads with our own JWT's (search for AWS custom validation middleware) https://aws.amazon.com/blogs/storage/managing-access-to-your-amazon-s3-objects-with-a-custom-authorizer/

valeriagrazzini commented 1 year ago

implemented the sdk in the dashboard app without any problem, but when I try to submit to the s3 bucket I get cors error

peterpolman commented 1 year ago

We probably have to whitelist our request urls as allowed origins in AWS interface. @peterpolman Please look at this next week!

valeriagrazzini commented 1 year ago

@peterpolman you can find how to set the config here: https://docs.aws.amazon.com/sdk-for-javascript/v2/developer-guide/cors.html

peterpolman commented 1 year ago

@valeriagrazzini Added this config for the S3 bucket: local-thx-storage-bucket and local-thx-private-storage-bucket

[
    {
        "AllowedHeaders": [
            "*"
        ],
        "AllowedMethods": [
            "HEAD",
            "GET",
            "PUT",
            "POST",
            "DELETE"
        ],
        "AllowedOrigins": [
            "https://localhost:8082"
        ],
        "ExposeHeaders": [
            "ETag",
            "x-amz-meta-custom-header"
        ]
    }
]

peterpolman commented 1 year ago

As mentioned in the PR we need to provide proper authorization to these browser accessed S3 buckets. Lets follow up on this next sprint.