nginx/csp/frontend: allow Google Translate images

files/nginx/odk.conf.template

@@ -186,7 +186,7 @@ server {
 
     # Rules set to 'none' here would fallback to default-src if excluded.
     # They are included here to ease interpretation of violation reports.
-    add_header Content-Security-Policy-Report-Only "default-src 'none'; connect-src 'self' https://translate.google.com https://translate.googleapis.com; font-src 'self'; frame-src 'self' https://getodk.github.io/central/news.html; img-src * data:; manifest-src 'none'; media-src 'none'; object-src 'none'; script-src 'self'; style-src 'self'; style-src-attr 'unsafe-inline'; worker-src data:; report-uri /csp-report";
+    add_header Content-Security-Policy-Report-Only "default-src 'none'; connect-src 'self' https://translate.google.com https://translate.googleapis.com; font-src 'self'; frame-src 'self' https://getodk.github.io/central/news.html; img-src * data: https://translate.google.com; manifest-src 'none'; media-src 'none'; object-src 'none'; script-src 'self'; style-src 'self'; style-src-attr 'unsafe-inline'; worker-src data:; report-uri /csp-report";
 
     include /usr/share/odk/nginx/common-headers.conf;
   }

test/nginx/package.json

@@ -7,6 +7,7 @@
   },
   "dependencies": {
     "chai": "^5.2.0",
+    "deep-equal-in-any-order": "^2.1.0",
     "eslint": "^9.28.0",
     "mocha": "^11.6.0"
   },

test/nginx/test-nginx.js

@@ -1,30 +1,46 @@
 const https = require('node:https');
 const tls = require('node:tls');
 const { Readable } = require('stream');
-const { assert } = require('chai');
+
+const deepEqualInAnyOrder = require('deep-equal-in-any-order');
+const chai = require('chai');
+chai.use(deepEqualInAnyOrder);
+const { assert } = chai;
 
 const none = `'none'`;
 const self = `'self'`;
 const unsafeInline = `'unsafe-inline'`;
+
+const asArray = val => {
+  if (val == null) return [];
+  if (Array.isArray(val)) return val;
+  return [val];
+};
+const allowGoogleTranslate = ({ 'connect-src':connectSrc, 'img-src':imgSrc, ...others }) => ({
+  ...others,
+  'connect-src': [
+    ...asArray(connectSrc),
+    'https://translate.google.com',
+    'https://translate.googleapis.com',
+  ],
+  'img-src': [
+    ...asArray(imgSrc),
+    'https://translate.google.com',
+  ],
+});
+
 const contentSecurityPolicies = {
-  'backend-default': {
+  'backend-default': allowGoogleTranslate({
     'default-src': none,
-    'connect-src': [
-      'https://translate.google.com',
-      'https://translate.googleapis.com',
-    ],
-    'img-src': 'https://translate.google.com',
     'report-uri':  '/csp-report',
-  },
+  }),
   'backend-unmodified': {
     'default-src': 'NOTE:FROM-BACKEND',
   },
-  'central-frontend': {
+  'central-frontend': allowGoogleTranslate({
     'default-src':    none,
     'connect-src': [
       self,
-      'https://translate.google.com',
-      'https://translate.googleapis.com',
     ],
     'font-src':       self,
     'frame-src':      [
@@ -40,12 +56,12 @@ const contentSecurityPolicies = {
     'style-src-attr': unsafeInline,
     'worker-src':     'data:',
     'report-uri':     '/csp-report',
-  },
+  }),
   'disallow-all': {
     'default-src': none,
     'report-uri':  '/csp-report',
   },
-  enketo: {
+  enketo: allowGoogleTranslate({
     'default-src': none,
     'connect-src': [
       self,
@@ -55,8 +71,6 @@ const contentSecurityPolicies = {
       'https://maps.gstatic.com/mapfiles/',
       'https://fonts.gstatic.com/',
       'https://fonts.googleapis.com/',
-      'https://translate.google.com',
-      'https://translate.googleapis.com',
     ],
     'font-src': [
       self,
@@ -72,7 +86,6 @@ const contentSecurityPolicies = {
       'https://maps.gstatic.com/mapfiles/',
       'https://maps.googleapis.com/maps/',
       'https://tile.openstreetmap.org/',
-      'https://translate.google.com',
     ],
     'manifest-src': none,
     'media-src': [
@@ -95,7 +108,7 @@ const contentSecurityPolicies = {
     ],
     'style-src-attr': unsafeInline,
     'report-uri': '/csp-report',
-  },
+  }),
 };
 
 describe('nginx config', () => {
@@ -864,5 +877,5 @@ function assertSecurityHeaders(res, { csp }) {
   const expectedCsp = contentSecurityPolicies[csp];
   if(!expectedCsp) assert.fail(`Tried to match unknown CSP '${csp}'`);
   const actualCsp = res.headers.get('Content-Security-Policy-Report-Only');
-  assert.deepEqual(actualCsp.split('; '), Object.entries(expectedCsp).map(([ k, v ]) => `${k} ${Array.isArray(v) ? v.join(' ') : v}`));
+  assert.deepEqualInAnyOrder(actualCsp.split('; '), Object.entries(expectedCsp).map(([ k, v ]) => `${k} ${Array.isArray(v) ? v.join(' ') : v}`));
 }