fix(taglist): refreshing page set all digets to sha256:e3b0c44298... due to missing seesion cache (#337)

fix #337

README.md

@@ -167,9 +167,9 @@ services:
     image: registry:2.8.2
     restart: always
     environment:
-      REGISTRY_HTTP_HEADERS_Access-Control-Origin: '[http://registry.example.com]'
+      REGISTRY_HTTP_HEADERS_Access-Control-Allow-Origin: '[http://registry.example.com]'
       REGISTRY_HTTP_HEADERS_Access-Control-Allow-Methods: '[HEAD,GET,OPTIONS,DELETE]'
-      REGISTRY_HTTP_HEADERS_Access-Control-Credentials: '[true]'
+      REGISTRY_HTTP_HEADERS_Access-Control-Allow-Credentials: '[true]'
       REGISTRY_HTTP_HEADERS_Access-Control-Allow-Headers: '[Authorization,Accept,Cache-Control]'
       REGISTRY_HTTP_HEADERS_Access-Control-Expose-Headers: '[Docker-Content-Digest]'
       REGISTRY_STORAGE_DELETE_ENABLED: 'true'

nginx/default.conf

@@ -31,7 +31,8 @@ server {
 #!        proxy_http_version 1.1;
 #!        ${NGINX_PROXY_HEADERS}
 #!        ${NGINX_PROXY_PASS_HEADERS}
-#!        proxy_pass ${NGINX_PROXY_PASS_URL};
+#!        set $registry_server "${NGINX_PROXY_PASS_URL}";
+#!        proxy_pass $registry_server;
 #!    }
 
     #error_page  404              /404.html;

package.json

@@ -1,6 +1,6 @@
 {
   "name": "docker-registry-ui",
-  "version": "2.5.2",
+  "version": "2.5.4",
   "type": "module",
   "scripts": {
     "format": "npm run format-html && npm run format-js && npm run format-riot",

src/components/catalog/catalog-element.riot

@@ -111,7 +111,7 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
           onAuthentication: props.onAuthentication,
           withCredentials: props.isRegistrySecured,
         });
-        oReq.addEventListener('load', function () {
+        oReq.addEventListener('loadend', function () {
           if (this.status === 200) {
             const nbTags = (JSON.parse(this.responseText).tags || []).length;
             self.update({ nbTags });

src/scripts/cache-request.js

@@ -17,16 +17,20 @@ export const getFromCache = (method, url) => {
     return;
   }
   try {
-    return sessionStorage.getItem(sha256);
+    return {
+      responseText: sessionStorage.getItem(`${sha256}/responseText`),
+      dockerContentdigest: sessionStorage.getItem(`${sha256}/dockerContentdigest`),
+    };
   } catch (e) {}
 };
 
-export const setCache = (method, url, responseText) => {
+export const setCache = (method, url, { responseText, dockerContentdigest }) => {
   const sha256 = getSha256(method, url);
   if (!sha256) {
     return;
   }
   try {
-    sessionStorage.setItem(sha256, responseText);
+    sessionStorage.setItem(`${sha256}/responseText`, responseText);
+    sessionStorage.setItem(`${sha256}/dockerContentdigest`, dockerContentdigest);
   } catch (e) {}
 };

src/scripts/http.js

@@ -29,19 +29,23 @@ export class Http {
   }
 
   getContentDigest(cb) {
-    if (this.oReq.hasHeader('Docker-Content-Digest')) {
+    if (this.cache?.dockerContentdigest) {
+      cb(this.cache.dockerContentdigest);
+    } else if (this.oReq.hasHeader('Docker-Content-Digest')) {
       // Same origin or advanced CORS headers set:
       // 'Access-Control-Expose-Headers: Docker-Content-Digest'
       cb(this.oReq.getResponseHeader('Docker-Content-Digest'));
     } else if (window.crypto && window.TextEncoder) {
-      crypto.subtle.digest('SHA-256', new TextEncoder().encode(this.oReq.responseText)).then(function (buffer) {
-        cb(
-          'sha256:' +
-            Array.from(new Uint8Array(buffer))
-              .map((byte) => byte.toString(16).padStart(2, '0'))
-              .join('')
-        );
-      });
+      crypto.subtle
+        .digest('SHA-256', new TextEncoder().encode(this.oReq.responseText || this.cache?.responseText))
+        .then(function (buffer) {
+          cb(
+            'sha256:' +
+              Array.from(new Uint8Array(buffer))
+                .map((byte) => byte.toString(16).padStart(2, '0'))
+                .join('')
+          );
+        });
     } else {
       // IE and old Edge
       // simply do not call the callback and skip the setup downstream
@@ -54,9 +58,9 @@ export class Http {
     switch (e) {
       case 'loadend': {
         self.oReq.addEventListener('loadend', function () {
-          if (this.status === 401 && !this.withCredentials) {
-            const tokenAuth =
-              this.hasHeader('www-authenticate') && parseAuthenticateHeader(this.getResponseHeader('www-authenticate'));
+          const tokenAuth =
+            this.hasHeader('www-authenticate') && parseAuthenticateHeader(this.getResponseHeader('www-authenticate'));
+          if (this.status === 401 && (!this.withCredentials || tokenAuth)) {
             self.onAuthentication(tokenAuth, (bearer) => {
               const req = new XMLHttpRequest();
               req._url = self._url;
@@ -80,7 +84,11 @@ export class Http {
               req.send();
             });
           } else {
-            this.status === 200 && setCache(self._method, self._url, this.responseText);
+            this.status === 200 &&
+              setCache(self._method, self._url, {
+                responseText: this.responseText,
+                dockerContentdigest: this.getResponseHeader('Docker-Content-Digest'),
+              });
             f.bind(this)();
           }
         });
@@ -119,9 +127,10 @@ export class Http {
   }
 
   send() {
-    const responseText = getFromCache(this._method, this._url);
-    if (responseText) {
-      return this._events['loadend'].bind({ status: 200, responseText })();
+    const cache = getFromCache(this._method, this._url);
+    if (cache && cache.responseText) {
+      this.cache = cache;
+      return this._events['loadend'].bind({ status: 200, responseText: cache.responseText })();
     }
     this.oReq.send();
   }