GithubHelp home page GithubHelp logo

Comments (10)

rpattcorner avatar rpattcorner commented on July 19, 2024 1

An index.html might be part of an app, but it's just HTML, not executable code. You'd be doing the identity assumption in the javascript code components in the REACT or Angular app.

This AWS Doc gives a decent overview of the bits and pieces. The javascript section (scroll down) in this article was the best quick example I could find.

You'll need to google around for more examples though. AWS seems very big on promoting their Amplify framework for this purpose, but the projects I work on access the identity pool directly for authorization without Amplify.

A very quick look turned up the very last paragraph in this article and its associated repo, which illustrates in a cursory way how you'd bring an identity pool into an app that is already using a user pool. It's a pre-amplify example, or you could bite the bullet and go down the AWS-favored amplify path, which seems to be better documented.

from cloudfront-authorization-at-edge.

ottokruse avatar ottokruse commented on July 19, 2024

Hi @lawrence-c

Access a private S3 bucket? Like the private S3 bucket from the solution here? That should work seamless. For other buckets, you could fromt them with this CloudFront distribution too and thus Lambda@Edge protect them. But tthat bucket needs to add the CloudFront OAI from this solution to its bucket policy, so that CloudFront can read the items.

From the looks of it rufuspollock/s3-bucket-listing is coded against being run as S3 website (not CloudFront) which is another ball game.

from cloudfront-authorization-at-edge.

lawrence-c avatar lawrence-c commented on July 19, 2024

Hi @ottokruse,

Thank you for the response!

So the cloudformation template sets up the correct permissions to access the S3 bucket, namely:

{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Effect": "Allow",
            "Principal": {
                "AWS": "arn:aws:iam::cloudfront:user/CloudFront Origin Access Identity <cloudfront_id>"
            },
            "Action": "s3:GetObject",
            "Resource": "arn:aws:s3:::<bucket_name>/*"
        },
        {
            "Effect": "Allow",
            "Principal": {
                "AWS": "arn:aws:iam::cloudfront:user/CloudFront Origin Access Identity <cloudfront_id>"
            },
            "Action": "s3:ListBucket",
            "Resource": "arn:aws:s3:::<bucket_name>"
        }
    ]
}

And, I am able to access the files within the bucket when I go to something like: https://<cloudfront_url>.cloudfront.net/test/hello-world.txt, but it's just that the index.html file doesn't seem able to list the files out, so I assumed this could be an authentication with jquery/javascript issue in the list.js file.

Should the solution be using the S3 bucket in website mode?

from cloudfront-authorization-at-edge.

lawrence-c avatar lawrence-c commented on July 19, 2024

I suppose if this is useful, these are the steps I've done so far:

  • Run the cloudformation template provided from this repository, however removing the HTTPHeaders for debugging reasons.

  • With the newly created S3 bucket, I removed the react application that was in there, and placed in the index.html and list.js from the s3-bucket-listing repository, however edited the index.html to be:

<!DOCTYPE html>
<html>
<head>
  <title>S3 Bucket Listing Generator</title>
</head>
<body>
  <div id="navigation"></div>
  <div id="listing"></div>

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script type="text/javascript">
  var BUCKET_URL = 'https://<cloudfront_url>.cloudfront.net';
</script>
<script src="list.js"></script>

</body>
</html>

  • I also added in a hello-world.txt file to the bucket for test purposes.

  • Navigating to the https://<cloudfront_url>.cloudfront.net works fine, and I can login correctly with the details provided. The index.html just doesn't seem to be able to get the list of files in the S3 bucket correctly however.

from cloudfront-authorization-at-edge.

rpattcorner avatar rpattcorner commented on July 19, 2024

I think the issue is that accessing a file in an app or the app itself, e.g. index.html is an entirely different matter than having the app itself access a file in the bucket.

In the first case, the security principal is a browser attempting to read a file in a bucket, and the cloudfront is all set up with permissions for the bucket; the principal authenticates through a Cognito user pool, gets directed thru CloudFront to the bucket file requested and, as you point out, all is golden.

In the second case it's an entirely different permissions landscape. The security principal is code inside the SPA or regular app itself (not the currently accessing user from the user pool), and the code has no permissions whatsoever to reach outside the app and do anything, including read from the bucket it is running in. By the way, that presents an interesting bootstrapping problem.

