Fix DoS thumbnail generation exploit

src/_h5ai/private/conf/options.json

@@ -234,11 +234,9 @@
     Show an image preview on click.
 
     - types: array of strings
-    - size: number, sample size, or false for original size
     */
     "preview-img": {
         "enabled": true,
-        "size": false,
         "types": ["img", "img-bmp", "img-gif", "img-ico", "img-jpg", "img-png", "img-raw", "img-svg"]
     },
 
@@ -355,7 +353,7 @@
     - mov: array of strings
     - doc: array of strings
     - delay: number, delay in milliseconds after "dom-ready" before thumb-requesting starts
-    - size: number, size in pixel of the generated thumbnails
+    - size: number, height in pixel of the generated thumbnails
     - exif: boolean, use included EXIF thumbs if possible
     - chunksize: int, number of thumbs per request
     */

src/_h5ai/private/php/core/class-context.php

@@ -247,10 +247,12 @@ public function get_l10n($iso_codes) {
 
     public function get_thumbs($requests) {
         $hrefs = [];
+        $height = $this->options['thumbnails']['size'] ?? 240;
+        $width = floor($height * (4 / 3));
 
         foreach ($requests as $req) {
             $thumb = new Thumb($this);
-            $hrefs[] = $thumb->thumb($req['type'], $req['href'], $req['width'], $req['height']);
+            $hrefs[] = $thumb->thumb($req['type'], $req['href'], $width, $height);
         }
 
         return $hrefs;

src/_h5ai/public/css/lib/view/view.less

@@ -48,6 +48,8 @@
         .thumb {
             max-width: none;
             max-height: none;
+            object-fit: cover;
+            object-position: 50% 50%;
         }
     }
 

src/_h5ai/public/js/lib/ext/preview/preview-img.js

@@ -1,11 +1,9 @@
 const {dom} = require('../../util');
-const server = require('../../server');
 const allsettings = require('../../core/settings');
 const preview = require('./preview');
 
 const settings = Object.assign({
     enabled: false,
-    size: null,
     types: []
 }, allsettings['preview-img']);
 const tpl = '<img id="pv-content-img"/>';
@@ -19,34 +17,16 @@ const updateGui = () => {
     const elW = el.offsetWidth;
 
     const labels = [preview.item.label];
-    if (!settings.size) {
-        const elNW = el.naturalWidth;
-        const elNH = el.naturalHeight;
-        labels.push(String(elNW) + 'x' + String(elNH));
-        labels.push(String((100 * elW / elNW).toFixed(0)) + '%');
-    }
-    preview.setLabels(labels);
-};
+    const elNW = el.naturalWidth;
+    const elNH = el.naturalHeight;
+    labels.push(String(elNW) + 'x' + String(elNH));
+    labels.push(String((100 * elW / elNW).toFixed(0)) + '%');
 
-const requestSample = href => {
-    return server.request({
-        action: 'get',
-        thumbs: [{
-            type: 'img',
-            href,
-            width: settings.size,
-            height: 0
-        }]
-    }).then(json => {
-        return json && json.thumbs && json.thumbs[0] ? json.thumbs[0] : null;
-    });
+    preview.setLabels(labels);
 };
 
 const load = item => {
     return Promise.resolve(item.absHref)
-        .then(href => {
-            return settings.size ? requestSample(href) : href;
-        })
         .then(href => new Promise(resolve => {
             const $el = dom(tpl)
                 .on('load', () => resolve($el))

src/_h5ai/public/js/lib/ext/preview/preview.js

@@ -213,7 +213,7 @@ Session.prototype = {
                     }
                 });
                 dom('#pv-container').hide().clr();
-                showSpinner(true, item.thumbSquare || item.icon, 200);
+                showSpinner(true, item.thumbRational || item.icon, 200);
             })
             .then(() => this.load(item))
             // delay for testing

src/_h5ai/public/js/lib/ext/thumbnails.js

@@ -13,7 +13,6 @@ const settings = Object.assign({
     exif: false,
     chunksize: 20
 }, allsettings.thumbnails);
-const landscapeRatio = 4 / 3;
 
 
 const queueItem = (queue, item) => {
@@ -29,33 +28,16 @@ const queueItem = (queue, item) => {
         return;
     }
 
-    if (item.thumbSquare) {
-        item.$view.find('.icon.square img').addCls('thumb').attr('src', item.thumbSquare);
-    } else {
-        queue.push({
-            type,
-            href: item.absHref,
-            ratio: 1,
-            callback: src => {
-                if (src && item.$view) {
-                    item.thumbSquare = src;
-                    item.$view.find('.icon.square img').addCls('thumb').attr('src', src);
-                }
-            }
-        });
-    }
-
     if (item.thumbRational) {
-        item.$view.find('.icon.landscape img').addCls('thumb').attr('src', item.thumbRational);
+        item.$view.find('.icon img').addCls('thumb').attr('src', item.thumbRational);
     } else {
         queue.push({
             type,
             href: item.absHref,
-            ratio: landscapeRatio,
             callback: src => {
                 if (src && item.$view) {
                     item.thumbRational = src;
-                    item.$view.find('.icon.landscape img').addCls('thumb').attr('src', src);
+                    item.$view.find('.icon img').addCls('thumb').attr('src', src);
                 }
             }
         });
@@ -67,8 +49,6 @@ const requestQueue = queue => {
         return {
             type: req.type,
             href: req.href,
-            width: Math.round(settings.size * req.ratio),
-            height: settings.size
         };
     });