[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>
This commit is contained in:
Markus Heiser 2021-11-14 13:26:12 +01:00
parent c6dcedb911
commit b07884c958
4 changed files with 29 additions and 9 deletions

View File

@ -1,7 +1,8 @@
{ {
"env": { "env": {
"browser": true, "browser": true,
"es2021": true "es2021": true,
"node": true
}, },
"extends": "eslint:recommended", "extends": "eslint:recommended",
"parserOptions": { "parserOptions": {

View File

@ -9,7 +9,7 @@ module.exports = function(grunt) {
watch: { watch: {
scripts: { scripts: {
files: ['gruntfile.js', 'src/**'], 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: { eslint: {
@ -18,6 +18,7 @@ module.exports = function(grunt) {
failOnError: false failOnError: false
}, },
target: [ target: [
'svg4web.svgo.js',
'src/js/main/*.js', 'src/js/main/*.js',
'src/js/head/*.js', 'src/js/head/*.js',
'../__common__/js/*.js' '../__common__/js/*.js'
@ -95,11 +96,10 @@ module.exports = function(grunt) {
} }
} }
}, },
htmlmin: { image: {
dist: { svg4web: {
options: { options: {
removeComments: true, svgo: ['--config', 'svg4web.svgo.js']
collapseWhitespace: true
}, },
files: { files: {
'../../../templates/__common__/searxng-wordmark.min.svg': 'src/svg/searxng-wordmark.svg' '../../../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-watch');
grunt.loadNpmTasks('grunt-contrib-copy'); grunt.loadNpmTasks('grunt-contrib-copy');
grunt.loadNpmTasks('grunt-contrib-uglify'); grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.loadNpmTasks('grunt-contrib-htmlmin'); grunt.loadNpmTasks('grunt-image');
grunt.loadNpmTasks('grunt-contrib-jshint'); grunt.loadNpmTasks('grunt-contrib-jshint');
grunt.loadNpmTasks('grunt-contrib-concat'); grunt.loadNpmTasks('grunt-contrib-concat');
grunt.loadNpmTasks('grunt-contrib-less'); grunt.loadNpmTasks('grunt-contrib-less');
@ -238,7 +238,7 @@ module.exports = function(grunt) {
'concat', 'concat',
'svg2jinja', 'svg2jinja',
'uglify', 'uglify',
'htmlmin', 'image',
'less:development', 'less:development',
'less:production' 'less:production'
]); ]);

View File

@ -9,10 +9,10 @@
"grunt-contrib-less": "~3.0.0", "grunt-contrib-less": "~3.0.0",
"grunt-contrib-uglify": "~5.0.1", "grunt-contrib-uglify": "~5.0.1",
"grunt-xmlmin": "~0.1.8", "grunt-xmlmin": "~0.1.8",
"grunt-contrib-htmlmin": "~3.1.0",
"grunt-contrib-watch": "~1.1.0", "grunt-contrib-watch": "~1.1.0",
"grunt-eslint": "^23.0.0", "grunt-eslint": "^23.0.0",
"grunt-stylelint": "^0.16.0", "grunt-stylelint": "^0.16.0",
"grunt-image": "^6.4.0",
"ionicons": "^5.5.4", "ionicons": "^5.5.4",
"less": "^4.1.1", "less": "^4.1.1",
"less-plugin-clean-css": "^1.5.1", "less-plugin-clean-css": "^1.5.1",

View File

@ -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'
],
};