'setting up s3 bucket to handle cross origin resource policy

I am facing issues playing audio files from my s3 bucket. I was wondering if I set up the cross origin resource policy poorly.

Here is my server.js file:

app.use(cors());


app.use(function(req, res, next) {
  res.header("Cross-Origin-Resource-Policy", "cross-origin");
  res.header("Cross-Origin-Embedder-Policy", "require-corp");
  res.header("Cross-Origin-Opener-Policy", "same-origin");
  next();
  
});

The error chrome throws me is:

GET https://monkeys.s3.amazonaws.com/sounds/1/6.wav?AWSAccessKeyId={test}&Expires=1627949062&Signature=HkT2CyazqovtjPVpDNKCu9Nsyk8%3D&response-content-disposition=attachment net::ERR_BLOCKED_BY_RESPONSE.NotSameOriginAfterDefaultedToSameOriginByCoep
manage:1 Uncaught (in promise) DOMException: Failed to load because no supported source was found.

My bucket is set up like this in the cors section:

[
    {
        "AllowedHeaders": [
            "*"
        ],
        "AllowedMethods": [
            "GET",
            "PUT",
            "POST",
            "DELETE"
        ],
        "AllowedOrigins": [
            "https://telecurve.herokuapp.com/manage"
        ],
        "ExposeHeaders": []
    },
    {
        "AllowedHeaders": [
            "*"
        ],
        "AllowedMethods": [
            "GET",
            "PUT",
            "POST",
            "DELETE"
        ],
        "AllowedOrigins": [
            "https://telecurve.herokuapp.com/"
        ],
        "ExposeHeaders": []
    },
    {
        "AllowedHeaders": [],
        "AllowedMethods": [
            "GET"
        ],
        "AllowedOrigins": [
            "*"
        ],
        "ExposeHeaders": []
    }
]

Anything im missing? I've been at this for days and can't seem to find out why. I have more posts detailing the code side if you need more context! Desperately need help.

node.jsexpressaws-lambda


Solution 1:[1]

If I'm not mistaken, the headers you return in your app.js prevent the browser from loading URLs hosted on other domains.

I -accidentally- did the same thing by adding the following headers to a website's responses in my equivalent script of your "app.use(...)":

enter code here
Access-Control-Allow-Origin = "*"
Cross-Origin-Opener-Policy = "same-origin"

More on how to keep these headers and yet be able to access the resource on "the other domain", as well as the explanation on these headers: https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Cross-Origin-Embedder-Policy

In the end, I removed the headers, and -of course- it worked.

Solution 2:[2]

This is super confusing, but I got it.

My node.js app

app.use(cors());

app.use(function(_req, res, next) {
  res.setHeader("Content-Security-Policy", "script-src 'self' https://xxxxx.s3.amazonaws.com");
  res.header("Cross-Origin-Embedder-Policy", "unsafe-none");
  return next();
});

My S3 bucket's CORS

[
    {
        "AllowedHeaders": [
            "*"
        ],
        "AllowedMethods": [
            "GET"
        ],
        "AllowedOrigins": [
            "*"
        ],
        "ExposeHeaders": []
    }
]

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Patrice Kerremans
Solution 2 user2790103

Related Questions