DEV: enable CORS to all CDN get requests from workbox. (#11896)

To prevent opaque cache files, now all the CDN files will be requested in 'cors' mode if the cdn_cors_enabled global setting is enabled. Before enabling the setting, should enable the cors in the CDN server by adding the response header `access-control-allow-origin: *` or `access-control-allow-origin: https://discourse.example.com.`

And other external file requests other than CDN will not be cached if the response type is opaque.

app/assets/javascripts/service-worker.js.erb

@@ -4,24 +4,109 @@ importScripts("<%= "#{Discourse.asset_host}#{Discourse.base_path}/javascripts/wo
 
 workbox.setConfig({
   modulePathPrefix: "<%= "#{Discourse.asset_host}#{Discourse.base_path}/javascripts/workbox" %>",
-  debug: false
+  debug: <%= Rails.env.development? %>
 });
 
 var authUrl = "<%= Discourse.base_path %>/auth/";
 
 var cacheVersion = "1";
+var discourseCacheName = "discourse-" + cacheVersion;
+var externalCacheName = "external-" + cacheVersion;
 
 // Cache all GET requests, so Discourse can be used while offline
+
 workbox.routing.registerRoute(
   function(args) {
-    return !(args.url.origin === location.origin && args.url.pathname.startsWith(authUrl));
+    return args.url.origin === location.origin && !args.url.pathname.startsWith(authUrl);
   }, // Match all except auth routes
   new workbox.strategies.NetworkFirst({ // This will only use the cache when a network request fails
-    cacheName: "discourse-" + cacheVersion,
+    cacheName: discourseCacheName,
     plugins: [
+      new workbox.cacheableResponse.Plugin({
+        statuses: [200] // opaque responses will return status code '0'
+      }), // for s3 secure media signed urls
       new workbox.expiration.Plugin({
         maxAgeSeconds: 7* 24 * 60 * 60, // 7 days
-        maxEntries: 500,
+        maxEntries: 250,
+        purgeOnQuotaError: true, // safe to automatically delete if exceeding the available storage
+      }),
+    ],
+  })
+);
+
+var cdnUrls = [];
+
+<% if GlobalSetting.try(:cdn_cors_enabled) %>
+cdnUrls = ["<%= "#{GlobalSetting.s3_cdn_url}" %>", "<%= "#{GlobalSetting.cdn_url}" %>"].filter(Boolean);
+
+if (cdnUrls.length > 0) {
+  var cdnCacheName = "cdn-" + cacheVersion;
+
+  var appendQueryStringPlugin = {
+    requestWillFetch: function (args) {
+      var request = args.request;
+
+      if (request.url.includes("avatar") || request.url.includes("emoji")) {
+        var url = new URL(request.url);
+        // Using this temporary query param to force browsers to redownload images from server.
+        url.searchParams.append('refresh', 'true');
+        return new Request(url.href, request);
+      }
+
+      return request;
+    }
+  };
+
+  workbox.routing.registerRoute(
+    function(args) {
+      var matching = cdnUrls.filter(
+        function(url) {
+          return args.url.href.startsWith(url);
+        }
+      );
+      return matching.length > 0;
+    }, // Match all cdn resources
+    new workbox.strategies.NetworkFirst({ // This will only use the cache when a network request fails
+      cacheName: cdnCacheName,
+      fetchOptions: {
+        mode: 'cors',
+        credentials: 'omit'
+      },
+      plugins: [
+        new workbox.expiration.Plugin({
+          maxAgeSeconds: 7* 24 * 60 * 60, // 7 days
+          maxEntries: 250,
+          purgeOnQuotaError: true, // safe to automatically delete if exceeding the available storage
+        }),
+        appendQueryStringPlugin
+      ],
+    })
+  );
+}
+<% end %>
+
+workbox.routing.registerRoute(
+  function(args) {
+    if (args.url.origin === location.origin) {
+      return false;
+    }
+
+    var matching = cdnUrls.filter(
+      function(url) {
+        return args.url.href.startsWith(url);
+      }
+    );
+    return matching.length === 0;
+  }, // Match all other external resources
+  new workbox.strategies.NetworkFirst({ // This will only use the cache when a network request fails
+    cacheName: externalCacheName,
+    plugins: [
+      new workbox.cacheableResponse.Plugin({
+        statuses: [200] // opaque responses will return status code '0'
+      }),
+      new workbox.expiration.Plugin({
+        maxAgeSeconds: 7* 24 * 60 * 60, // 7 days
+        maxEntries: 250,
         purgeOnQuotaError: true, // safe to automatically delete if exceeding the available storage
       }),
     ],

lib/tasks/javascript.rake

@@ -161,6 +161,10 @@ def dependencies
       destination: 'workbox',
       public: true,
       skip_versioning: true
+    }, {
+      source: 'workbox-cacheable-response/build/.',
+      destination: 'workbox',
+      public: true
     }, {
       source: '@popperjs/core/dist/umd/popper.js'
     }, {

package.json

@@ -31,6 +31,7 @@
     "pikaday": "1.8.0",
     "resumablejs": "1.1.0",
     "spectrum-colorpicker": "1.8.0",
+    "workbox-cacheable-response": "^4.3.1",
     "workbox-core": "^4.3.1",
     "workbox-expiration": "^4.3.1",
     "workbox-routing": "^4.3.1",

public/javascripts/workbox/workbox-cacheable-response.dev.js

@@ -0,0 +1,200 @@
+this.workbox = this.workbox || {};
+this.workbox.cacheableResponse = (function (exports, WorkboxError_mjs, assert_mjs, getFriendlyURL_mjs, logger_mjs) {
+  'use strict';
+
+  try {
+    self['workbox:cacheable-response:4.3.1'] && _();
+  } catch (e) {} // eslint-disable-line
+
+  /*
+    Copyright 2018 Google LLC
+
+    Use of this source code is governed by an MIT-style
+    license that can be found in the LICENSE file or at
+    https://opensource.org/licenses/MIT.
+  */
+  /**
+   * This class allows you to set up rules determining what
+   * status codes and/or headers need to be present in order for a
+   * [`Response`](https://developer.mozilla.org/en-US/docs/Web/API/Response)
+   * to be considered cacheable.
+   *
+   * @memberof workbox.cacheableResponse
+   */
+
+  class CacheableResponse {
+    /**
+     * To construct a new CacheableResponse instance you must provide at least
+     * one of the `config` properties.
+     *
+     * If both `statuses` and `headers` are specified, then both conditions must
+     * be met for the `Response` to be considered cacheable.
+     *
+     * @param {Object} config
+     * @param {Array<number>} [config.statuses] One or more status codes that a
+     * `Response` can have and be considered cacheable.
+     * @param {Object<string,string>} [config.headers] A mapping of header names
+     * and expected values that a `Response` can have and be considered cacheable.
+     * If multiple headers are provided, only one needs to be present.
+     */
+    constructor(config = {}) {
+      {
+        if (!(config.statuses || config.headers)) {
+          throw new WorkboxError_mjs.WorkboxError('statuses-or-headers-required', {
+            moduleName: 'workbox-cacheable-response',
+            className: 'CacheableResponse',
+            funcName: 'constructor'
+          });
+        }
+
+        if (config.statuses) {
+          assert_mjs.assert.isArray(config.statuses, {
+            moduleName: 'workbox-cacheable-response',
+            className: 'CacheableResponse',
+            funcName: 'constructor',
+            paramName: 'config.statuses'
+          });
+        }
+
+        if (config.headers) {
+          assert_mjs.assert.isType(config.headers, 'object', {
+            moduleName: 'workbox-cacheable-response',
+            className: 'CacheableResponse',
+            funcName: 'constructor',
+            paramName: 'config.headers'
+          });
+        }
+      }
+
+      this._statuses = config.statuses;
+      this._headers = config.headers;
+    }
+    /**
+     * Checks a response to see whether it's cacheable or not, based on this
+     * object's configuration.
+     *
+     * @param {Response} response The response whose cacheability is being
+     * checked.
+     * @return {boolean} `true` if the `Response` is cacheable, and `false`
+     * otherwise.
+     */
+
+
+    isResponseCacheable(response) {
+      {
+        assert_mjs.assert.isInstance(response, Response, {
+          moduleName: 'workbox-cacheable-response',
+          className: 'CacheableResponse',
+          funcName: 'isResponseCacheable',
+          paramName: 'response'
+        });
+      }
+
+      let cacheable = true;
+
+      if (this._statuses) {
+        cacheable = this._statuses.includes(response.status);
+      }
+
+      if (this._headers && cacheable) {
+        cacheable = Object.keys(this._headers).some(headerName => {
+          return response.headers.get(headerName) === this._headers[headerName];
+        });
+      }
+
+      {
+        if (!cacheable) {
+          logger_mjs.logger.groupCollapsed(`The request for ` + `'${getFriendlyURL_mjs.getFriendlyURL(response.url)}' returned a response that does ` + `not meet the criteria for being cached.`);
+          logger_mjs.logger.groupCollapsed(`View cacheability criteria here.`);
+          logger_mjs.logger.log(`Cacheable statuses: ` + JSON.stringify(this._statuses));
+          logger_mjs.logger.log(`Cacheable headers: ` + JSON.stringify(this._headers, null, 2));
+          logger_mjs.logger.groupEnd();
+          const logFriendlyHeaders = {};
+          response.headers.forEach((value, key) => {
+            logFriendlyHeaders[key] = value;
+          });
+          logger_mjs.logger.groupCollapsed(`View response status and headers here.`);
+          logger_mjs.logger.log(`Response status: ` + response.status);
+          logger_mjs.logger.log(`Response headers: ` + JSON.stringify(logFriendlyHeaders, null, 2));
+          logger_mjs.logger.groupEnd();
+          logger_mjs.logger.groupCollapsed(`View full response details here.`);
+          logger_mjs.logger.log(response.headers);
+          logger_mjs.logger.log(response);
+          logger_mjs.logger.groupEnd();
+          logger_mjs.logger.groupEnd();
+        }
+      }
+
+      return cacheable;
+    }
+
+  }
+
+  /*
+    Copyright 2018 Google LLC
+
+    Use of this source code is governed by an MIT-style
+    license that can be found in the LICENSE file or at
+    https://opensource.org/licenses/MIT.
+  */
+  /**
+   * A class implementing the `cacheWillUpdate` lifecycle callback. This makes it
+   * easier to add in cacheability checks to requests made via Workbox's built-in
+   * strategies.
+   *
+   * @memberof workbox.cacheableResponse
+   */
+
+  class Plugin {
+    /**
+     * To construct a new cacheable response Plugin instance you must provide at
+     * least one of the `config` properties.
+     *
+     * If both `statuses` and `headers` are specified, then both conditions must
+     * be met for the `Response` to be considered cacheable.
+     *
+     * @param {Object} config
+     * @param {Array<number>} [config.statuses] One or more status codes that a
+     * `Response` can have and be considered cacheable.
+     * @param {Object<string,string>} [config.headers] A mapping of header names
+     * and expected values that a `Response` can have and be considered cacheable.
+     * If multiple headers are provided, only one needs to be present.
+     */
+    constructor(config) {
+      this._cacheableResponse = new CacheableResponse(config);
+    }
+    /**
+     * @param {Object} options
+     * @param {Response} options.response
+     * @return {boolean}
+     * @private
+     */
+
+
+    cacheWillUpdate({
+      response
+    }) {
+      if (this._cacheableResponse.isResponseCacheable(response)) {
+        return response;
+      }
+
+      return null;
+    }
+
+  }
+
+  /*
+    Copyright 2018 Google LLC
+
+    Use of this source code is governed by an MIT-style
+    license that can be found in the LICENSE file or at
+    https://opensource.org/licenses/MIT.
+  */
+
+  exports.CacheableResponse = CacheableResponse;
+  exports.Plugin = Plugin;
+
+  return exports;
+
+}({}, workbox.core._private, workbox.core._private, workbox.core._private, workbox.core._private));
+//# sourceMappingURL=workbox-cacheable-response.dev.js.map

public/javascripts/workbox/workbox-cacheable-response.prod.js

@@ -0,0 +1,2 @@
+this.workbox=this.workbox||{},this.workbox.cacheableResponse=function(t){"use strict";try{self["workbox:cacheable-response:4.3.1"]&&_()}catch(t){}class s{constructor(t={}){this.t=t.statuses,this.s=t.headers}isResponseCacheable(t){let s=!0;return this.t&&(s=this.t.includes(t.status)),this.s&&s&&(s=Object.keys(this.s).some(s=>t.headers.get(s)===this.s[s])),s}}return t.CacheableResponse=s,t.Plugin=class{constructor(t){this.i=new s(t)}cacheWillUpdate({response:t}){return this.i.isResponseCacheable(t)?t:null}},t}({});
+//# sourceMappingURL=workbox-cacheable-response.prod.js.map

yarn.lock

@@ -3304,6 +3304,13 @@ wordwrap@^1.0.0:
   resolved "https://registry.yarnpkg.com/wordwrap/-/wordwrap-1.0.0.tgz#27584810891456a4171c8d0226441ade90cbcaeb"
   integrity sha1-J1hIEIkUVqQXHI0CJkQa3pDLyus=
 
+workbox-cacheable-response@^4.3.1:
+  version "4.3.1"
+  resolved "https://registry.yarnpkg.com/workbox-cacheable-response/-/workbox-cacheable-response-4.3.1.tgz#f53e079179c095a3f19e5313b284975c91428c91"
+  integrity sha512-Rp5qlzm6z8IOvnQNkCdO9qrDgDpoPNguovs0H8C+wswLuPgSzSp9p2afb5maUt9R1uTIwOXrVQMmPfPypv+npw==
+  dependencies:
+    workbox-core "^4.3.1"
+
 workbox-core@^4.3.1:
   version "4.3.1"
   resolved "https://registry.yarnpkg.com/workbox-core/-/workbox-core-4.3.1.tgz#005d2c6a06a171437afd6ca2904a5727ecd73be6"