Add Sanitize API (#349)

* #50597: add deps

* #50597: add sanitizer API

* #50597: migrate to multipart request

* #50597: revert makefile change

* #50597: fix proto

* #50597: fix dependency

* #50597: fix deps

* remove stale type, remove `V2` suffix

* extract sanitizer-related types

* remove `/render` prefix from `/render/sanitize`

Author: ArturWierzbicki

package.json

@@ -37,12 +37,18 @@
     "puppeteer": "^13.1.3",
     "puppeteer-cluster": "^0.22.0",
     "unique-filename": "^1.1.0",
-    "winston": "^3.2.1"
+    "winston": "^3.2.1",
+    "jsdom": "19.0.0",
+    "dompurify": "^2.3.8",
+    "multer": "^1.4.5-lts.1"
   },
   "devDependencies": {
     "@grafana/eslint-config": "^2.5.0",
+    "@types/multer": "1.4.7",
     "@types/express": "^4.11.1",
     "@types/node": "^14.14.41",
+    "@types/dompurify": "^2.3.3",
+    "@types/jsdom": "16.2.14",
     "@typescript-eslint/eslint-plugin": "^4.32.0",
     "@typescript-eslint/parser": "^4.32.0",
     "axios": "0.26.0",

proto/sanitizer.proto

@@ -0,0 +1,20 @@
+syntax = "proto3";
+package pluginextensionv2;
+
+option go_package = ".;pluginextensionv2";
+
+message SanitizeRequest {
+  string filename = 1;
+  bytes content = 2;
+  string configType = 3; // DOMPurify, ...
+  bytes config = 4;
+}
+
+message SanitizeResponse {
+  string error = 1;
+  bytes sanitized = 2;
+}
+
+service Sanitizer {
+  rpc Sanitize(SanitizeRequest) returns (SanitizeResponse);
+}

src/app.ts

@@ -7,6 +7,7 @@ import { ConsoleLogger, PluginLogger } from './logger';
 import * as minimist from 'minimist';
 import { defaultPluginConfig, defaultServiceConfig, readJSONFileSync, PluginConfig, ServiceConfig } from './config';
 import { serve } from './node-plugin';
+import { createSanitizer } from './sanitizer/Sanitizer';
 
 const chromeFolderPrefix = 'chrome-';
 
@@ -67,7 +68,9 @@ async function main() {
     populateServiceConfigFromEnv(config, env);
 
     const logger = new ConsoleLogger(config.service.logging);
-    const server = new HttpServer(config, logger);
+
+    const sanitizer = createSanitizer();
+    const server = new HttpServer(config, logger, sanitizer);
     await server.start();
   } else {
     console.log('Unknown command');

src/plugin/v2/grpc_plugin.ts

@@ -16,7 +16,11 @@ import {
   CollectMetricsRequest,
   CollectMetricsResponse,
   HealthStatus,
+  GRPCSanitizeRequest,
+  GRPCSanitizeResponse,
 } from './types';
+import { createSanitizer, Sanitizer } from '../../sanitizer/Sanitizer';
+import { SanitizeRequest } from '../../sanitizer/types';
 
 const rendererV2PackageDef = protoLoader.loadSync(__dirname + '/../../../proto/rendererv2.proto', {
   keepCase: true,
@@ -34,8 +38,17 @@ const pluginV2PackageDef = protoLoader.loadSync(__dirname + '/../../../proto/plu
   oneofs: true,
 });
 
+const sanitizerPackageDef = protoLoader.loadSync(__dirname + '/../../../proto/sanitizer.proto', {
+  keepCase: true,
+  longs: String,
+  enums: String,
+  defaults: true,
+  oneofs: true,
+});
+
 const rendererV2ProtoDescriptor = grpc.loadPackageDefinition(rendererV2PackageDef);
 const pluginV2ProtoDescriptor = grpc.loadPackageDefinition(pluginV2PackageDef);
+const sanitizerProtoDescriptor = grpc.loadPackageDefinition(sanitizerPackageDef);
 
 export class RenderGRPCPluginV2 implements GrpcPlugin {
   constructor(private config: PluginConfig, private log: Logger) {
@@ -45,14 +58,17 @@ export class RenderGRPCPluginV2 implements GrpcPlugin {
   async grpcServer(server: grpc.Server) {
     const metrics = setupMetrics();
     const browser = createBrowser(this.config.rendering, this.log, metrics);
-    const pluginService = new PluginGRPCServer(browser, this.log);
+    const pluginService = new PluginGRPCServer(browser, this.log, createSanitizer());
 
     const rendererServiceDef = rendererV2ProtoDescriptor['pluginextensionv2']['Renderer']['service'];
     server.addService(rendererServiceDef, pluginService as any);
 
     const pluginServiceDef = pluginV2ProtoDescriptor['pluginv2']['Diagnostics']['service'];
     server.addService(pluginServiceDef, pluginService as any);
 
+    const sanitizerServiceDef = sanitizerProtoDescriptor['pluginextensionv2']['Sanitizer']['service'];
+    server.addService(sanitizerServiceDef, pluginService as any);
+
     metrics.up.set(1);
 
     let browserVersion = 'unknown';
@@ -76,7 +92,7 @@ export class RenderGRPCPluginV2 implements GrpcPlugin {
 class PluginGRPCServer {
   private browserVersion: string | undefined;
 
-  constructor(private browser: Browser, private log: Logger) {}
+  constructor(private browser: Browser, private log: Logger, private sanitizer: Sanitizer) {}
 
   async start(browserVersion?: string) {
     this.browserVersion = browserVersion;
@@ -178,6 +194,26 @@ class PluginGRPCServer {
     const payload = Buffer.from(promClient.register.metrics());
     callback(null, { metrics: { prometheus: payload } });
   }
+
+  async sanitize(call: grpc.ServerUnaryCall<GRPCSanitizeRequest, any>, callback: grpc.sendUnaryData<GRPCSanitizeResponse>) {
+    const grpcReq = call.request;
+
+    const req: SanitizeRequest = {
+      content: grpcReq.content,
+      config: JSON.parse(grpcReq.config.toString()),
+      configType: grpcReq.configType,
+    };
+
+    this.log.debug('Sanitize request received', 'contentLength', req.content.length, 'name', grpcReq.filename);
+
+    try {
+      const sanitizeResponse = this.sanitizer.sanitize(req);
+      callback(null, { error: '', sanitized: sanitizeResponse.sanitized });
+    } catch (e) {
+      this.log.error('Sanitization failed', 'contentLength', req.content.length, 'name', grpcReq.filename, 'error', e.stack);
+      callback(null, { error: e.stack, sanitized: Buffer.from('', 'binary') });
+    }
+  }
 }
 
 const populateConfigFromEnv = (config: PluginConfig) => {

src/plugin/v2/types.ts

@@ -1,3 +1,5 @@
+import { ConfigType } from '../../sanitizer/types';
+
 export interface StringList {
   values: string[];
 }
@@ -63,3 +65,16 @@ export interface CheckHealthResponse {
   message?: string;
   jsonDetails?: Buffer;
 }
+
+export interface GRPCSanitizeRequest {
+  filename: string;
+  content: Buffer;
+  configType: ConfigType;
+  config: Buffer;
+  allowAllLinksInSvgUseTags: boolean;
+}
+
+export interface GRPCSanitizeResponse {
+  error: string;
+  sanitized: Buffer;
+}

src/sanitizer/Sanitizer.ts

@@ -0,0 +1,98 @@
+import * as DOMPurify from 'dompurify';
+import { JSDOM } from 'jsdom';
+import { ConfigType, isDOMPurifyConfig, SanitizeRequest, SanitizeResponse } from './types';
+
+const svgTags = {
+  altGlyphDef: /(<\/?)altGlyphDef([> ])/gi,
+  altGlyphItem: /(<\/?)altGlyphItem([> ])/gi,
+  altGlyph: /(<\/?)altGlyph([> ])/gi,
+  animateColor: /(<\/?)animateColor([> ])/gi,
+  animateMotion: /(<\/?)animateMotion([> ])/gi,
+  animateTransform: /(<\/?)animateTransform([> ])/gi,
+  clipPath: /(<\/?)clipPath([> ])/gi,
+  feBlend: /(<\/?)feBlend([> ])/gi,
+  feColorMatrix: /(<\/?)feColorMatrix([> ])/gi,
+  feComponentTransfer: /(<\/?)feComponentTransfer([> ])/gi,
+  feComposite: /(<\/?)feComposite([> ])/gi,
+  feConvolveMatrix: /(<\/?)feConvolveMatrix([> ])/gi,
+  feDiffuseLighting: /(<\/?)feDiffuseLighting([> ])/gi,
+  feDisplacementMap: /(<\/?)feDisplacementMap([> ])/gi,
+  feDistantLight: /(<\/?)feDistantLight([> ])/gi,
+  feDropShadow: /(<\/?)feDropShadow([> ])/gi,
+  feFlood: /(<\/?)feFlood([> ])/gi,
+  feFuncA: /(<\/?)feFuncA([> ])/gi,
+  feFuncB: /(<\/?)feFuncB([> ])/gi,
+  feFuncG: /(<\/?)feFuncG([> ])/gi,
+  feFuncR: /(<\/?)feFuncR([> ])/gi,
+  feGaussianBlur: /(<\/?)feGaussianBlur([> ])/gi,
+  feImage: /(<\/?)feImage([> ])/gi,
+  feMergeNode: /(<\/?)feMergeNode([> ])/gi,
+  feMerge: /(<\/?)feMerge([> ])/gi,
+  feMorphology: /(<\/?)feMorphology([> ])/gi,
+  feOffset: /(<\/?)feOffset([> ])/gi,
+  fePointLight: /(<\/?)fePointLight([> ])/gi,
+  feSpecularLighting: /(<\/?)feSpecularLighting([> ])/gi,
+  feSpotLight: /(<\/?)feSpotLight([> ])/gi,
+  feTile: /(<\/?)feTile([> ])/gi,
+  feTurbulence: /(<\/?)feTurbulence([> ])/gi,
+  foreignObject: /(<\/?)foreignObject([> ])/gi,
+  glyphRef: /(<\/?)glyphRef([> ])/gi,
+  linearGradient: /(<\/?)linearGradient([> ])/gi,
+  radialGradient: /(<\/?)radialGradient([> ])/gi,
+  textPath: /(<\/?)textPath([> ])/gi,
+};
+
+const svgFilePrefix = '<?xml version="1.0" encoding="utf-8"?>';
+
+export class Sanitizer {
+  constructor(private domPurify: DOMPurify.DOMPurifyI) {}
+
+  private sanitizeUseTagHook = (node) => {
+    if (node.nodeName === 'use') {
+      if (
+        (node.hasAttribute('xlink:href') && !node.getAttribute('xlink:href').match(/^#/)) ||
+        (node.hasAttribute('href') && !node.getAttribute('href').match(/^#/))
+      ) {
+        node.remove();
+      }
+    }
+  };
+
+  private sanitizeSvg = (req: SanitizeRequest<ConfigType.DOMPurify>): SanitizeResponse => {
+    if (req.config.allowAllLinksInSvgUseTags !== true) {
+      this.domPurify.addHook('afterSanitizeAttributes', this.sanitizeUseTagHook);
+    }
+
+    const dirty = req.content.toString();
+    let sanitized = this.domPurify.sanitize(dirty, req.config.domPurifyConfig ?? {}) as string;
+
+    // ensure tags have the correct capitalization, as dompurify converts them to lowercase
+    Object.entries(svgTags).forEach(([regex, tag]) => {
+      sanitized = sanitized.replace(regex, '$1' + tag + '$2');
+    });
+
+    this.domPurify.removeHook('afterSanitizeAttributes');
+    return { sanitized: Buffer.from([svgFilePrefix, sanitized].join('\n')) };
+  };
+
+  sanitize = (req: SanitizeRequest): SanitizeResponse => {
+    const configType = req.configType;
+    if (!isDOMPurifyConfig(req)) {
+      throw new Error('unsupported config type: ' + configType);
+    }
+
+    if (req.config.domPurifyConfig?.USE_PROFILES?.['svg']) {
+      return this.sanitizeSvg(req);
+    }
+
+    const dirty = req.content.toString();
+    const sanitized = this.domPurify.sanitize(dirty, req.config.domPurifyConfig ?? {}) as string;
+    return {
+      sanitized: Buffer.from(sanitized),
+    };
+  };
+}
+
+export const createSanitizer = () => {
+  return new Sanitizer(DOMPurify(new JSDOM('').window as any));
+};

src/sanitizer/types.ts

@@ -0,0 +1,30 @@
+import * as DOMPurify from 'dompurify';
+
+export enum ConfigType {
+  DOMPurify = 'DOMPurify',
+}
+
+export const isDOMPurifyConfig = (req: SanitizeRequest): req is SanitizeRequest<ConfigType.DOMPurify> => req.configType === ConfigType.DOMPurify;
+
+const allConfigTypes = Object.values(ConfigType);
+
+export type ConfigTypeToConfig = {
+  [ConfigType.DOMPurify]: {
+    domPurifyConfig?: DOMPurify.Config;
+    allowAllLinksInSvgUseTags?: boolean;
+  };
+};
+
+export const isSanitizeRequest = (obj: any): obj is SanitizeRequest => {
+  return Boolean(obj?.content) && allConfigTypes.includes(obj.configType) && typeof obj.config === 'object';
+};
+
+export type SanitizeRequest<configType extends ConfigType = ConfigType> = {
+  content: Buffer;
+  configType: configType;
+  config: ConfigTypeToConfig[configType];
+};
+
+export type SanitizeResponse = {
+  sanitized: Buffer;
+};

src/service/http-server.ts

@@ -10,12 +10,23 @@ import { Browser, createBrowser } from '../browser';
 import { ServiceConfig } from '../config';
 import { setupHttpServerMetrics } from './metrics_middleware';
 import { HTTPHeaders, ImageRenderOptions, RenderOptions } from '../types';
+import { Sanitizer } from '../sanitizer/Sanitizer';
+import * as bodyParser from 'body-parser';
+import * as multer from 'multer';
+import { isSanitizeRequest } from '../sanitizer/types';
+
+const upload = multer({ storage: multer.memoryStorage() });
+
+enum SanitizeRequestPartName {
+  'file' = 'file',
+  'config' = 'config',
+}
 
 export class HttpServer {
   app: express.Express;
   browser: Browser;
 
-  constructor(private config: ServiceConfig, private log: Logger) {}
+  constructor(private config: ServiceConfig, private log: Logger, private sanitizer: Sanitizer) {}
 
   async start() {
     this.app = express();
@@ -36,6 +47,8 @@ export class HttpServer {
       })
     );
 
+    this.app.use(bodyParser.json());
+
     if (this.config.service.metrics.enabled) {
       setupHttpServerMetrics(this.app, this.config.service.metrics, this.log);
     }
@@ -49,6 +62,14 @@ export class HttpServer {
 
     this.app.get('/render', asyncMiddleware(this.render));
     this.app.get('/render/csv', asyncMiddleware(this.renderCSV));
+    this.app.post(
+      '/sanitize',
+      upload.fields([
+        { name: SanitizeRequestPartName.file, maxCount: 1 },
+        { name: SanitizeRequestPartName.config, maxCount: 1 },
+      ]),
+      asyncMiddleware(this.sanitize)
+    );
     this.app.use((err, req, res, next) => {
       if (err.stack) {
         this.log.error('Request failed', 'url', req.url, 'stack', err.stack);
@@ -146,6 +167,44 @@ export class HttpServer {
     });
   };
 
+  sanitize = async (req: express.Request<any, { error: string }>, res: express.Response<{ error: string }>) => {
+    const file = req.files?.[SanitizeRequestPartName.file]?.[0] as Express.Multer.File | undefined;
+    if (!file) {
+      throw boom.badRequest('missing file');
+    }
+
+    const configFile = req.files?.[SanitizeRequestPartName.config]?.[0] as Express.Multer.File | undefined;
+    if (!configFile) {
+      throw boom.badRequest('missing config');
+    }
+
+    const config = JSON.parse(configFile.buffer.toString());
+
+    const sanitizeReq = {
+      ...config,
+      content: file.buffer,
+    };
+
+    if (!isSanitizeRequest(sanitizeReq)) {
+      throw boom.badRequest('invalid request: ' + JSON.stringify(config));
+    }
+
+    this.log.debug('Sanitize request received', 'contentLength', file.size, 'name', file.filename, 'config', JSON.stringify(config));
+
+    try {
+      const sanitizeResponse = this.sanitizer.sanitize(sanitizeReq);
+      res.writeHead(200, {
+        'Content-Disposition': `attachment;filename=${file.filename ?? 'sanitized'}`,
+        'Content-Length': sanitizeResponse.sanitized.length,
+        'Content-Type': file.mimetype ?? 'application/octet-stream',
+      });
+      return res.end(sanitizeResponse.sanitized);
+    } catch (e) {
+      this.log.error('Sanitization failed', 'filesize', file.size, 'name', file.filename, 'error', e.stack);
+      return res.status(500).json({ error: e.message });
+    }
+  };
+
   renderCSV = async (req: express.Request<any, any, any, RenderOptions, any>, res: express.Response, next: express.NextFunction) => {
     if (!req.query.url) {
       throw boom.badRequest('Missing url parameter');