Any permissions CloudFront had via OAI to let a browser read an app file do not transfer to the app code's own permissions.

There are some insecure ways to solve this; one more secure possibility is to give the app itself the desired role using a mechanism like a Cognito identity pool.

from cloudfront-authorization-at-edge.

lawrence-c avatar lawrence-c commented on July 19, 2024

Hi @rpattcorner

Thank you for the detailed response and explanation of the problem I'm having.

Can you please explain how you'd go about giving the app the necessary role using Cognito identity pool within the index.html file? I suppose the idea being that once the user has authenticated, the index.html page already has the correct permissions to access the bucket and doesn't need additional authentication?

I'm not too sure how to go about this as this is all quite new to me.

from cloudfront-authorization-at-edge.

lawrence-c avatar lawrence-c commented on July 19, 2024

Thanks @rpattcorner for the links and explanations. I'll have a go looking through them and see if I can get something together.

Thank you!

from cloudfront-authorization-at-edge.

wesleywh avatar wesleywh commented on July 19, 2024

@lawrence-c Actually @sathed came up with this one because we just had a really similar issue where we're using mkdocs. While we could authenticate and login to the index page fine (even subsequent html pages if you had the direct link). None of the links worked and the search bar that searched for pages didn't work. We actually fixed this by deleting the Content Security Policy that the lambdas use.

You can change this policy to your needs in the template. You will find a section in the template that looks like this. Modify it to your needs to allow urls you will be using.

...
...
HttpHeaders:
    Type: String
    Description: The HTTP headers to set on all responses from CloudFront. To be provided as a JSON object
    Default: |-
      {
        "Content-Security-Policy": "default-src 'none'; img-src 'self'; script-src 'self' https://code.jquery.com https://stackpath.bootstrapcdn.com; style-src 'self' 'unsafe-inline' https://stackpath.bootstrapcdn.com; object-src 'none'; connect-src 'self' https://*.amazonaws.com https://*.amazoncognito.com",
        ...
        ...
      }
...
...

Be sure to also update the version parameter of the lambda's so it will redeploy them. Since you updated the version of the lambdas be sure to update that version reference in your CloudFront behaviors as well. (We were doing it manually so those behaviors were not set by this template). Finally you can verify that the content policy is in your deployed lambdas or not by opening up the lambda and looking at configuration.json

Now with all of this said, I find it a little silly to have the Content-Security-Policy at all since there is authorization in front of this anyway. Anyone scanning this will get an authorization requirement sent back to them anyway. So you can just delete this header altogether and now you can list pages from other pages that live in the same s3 bucket (or other buckets) just fine.

from cloudfront-authorization-at-edge.

melnur avatar melnur commented on July 19, 2024

@lawrence-c I'm also trying to implement this with https://github.com/rufuspollock/s3-bucket-listing but unfortunately I'm unable to see the bucket contents. Were you able to make this work?
I also use have " var BUCKET_URL = 'https://<cloudfront_url>.cloudfront.net';" in my index.html and disabled "Content-Security-Policy" as @wesleywh suggested. Would appreciate if you share your solution. Thanks
image

from cloudfront-authorization-at-edge.

ottokruse avatar ottokruse commented on July 19, 2024

This really is a question to the author of https://github.com/rufuspollock/s3-bucket-listing: to support S3 bucket access via CloudFront, instead of to S3 directly.

Accessing an S3 bucket via CloudFront is a whole different thing than accessing an S3 bucket directly. CloudFront in front of S3 is supposed to abstract S3, so that the client does not even know the origin is S3.

A call like Bucket.ListObjectsV2 can be done directly against the S3 bucket, but not against CloudFront in front of S3.

@rpattcorner is right that what you need to make direct S3 access work with the solution here, is a Cognito Identity Pool. With that you need to create a web app that uses the JWTs that this solution places in the cookies, and trades them in for AWS credentials using the Cognito Identity Pool. With those credentials you can then use eg the s3-bucket-listing solution you mention.

Since this question comes by more often, it would be great to document in this repo how to setup an identity pool, and do direct bucket access. Maybe even add a parameter "CreateIdentityPool" to make it more easy. That's a fair amount of work though.

from cloudfront-authorization-at-edge.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.