Inline images in CSS

Because this commit’s parent added a few new images, we are now serving at
least a handful of images, therefore a few additional HTTP requests. It’s better
to combine multiple HTTP requests into one for performance reasons (up to a
point).

This commit adds an extra step to the preprocessing of SASS files which takes
any images it finds, base64 encodes them and inlines them into the distributed
CSS files.

It also modifies the content security policy to allow inline images.

app/__init__.py

@@ -155,7 +155,7 @@ def useful_headers_after_request(response):
     response.headers.add('X-Content-Type-Options', 'nosniff')
     response.headers.add('X-XSS-Protection', '1; mode=block')
     response.headers.add('Content-Security-Policy',
-                         "default-src 'self' 'unsafe-inline'; font-src 'self' data:;")  # noqa
+                         "default-src 'self' 'unsafe-inline'; font-src 'self' data:; img-src 'self' data:;")  # noqa
     if 'Cache-Control' in response.headers:
         del response.headers['Cache-Control']
     response.headers.add(

gulpfile.babel.js

@@ -62,6 +62,7 @@ gulp.task('sass', () => gulp
       paths.npm + 'govuk_frontend_toolkit/stylesheets/'
     ]
   }))
+  .pipe(plugins.base64({baseDir: 'app', debug: true}))
   .pipe(gulp.dest(paths.dist + '/stylesheets'))
 );
 

package.json

@@ -26,6 +26,7 @@
     "gulp": "3.9.0",
     "gulp-add-src": "0.2.0",
     "gulp-babel": "6.1.1",
+    "gulp-base64": "0.1.3",
     "gulp-concat": "2.6.0",
     "gulp-include": "2.1.0",
     "gulp-jquery": "1.1.1",

tests/app/main/views/test_headers.py

@@ -6,4 +6,4 @@ def test_owasp_useful_headers_set(app_):
     assert response.headers['X-Frame-Options'] == 'deny'
     assert response.headers['X-Content-Type-Options'] == 'nosniff'
     assert response.headers['X-XSS-Protection'] == '1; mode=block'
-    assert response.headers['Content-Security-Policy'] == "default-src 'self' 'unsafe-inline'; font-src 'self' data:;"  # noqa
+    assert response.headers['Content-Security-Policy'] == "default-src 'self' 'unsafe-inline'; font-src 'self' data:; img-src 'self' data:;"  # noqa