[fix] Optimize SVG for WEB usage / CSP 'style-src self'

- Replace grunt-contrib-htmlmin by grunt-image [1].

- Activate svgo's [2] convertStyleToAttrs to make the HTML inline SVGs
  compoliant to the CSP policy [3]::

    Content-Security-Policy: style-src self;

[1] https://www.npmjs.com/package/grunt-image
[2] https://github.com/svg/svgo
[3] https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/style-src

Closes: https://github.com/searxng/searxng/issues/502

Signed-off-by: Markus Heiser <markus.heiser@darmarit.de>

4 files changed, 29 insertions, 9 deletions

diff --git a/searx/static/themes/simple/.eslintrc.json b/searx/static/themes/simple/.eslintrc.json
index f6aed7584..069111bca 100644
--- a/searx/static/themes/simple/.eslintrc.json
+++ b/searx/static/themes/simple/.eslintrc.json
@@ -1,7 +1,8 @@
 {
     "env": {
         "browser": true,
-        "es2021": true
+        "es2021": true,
+        "node": true
     },
     "extends": "eslint:recommended",
     "parserOptions": {
diff --git a/searx/static/themes/simple/gruntfile.js b/searx/static/themes/simple/gruntfile.js
index f1ece95c5..f85f92a13 100644
--- a/searx/static/themes/simple/gruntfile.js
+++ b/searx/static/themes/simple/gruntfile.js
@@ -9,7 +9,7 @@ module.exports = function(grunt) {
     watch: {
       scripts: {
         files: ['gruntfile.js', 'src/**'],
-        tasks: ['eslint', 'copy', 'concat', 'svg2jinja', 'uglify', 'htmlmin', 'less:development', 'less:production']
+        tasks: ['eslint', 'copy', 'concat', 'svg2jinja', 'uglify', 'image', 'less:development', 'less:production']
       }
     },
     eslint: {
@@ -18,6 +18,7 @@ module.exports = function(grunt) {
         failOnError: false
       },
       target: [
+        'svg4web.svgo.js',
         'src/js/main/*.js',
         'src/js/head/*.js',
         '../__common__/js/*.js'
@@ -95,11 +96,10 @@ module.exports = function(grunt) {
         }
       }
     },
-    htmlmin: {
-      dist: {
+    image: {
+      svg4web: {
         options: {
-          removeComments: true,
-          collapseWhitespace: true
+          svgo: ['--config', 'svg4web.svgo.js']
         },
         files: {
           '../../../templates/__common__/searxng-wordmark.min.svg': 'src/svg/searxng-wordmark.svg'
@@ -221,7 +221,7 @@ module.exports = function(grunt) {
   grunt.loadNpmTasks('grunt-contrib-watch');
   grunt.loadNpmTasks('grunt-contrib-copy');
   grunt.loadNpmTasks('grunt-contrib-uglify');
-  grunt.loadNpmTasks('grunt-contrib-htmlmin');
+  grunt.loadNpmTasks('grunt-image');
   grunt.loadNpmTasks('grunt-contrib-jshint');
   grunt.loadNpmTasks('grunt-contrib-concat');
   grunt.loadNpmTasks('grunt-contrib-less');
@@ -238,7 +238,7 @@ module.exports = function(grunt) {
     'concat',
     'svg2jinja',
     'uglify',
-    'htmlmin',
+    'image',
     'less:development',
     'less:production'
   ]);
diff --git a/searx/static/themes/simple/package.json b/searx/static/themes/simple/package.json
index 3676672bd..1ca09536f 100644
--- a/searx/static/themes/simple/package.json
+++ b/searx/static/themes/simple/package.json
@@ -9,10 +9,10 @@
     "grunt-contrib-less": "~3.0.0",
     "grunt-contrib-uglify": "~5.0.1",
     "grunt-xmlmin": "~0.1.8",
-    "grunt-contrib-htmlmin": "~3.1.0",
     "grunt-contrib-watch": "~1.1.0",
     "grunt-eslint": "^23.0.0",
     "grunt-stylelint": "^0.16.0",
+    "grunt-image": "^6.4.0",
     "ionicons": "^5.5.4",
     "less": "^4.1.1",
     "less-plugin-clean-css": "^1.5.1",
diff --git a/searx/static/themes/simple/svg4web.svgo.js b/searx/static/themes/simple/svg4web.svgo.js
new file mode 100644
index 000000000..5b985adfe
--- /dev/null
+++ b/searx/static/themes/simple/svg4web.svgo.js
@@ -0,0 +1,19 @@
+/**
+ * @license
+ * SPDX-License-Identifier: AGPL-3.0-or-later
+ *
+ * svgo config: Optimize SVG for WEB usage
+ */
+
+module.exports = {
+  plugins: [
+    {
+      name: 'preset-default',
+    },
+    // make diff friendly
+    'sortAttrs',
+    // Optimize SVG for WEB usage
+    'convertStyleToAttrs',
+    'removeXMLNS'
+ ],
+};