title: AWS S3 Bucket policy/access from URL referer - access denied
body: <p>My problem is maybe trivial, but I can't find the good example or straight answer anywhere...</p>
  <p><strong>My setup:</strong></p>
  <ul>
  <li>Web app client written using Apollo and ReactJS</li>
  <li>Server/API written using Apollo, ReactJS and GraphQL</li>
  <li>Database: Mongoose</li>
  </ul>
  <p><strong>What I want to achieve:</strong></p>
  <p>I want to upload files via browser using my application straight to Amazon S3 bucket and have the ability to later list those files with thumbnails (if those are images) in the app.</p>
  <p>I have everything setup nicely when it comes to uploading to S3. I'm using AWS JS SDK, have setup API key and secret, all in all, good.</p>
  <p><strong>The problem:</strong></p>
  <p>Everything works properly as long as my bucket is completely <strong>public</strong>.
  But of course I don't want it to be public. This app will be for company internal use only, files or anything, can't be available to the public...</p>
  <p>When I switch of public access to the bucket, I'm not longer able to even upload the files through my app, needless to say, I'm not able to see the files in my app...</p>
  <p>I was trying to implement some bucket policy, that would allow files to be uploaded or seen if the referrer came from one of the IP addresses that I use to reach my app in the browser, but that did not work at all... <em>(IP addresses shown in my policy below are not the one I'm using of course, I change them here for privacy)</em></p>
  <pre><code>{
      &quot;Version&quot;: &quot;2012-10-17&quot;,
      &quot;Id&quot;: &quot;http referer policy example&quot;,
      &quot;Statement&quot;: [
          {
              &quot;Sid&quot;: &quot;Allow get requests originating from 1.1.1.1:3000&quot;,
              &quot;Effect&quot;: &quot;Allow&quot;,
              &quot;Principal&quot;: &quot;*&quot;,
              &quot;Action&quot;: &quot;*&quot;,
              &quot;Resource&quot;: &quot;arn:aws:s3:::escape-dam/*&quot;,
              &quot;Condition&quot;: {
                  &quot;StringLike&quot;: {
                      &quot;aws:Referer&quot;: &quot;http://1.1.1.1:3000/*, http://1.1.1.1:4000/*, http://2.2.2.2:3000/*, http://2.2.2.2:4000/*&quot;
                  }
              }
          }
      ]
  }
  </code></pre>
  <p><strong>Dream solution:</strong></p>
  <p>Policy written in such a way, that my app will be able to send and receive files from S3 Bucket, without having to authorise each request. Basically, if you want to upload or request the file through the app you're allowed to, but not when trying to copy and paste the URL into the browser.</p>
  <p><em><strong>As an addition I have to state, that because this is an ReactJS app, it does not ask for the files from S3 Bucket itself. It passes the stored URI from the database to the client side of the app, which later gets rendered with the page itself, so not the server asks S3 for the file, but the user's browser does. I hope this clarify my problem in it's entirety ;)</strong></em></p>
  <p>I hope I'm clear here and do not overstate something trivial, but I'm pretty new when it comes to dealing with S3</p>
  <p>Thank you in advance for any help!</p>