What steps should I take to manage a non-CORS contaminated browser cache caused by AWS S3 when using a Service Worker?

Question

What steps should I take to manage a non-CORS contaminated browser cache caused by AWS S3 when using a Service Worker?

Within my company, there are numerous applications that rely on shared resources stored on AWS S3. Some of these applications utilize the crossorigin="anonymous" HTML element, while others do not. One issue we face is that AWS does not send back CORS response headers such as 'Allow-access-control-origin' when no Origin request header is present. This can result in users encountering browser cache versions of files that lack CORS response headers.

As a consequence, users accessing our team's application may experience failures with the Service Worker due to the non-CORS format of assets stored in the browser disk cache. The error message typically appears as follows:

No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:8001' is therefore not allowed access. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

Using an opaque response for reliable caching is not a viable solution.

I have explored the option of applying a cache-control request header to bypass the browser cache. However, the Headers object within the Fetch API Request is immutable, preventing me from adding headers to the existing request. Creating a new Request also poses challenges since I cannot receive a CORS response from AWS due to the forbidden nature of setting the Origin header in the Fetch API.

Potential solutions to this problem could involve:

Requiring all teams within the company to use the crossorigin HTML attribute, which unfortunately is not feasible.
Making AWS consistently respond with CORS headers, yet this is beyond my control.
Executing a Fetch Request with an Origin header, which is currently restricted.
Persuading my organization to implement cache-control headers that prevent browser caching of assets, though this might not be ideal.

Are there any steps I can take to address this challenge? At present, my interim solution involves disabling Service Worker caching for these shared assets to mitigate network issues.

javascript amazon-s3 cors service-worker

Answer 1

Answer №1

If only I could send a Fetch Request with an Origin header, my problem would be fixed.

To achieve this, you need to create your own Request and explicitly specify the mode as 'cors'. Here's how you can do it:

const failingRequest = new Request('https://example.com', {
  mode: 'cors'
});
fetch(failingRequest).then(console.log).catch(console.warn);

const successfulRequest = new Request('https://cors-test.appspot.com/test', {
  mode: 'cors'
});
fetch(successfulRequest).then(console.log).catch(console.warn);

When you run this code, you will notice that CORS-enabled requests are sent to both https://example.com and

https://cors-test.appspot.com/test

. The first request will fail because the server doesn't support CORS, while the second one will succeed and return a non-opaque Response object.

Answer 2

If only I could send a Fetch Request with an Origin header, my problem would be fixed.

To achieve this, you need to create your own Request and explicitly specify the mode as 'cors'. Here's how you can do it:

const failingRequest = new Request('https://example.com', {
  mode: 'cors'
});
fetch(failingRequest).then(console.log).catch(console.warn);

const successfulRequest = new Request('https://cors-test.appspot.com/test', {
  mode: 'cors'
});
fetch(successfulRequest).then(console.log).catch(console.warn);

When you run this code, you will notice that CORS-enabled requests are sent to both https://example.com and

https://cors-test.appspot.com/test

. The first request will fail because the server doesn't support CORS, while the second one will succeed and return a non-opaque Response object.

Answer 3

Answer №2

It seems that we are seeking greater control over how caching is managed by our service worker, similar to the new cache option available in Firefox as explained here: There is an ongoing issue in Chromium regarding the implementation of this feature which can be found at: https://bugs.chromium.org/p/chromium/issues/detail?id=453190

In an ideal scenario, we would like to utilize the following code snippet:

  // Download a resource with cache busting, to bypass the cache
  // completely.
  fetch("some.json", {cache: "no-store"}) // or "reload"
    .then(function(response) { /* consume the response */ });

Answer 4

It seems that we are seeking greater control over how caching is managed by our service worker, similar to the new cache option available in Firefox as explained here: There is an ongoing issue in Chromium regarding the implementation of this feature which can be found at: https://bugs.chromium.org/p/chromium/issues/detail?id=453190

In an ideal scenario, we would like to utilize the following code snippet:

  // Download a resource with cache busting, to bypass the cache
  // completely.
  fetch("some.json", {cache: "no-store"}) // or "reload"
    .then(function(response) { /* consume the response */ });

Answer 5

Answer №3

Deciding to have my application request all shared assets with a unique query string tailored to my app feels a bit unconventional, but I'm hoping it will do the trick.

UPDATE - Thanks to some advice from Jeff, I've found a solution that eliminates the need for browser cache busting. Instead, I'll always turn to network requests when the service worker requires an asset. My approach involves making a CORS request that bypasses the browser disk cache:

function respondWithCacheOrNetwork(event) {
  var headers = new Headers();
  event.request.headers.forEach((v, k) => { headers.set(k, v); });
  // Copy the old headers, cannot modify because immutable
  headers.set('cache-control', 'no-cache');
  var skipBrowserCacheRequest = new Request(event.request.url,
    {
      mode: 'cors',
      method: event.request.method,
      headers: headers
    }
  );
    event.respondWith(toolbox.cacheFirst(skipBrowserCacheRequest));
}

Answer 6

Deciding to have my application request all shared assets with a unique query string tailored to my app feels a bit unconventional, but I'm hoping it will do the trick.

UPDATE - Thanks to some advice from Jeff, I've found a solution that eliminates the need for browser cache busting. Instead, I'll always turn to network requests when the service worker requires an asset. My approach involves making a CORS request that bypasses the browser disk cache:

function respondWithCacheOrNetwork(event) {
  var headers = new Headers();
  event.request.headers.forEach((v, k) => { headers.set(k, v); });
  // Copy the old headers, cannot modify because immutable
  headers.set('cache-control', 'no-cache');
  var skipBrowserCacheRequest = new Request(event.request.url,
    {
      mode: 'cors',
      method: event.request.method,
      headers: headers
    }
  );
    event.respondWith(toolbox.cacheFirst(skipBrowserCacheRequest));
}

What steps should I take to manage a non-CORS contaminated browser cache caused by AWS S3 when using a Service Worker?

Answer №1

Answer №2

Answer №3

Similar questions

Enhance the flight experience of a helicopter with jQuery game by adding smoother controls

Guide to utilizing a JWT token within an httpOnly cookie for accessing a secured API endpoint

Retrieving latitude and longitude data from an array of objects in a React application

Using Ajax to send a button click to a PHP script, which in turn communicates with a serial device

What is the method for defining the maximum stack size in a node.js environment?

Designing a query feature to explore a Sequel Database utilizing a 'RETRIEVE' approach

Creating bidirectional data binding in JavaScript with the createElement render function for Vue components

What steps can I take to combine the values from an array of dictionaries?

Attempting to keep a:active state active until another link is clicked

I am encountering an issue where the nested loop in Angular TypeScript is failing to return

What is the best way to ensure that my $.ajax POST call works seamlessly with SSL?

Troubleshooting Async Function compatibility between Express and NestJs

Steps to open a URL link within a div without navigating away from the current page

Issue encountered while attempting to transfer React build files to S3 via AWS CLI within a Dockerfile

Ways to showcase the resulting answer using vue.js?

Condense items into objects and arrays when the Express query yields multiple objects in a many-to-many query

Utilizing the chartjs-plugin-datalabels in conjunction with vue-chart.js for customizing data labels on specific charts

Placing files in the "Dist" folder is causing an issue by disrupting the functionality of the Angular 2 app

I'm having trouble importing sqlite3 and knex-js into my Electron React application

Tips for parsing nested json data and loading it into Redshift