@abtnode/blocklet-services 1.16.14-beta-9743e8e2 → 1.16.14-beta-c775fe49

package/api/index.js

@@ -30,6 +30,7 @@ const BlockletEventsNotifier = require('./services/notification/blocklet-events-
 const { init: initAuth } = require('./services/auth');
 const { init: initDashboard } = require('./services/dashboard');
 const StaticService = require('./services/static');
+const initImageService = require('./services/image');
 const StudioService = require('./services/studio');
 const AnalyticService = require('./services/analytics');
 const createEnvRoutes = require('./routes/env');
@@ -89,6 +90,7 @@ module.exports = function createServer(node, serverOptions = {}) {
   const { middlewares: authMiddlewares, routes: authRoutes, ensureWsUser } = initAuth({ node, options });
   const notificationService = initNotification({ node });
   const relayService = initRelay({ node });
+  const imageService = initImageService({ node });
   const dashboardService = initDashboard({ node, ensureWsUser });
 
   // Proxy engine
@@ -303,9 +305,12 @@ module.exports = function createServer(node, serverOptions = {}) {
     try {
       const { target } = await ensureProxyUrl(req);
       if (target) {
-        proxy.safeWeb(req, res, {
-          target,
-        });
+        if (imageService.isImageAccepted(req) && imageService.isImageRequest(req)) {
+          req.target = target; // for internal use
+          imageService.processImage(req, res);
+        } else {
+          proxy.safeWeb(req, res, { target });
+        }
       } else {
         throw new Error('empty proxy target');
       }

package/api/libs/error.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="300" height="200" viewBox="0 0 300 200"><rect width="100%" height="100%" fill="#DDDDDD"/><path fill="#999999" d="M112.5 94.58q0 5.4-1.79 10.01-1.78 4.61-5.05 7.97-3.26 3.37-7.85 5.26-4.59 1.88-10.2 1.88-5.58 0-10.17-1.88-4.59-1.89-7.87-5.26-3.28-3.36-5.08-7.97-1.8-4.61-1.8-10.01 0-5.41 1.8-10.02 1.8-4.6 5.08-7.97 3.28-3.36 7.87-5.25 4.59-1.89 10.17-1.89 3.74 0 7.04.87 3.29.87 6.05 2.45 2.75 1.58 4.94 3.84 2.2 2.26 3.73 5.05 1.53 2.79 2.33 6.05t.8 6.87Zm-9.35 0q0-4.05-1.09-7.26t-3.1-5.46q-2-2.24-4.88-3.43-2.87-1.19-6.47-1.19-3.61 0-6.48 1.19-2.87 1.19-4.9 3.43-2.02 2.25-3.11 5.46-1.08 3.21-1.08 7.26 0 4.04 1.08 7.26 1.09 3.21 3.11 5.44 2.03 2.22 4.9 3.41 2.87 1.19 6.48 1.19 3.6 0 6.47-1.19 2.88-1.19 4.88-3.41 2.01-2.23 3.1-5.44 1.09-3.22 1.09-7.26Zm31.51-10.85q3.88 0 7.06 1.26 3.18 1.26 5.44 3.57 2.26 2.31 3.48 5.64 1.23 3.34 1.23 7.45 0 4.15-1.23 7.48-1.22 3.33-3.48 5.68-2.26 2.34-5.44 3.6-3.18 1.26-7.06 1.26-3.91 0-7.1-1.26-3.2-1.26-5.46-3.6-2.26-2.35-3.5-5.68-1.24-3.33-1.24-7.48 0-4.11 1.24-7.45 1.24-3.33 3.5-5.64 2.26-2.31 5.46-3.57 3.19-1.26 7.1-1.26Zm0 29.48q4.36 0 6.45-2.92 2.09-2.93 2.09-8.57 0-5.65-2.09-8.6-2.09-2.96-6.45-2.96-4.42 0-6.54 2.97-2.13 2.98-2.13 8.59 0 5.61 2.13 8.55 2.12 2.94 6.54 2.94Zm32.03-18.73v15.64q1.43 1.73 3.11 2.44 1.69.72 3.66.72 1.9 0 3.43-.72 1.53-.71 2.6-2.17t1.65-3.69q.58-2.23.58-5.25 0-3.06-.49-5.19-.5-2.12-1.41-3.45-.92-1.33-2.23-1.94-1.31-.61-2.98-.61-2.61 0-4.45 1.1-1.84 1.11-3.47 3.12Zm-1.12-8.67.68 3.23q2.14-2.42 4.86-3.91 2.72-1.5 6.39-1.5 2.86 0 5.22 1.19 2.37 1.19 4.08 3.45 1.72 2.26 2.66 5.58.93 3.31.93 7.6 0 3.91-1.05 7.24-1.06 3.33-3.01 5.78-1.96 2.45-4.73 3.82-2.77 1.38-6.2 1.38-2.93 0-5-.9-2.08-.9-3.71-2.5v14.28h-8.4V84.28h5.14q1.63 0 2.14 1.53Zm54.54 2.24-1.91 3.03q-.34.54-.71.76-.38.22-.95.22-.62 0-1.31-.34-.7-.34-1.62-.76-.92-.43-2.09-.77t-2.77-.34q-2.48 0-3.89 1.06-1.41 1.05-1.41 2.75 0 1.12.73 1.89.73.76 1.93 1.34 1.21.58 2.74 1.04 1.53.46 3.11 1 1.58.54 3.11 1.24 1.53.7 2.74 1.77 1.21 1.07 1.94 2.57.73 1.49.73 3.6 0 2.52-.9 4.64-.9 2.13-2.67 3.67-1.77 1.55-4.37 2.42-2.6.86-6 .86-1.8 0-3.52-.32t-3.3-.9q-1.58-.58-2.92-1.36-1.34-.78-2.36-1.7l1.93-3.2q.38-.57.89-.88.51-.31 1.29-.31t1.48.45q.7.44 1.61.95.92.51 2.16.95 1.24.44 3.15.44 1.49 0 2.56-.36 1.08-.35 1.77-.93.7-.58 1.02-1.34.33-.77.33-1.58 0-1.23-.73-2.01-.74-.78-1.94-1.36-1.21-.58-2.76-1.04-1.54-.46-3.16-1-1.61-.54-3.16-1.27-1.55-.74-2.76-1.86-1.2-1.12-1.93-2.75t-.73-3.95q0-2.14.85-4.08.85-1.93 2.5-3.38 1.64-1.44 4.11-2.31 2.46-.87 5.69-.87 3.61 0 6.57 1.19 2.95 1.19 4.93 3.13ZM228.3 70h7.89v19.44q0 3.1-.31 6.07-.3 2.98-.78 6.31h-5.71q-.48-3.33-.78-6.31-.31-2.97-.31-6.07V70Zm-1.33 44.54q0-1.06.4-2.01.39-.95 1.08-1.63.7-.68 1.65-1.09.95-.41 2.04-.41 1.06 0 2.01.41.95.41 1.65 1.09.69.68 1.1 1.63.41.95.41 2.01 0 1.08-.41 2.02-.41.93-1.1 1.61-.7.68-1.65 1.08-.95.39-2.01.39-1.09 0-2.04-.39-.95-.4-1.65-1.08-.69-.68-1.08-1.61-.4-.94-.4-2.02Z"/></svg>

package/api/libs/image.js

@@ -0,0 +1,235 @@
+// A simple image service based on sharp
+// @link https://sharp.pixelplumbing.com/
+const fs = require('fs-extra');
+const path = require('path');
+const sharp = require('sharp');
+const { Joi } = require('@arcblock/validator');
+const stringify = require('json-stable-stringify');
+const md5 = require('@abtnode/util/lib/md5');
+const formatError = require('@abtnode/util/lib/format-error');
+
+const logger = require('@abtnode/logger')(require('../../../../package.json').name);
+
+const errorImage = path.resolve(__dirname, './error.svg');
+
+const FORMATS = ['png', 'jpeg', 'webp', 'avif', 'heif'];
+const OPERATIONS = ['none', 'resize', 'crop'];
+const QUALITIES = {
+  png: 100,
+  jpeg: 80,
+  webp: 80,
+  avif: 50,
+  heif: 50,
+};
+
+const EXTENSIONS = {
+  png: 'png',
+  jpeg: 'jpeg',
+  jpg: 'jpeg',
+  webp: 'webp',
+  avif: 'avif',
+  heif: 'heif',
+};
+
+const schema = Joi.object({
+  imageFilter: Joi.string()
+    .valid(...OPERATIONS)
+    .required(),
+
+  w: Joi.number().integer().min(1).max(2048).when('imageFilter', {
+    is: 'crop',
+    then: Joi.required(),
+    otherwise: Joi.optional(),
+  }),
+  h: Joi.number().integer().min(1).max(2048).when('imageFilter', {
+    is: 'crop',
+    then: Joi.required(),
+    otherwise: Joi.optional(),
+  }),
+
+  q: Joi.number()
+    .integer()
+    .min(10)
+    .max(100)
+    .default((input) => {
+      if (input.f && QUALITIES[input.f]) {
+        return QUALITIES[input.f];
+      }
+      return 90;
+    }),
+
+  p: Joi.number().valid(0, 1).optional().default(1), // progressive
+  g: Joi.number().valid(0, 1).optional().default(0), // greyscale
+  r: Joi.number().integer().valid(90, 180, 270).optional(), // rotate
+  s: Joi.number().integer().min(0).max(2000).optional(), // sharpen
+  b: Joi.number().integer().min(1).max(2000).optional(), // blur
+  a: Joi.number().valid(0, 1).optional().default(1), // alpha channel, transparency
+  n: Joi.number().valid(0, 1).optional().default(0), // negative
+
+  // image format
+  f: Joi.string()
+    .valid(...FORMATS)
+    .optional(),
+
+  // resize positions
+  m: Joi.string().valid('cover', 'contain', 'fill', 'inside', 'outside').optional().default('inside'),
+
+  // crop positions
+  t: Joi.number().integer().min(0).max(2048).optional().default(0),
+  l: Joi.number().integer().min(0).max(2048).optional().default(0),
+
+  e: Joi.number().valid(0, 1).optional().default(0), // return error
+})
+  .or('w', 'h')
+  .rename('i', 'p')
+  .options({ stripUnknown: true, allowUnknown: true, noDefaults: false });
+
+const isImageAccepted = (req) => {
+  return FORMATS.some((x) => req.accepts(`image/${x}`));
+};
+
+const isImageRequest = (req) => {
+  if (req.method !== 'GET') {
+    return false;
+  }
+  if (!req.query.imageFilter) {
+    return false;
+  }
+  const { error, value } = schema.validate(req.query);
+  if (error) {
+    logger.warn('image service filter params invalid:', formatError(error));
+    return false;
+  }
+
+  req.imageFilter = value;
+  return true;
+};
+
+const tasks = {};
+const processAndRespond = (req, res, cacheDir, getSrc) => {
+  if (fs.existsSync(cacheDir) === false) {
+    fs.mkdirSync(cacheDir, { recursive: true });
+  }
+
+  const params = req.imageFilter;
+  const extension = path.extname(req.path).slice(1);
+  if (!extension && !params.f) {
+    res.status(400).send('Image filter failed: either extension or format must be specified');
+    return;
+  }
+
+  const cacheKey = md5(stringify({ target: req.target, path: req.path, params }));
+  const destPath = path.join(cacheDir, `${cacheKey}.${params.f || extension}`);
+  if (fs.existsSync(destPath)) {
+    res.header('Content-Type', `image/${params.f || extension}`);
+    res.sendFile(destPath, { maxAge: '356d', immutable: true });
+    return;
+  }
+
+  // do the convert
+  tasks[cacheKey] ??= getSrc(req)
+    .then(([src, ext]) => processImage(src, ext, destPath, params))
+    .finally(() => {
+      setTimeout(() => {
+        delete tasks[cacheKey];
+      }, 1000);
+    });
+
+  tasks[cacheKey]
+    .then(() => {
+      logger.info('image filter succeed', { params, url: req.url, destPath });
+      res.header('Content-Type', `image/${params.f || extension}`);
+      res.sendFile(destPath, { maxAge: '356d', immutable: true });
+    })
+    .catch((err) => {
+      logger.error('image filter failed', { error: err, params, url: req.url });
+      if (params.e) {
+        res.status(500).send(`Image service error: ${err.message}`);
+      } else {
+        res.status(500);
+        res.sendFile(errorImage, { maxAge: '0' });
+      }
+    });
+};
+
+const processImage = (src, extension, dest, params) => {
+  return new Promise((resolve, reject) => {
+    const {
+      imageFilter,
+      w: width,
+      h: height,
+      t: top,
+      l: left,
+      q: quality,
+      f: format,
+      m: mode,
+      r: rotate,
+      p: progressive,
+      g: greyscale,
+      b: blur,
+      a: transparency,
+      n: negative,
+      s: sharpen,
+    } = params;
+
+    const dimensions = { top, left };
+    if (width) {
+      dimensions.width = width;
+    }
+    if (height) {
+      dimensions.height = height;
+    }
+
+    const pipeline = sharp().timeout({ seconds: 8 });
+    if (rotate) {
+      pipeline.rotate(rotate);
+    }
+    if (imageFilter === 'resize') {
+      pipeline.resize({ ...dimensions, fit: mode, withoutEnlargement: true });
+    }
+    if (imageFilter === 'crop') {
+      pipeline.extract(dimensions);
+    }
+
+    if (sharpen) {
+      pipeline.sharpen(sharpen);
+    }
+    if (blur) {
+      pipeline.blur(blur);
+    }
+    if (greyscale) {
+      pipeline.greyscale();
+    }
+    if (transparency) {
+      pipeline.ensureAlpha();
+    } else {
+      pipeline.removeAlpha();
+    }
+    if (negative) {
+      pipeline.negate();
+    }
+
+    // output stream
+    const out = fs.createWriteStream(dest);
+    out.on('close', () => {
+      resolve(dest);
+    });
+
+    out.on('error', (error) => {
+      reject(error);
+    });
+
+    pipeline[format || EXTENSIONS[extension]]({ quality, progressive: !!progressive, force: true });
+
+    // run the pipeline
+    src.pipe(pipeline).pipe(out);
+  });
+};
+
+module.exports = {
+  isImageAccepted,
+  isImageRequest,
+  processAndRespond,
+  processImage,
+  EXTENSIONS,
+};

package/api/routes/blocklet.js

@@ -1,5 +1,6 @@
 /* eslint-disable no-console */
 const fs = require('fs');
+const path = require('path');
 const cloneDeep = require('lodash/cloneDeep');
 const dayjs = require('@abtnode/util/lib/dayjs');
 const JWT = require('@arcblock/jwt');
@@ -41,6 +42,7 @@ const { createDownloadLogStream } = require('@abtnode/core/lib/util/log');
 const { BlockletStatus } = require('@blocklet/constant');
 
 const { checkAdminPermission } = require('../middlewares/check-permission');
+const { isImageAccepted, isImageRequest, processAndRespond } = require('../libs/image');
 
 const polishBlocklet = (doc) => {
   const res = cloneDeep(doc);
@@ -110,6 +112,7 @@ module.exports = {
       cacheError
     );
 
+    const cacheDir = path.join(node.dataDirs.cache, 'services', 'image');
     server.get(`${prefix}${USER_AVATAR_PATH_PREFIX}/:fileName`, async (req, res) => {
       const sendOptions = { maxAge: '1y' };
 
@@ -131,7 +134,14 @@ module.exports = {
           return;
         }
 
-        res.sendFile(avatarFile, sendOptions);
+        if (isImageAccepted(req) && isImageRequest(req)) {
+          const appDir = path.join(cacheDir, blocklet.appPid);
+          processAndRespond(req, res, appDir, () =>
+            Promise.resolve([fs.createReadStream(avatarFile), path.extname(avatarFile).slice(1)])
+          );
+        } else {
+          res.sendFile(avatarFile, sendOptions);
+        }
       } catch (err) {
         logger.error('failed to send user avatar', { fileName: req.params.fileName, error: err });
         res.status(500).send(err.message);

package/api/services/image/index.js

@@ -0,0 +1,61 @@
+// A simple image service based on sharp
+// @link https://sharp.pixelplumbing.com/
+const http = require('http');
+const path = require('path');
+
+const logger = require('@abtnode/logger')(require('../../../package.json').name);
+
+const { isImageAccepted, isImageRequest, processAndRespond, EXTENSIONS } = require('../../libs/image');
+
+const createImageService = ({ node }) => {
+  const getUpstreamImage = (req) => {
+    return new Promise((resolve, reject) => {
+      const upstream = new URL(req.url, req.target);
+      http
+        .request(
+          {
+            hostname: upstream.hostname,
+            port: upstream.port || 80,
+            path: upstream.pathname + upstream.search,
+            method: req.method,
+            headers: req.headers,
+          },
+          (res) => {
+            logger.info('image service upstream response:', {
+              filter: req.imageFilter,
+              headers: res.headers,
+              status: res.statusCode,
+            });
+
+            const [type, extension] = (res.headers['content-type'] || '').split('/');
+            if (type !== 'image') {
+              reject(new Error('upstream response is not an image'));
+              return;
+            }
+            if (extension !== EXTENSIONS[path.extname(req.path).slice(1)]) {
+              reject(new Error('upstream response type and file extension mismatch'));
+              return;
+            }
+
+            resolve([res, extension]);
+          }
+        )
+        .on('error', reject)
+        .end();
+    });
+  };
+
+  const cacheDir = path.join(node.dataDirs.cache, 'services', 'image');
+  const processImage = (req, res) => {
+    const appDir = path.join(cacheDir, req.getBlockletDid());
+    processAndRespond(req, res, appDir, getUpstreamImage);
+  };
+
+  return {
+    isImageAccepted,
+    isImageRequest,
+    processImage,
+  };
+};
+
+module.exports = createImageService;

package/build/asset-manifest.json

@@ -1,7 +1,7 @@
 {
   "files": {
     "main.css": "/.well-known/service/static/static/css/main.7ea79dc8.css",
-    "main.js": "/.well-known/service/static/static/js/main.82cb8447.js",
+    "main.js": "/.well-known/service/static/static/js/main.1a8e765b.js",
     "static/js/4716.a1240199.chunk.js": "/.well-known/service/static/static/js/4716.a1240199.chunk.js",
     "static/js/4359.5ed52fe3.chunk.js": "/.well-known/service/static/static/js/4359.5ed52fe3.chunk.js",
     "static/js/1255.0e8a8a45.chunk.js": "/.well-known/service/static/static/js/1255.0e8a8a45.chunk.js",
@@ -89,7 +89,7 @@
     "router-template-styles/styles.css": "/.well-known/service/static/router-template-styles/styles.css",
     "index.html": "/.well-known/service/static/index.html",
     "main.7ea79dc8.css.map": "/.well-known/service/static/static/css/main.7ea79dc8.css.map",
-    "main.82cb8447.js.map": "/.well-known/service/static/static/js/main.82cb8447.js.map",
+    "main.1a8e765b.js.map": "/.well-known/service/static/static/js/main.1a8e765b.js.map",
     "4716.a1240199.chunk.js.map": "/.well-known/service/static/static/js/4716.a1240199.chunk.js.map",
     "4359.5ed52fe3.chunk.js.map": "/.well-known/service/static/static/js/4359.5ed52fe3.chunk.js.map",
     "1255.0e8a8a45.chunk.js.map": "/.well-known/service/static/static/js/1255.0e8a8a45.chunk.js.map",
@@ -157,6 +157,6 @@
   },
   "entrypoints": [
     "static/css/main.7ea79dc8.css",
-    "static/js/main.82cb8447.js"
+    "static/js/main.1a8e765b.js"
   ]
 }

package/build/index.html

@@ -1 +1 @@
-<!doctype html><html lang="en"><head><meta charset="utf-8"/><link rel="icon" href="/favicon.ico"/><meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=0"/><meta name="theme-color" content="#000000"/><title>Blocklet Service</title><link rel="manifest" href="/.well-known/service/manifest.json"/><script src="/.well-known/service/api/env"></script><script src="/__blocklet__.js"></script><script defer="defer" src="/.well-known/service/static/static/js/main.82cb8447.js"></script><link href="/.well-known/service/static/static/css/main.7ea79dc8.css" rel="stylesheet"></head><body><noscript>You need to enable JavaScript to run this app.</noscript><div id="root"></div></body></html>
+<!doctype html><html lang="en"><head><meta charset="utf-8"/><link rel="icon" href="/favicon.ico"/><meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=0"/><meta name="theme-color" content="#000000"/><title>Blocklet Service</title><link rel="manifest" href="/.well-known/service/manifest.json"/><script src="/.well-known/service/api/env"></script><script src="/__blocklet__.js"></script><script defer="defer" src="/.well-known/service/static/static/js/main.1a8e765b.js"></script><link href="/.well-known/service/static/static/css/main.7ea79dc8.css" rel="stylesheet"></head><body><noscript>You need to enable JavaScript to run this app.</noscript><div id="root"></div></body></html>