#565 Provide optional SRI hash when displaying embed code

auditorium/gulpfile.js

@@ -4,6 +4,7 @@
  */
 
 var fs = require('fs')
+var path = require('path');
 var gulp = require('gulp')
 var clean = require('gulp-clean')
 var browserify = require('browserify')
@@ -13,17 +14,21 @@ var buffer = require('vinyl-buffer')
 var gap = require('gulp-append-prepend')
 var Readable = require('stream').Readable
 var linguasFile = require('linguas-file')
+var crypto = require('crypto');
 
 var pkg = require('./package.json')
 
 var defaultLocale = 'en'
-var linguas = !process.env.SKIP_LOCALES
-  ? linguasFile.parse(fs.readFileSync('./locales/LINGUAS', 'utf-8'))
-  : []
+var linguas = !process.env.SKIP_LOCALES ?
+  linguasFile.parse(fs.readFileSync('./locales/LINGUAS', 'utf-8')) :
+  []
 
 gulp.task('clean:pre', function () {
   return gulp
-    .src('./dist', { read: false, allowEmpty: true })
+    .src('./dist', {
+      read: false,
+      allowEmpty: true
+    })
     .pipe(clean())
 })
 
@@ -37,7 +42,7 @@ gulp.task('default', gulp.series(
   }))
 ))
 
-function createLocalizedBundle (locale) {
+function createLocalizedBundle(locale) {
   var dest = './dist/' + locale + '/auditorium/'
   var scriptTask = makeScriptTask(dest, locale)
   scriptTask.displayName = 'script:' + locale
@@ -46,32 +51,43 @@ function createLocalizedBundle (locale) {
   return gulp.parallel(scriptTask, vendorTask)
 }
 
-function makeScriptTask (dest, locale) {
+function makeScriptTask(dest, locale) {
   return function () {
     var transforms = JSON.parse(JSON.stringify(pkg.browserify.transform))
     // we are setting this at process level so that it propagates to
     // dependencies that also require setting it
     process.env.LOCALE = locale
+    process.env.SCRIPT_INTEGRITY_HASH = "unkown"
     var b = browserify({
-      entries: './index.js',
-      // See: https://github.com/nikku/karma-browserify/issues/130#issuecomment-120036815
-      postFilter: function (id, file, currentPkg) {
-        if (currentPkg && currentPkg.name === pkg.name) {
-          currentPkg.browserify.transform = []
-        }
-        return true
-      },
-      transform: transforms.map(function (transform) {
-        if (transform === '@offen/l10nify' || (Array.isArray(transform) && transform[0] === '@offen/l10nify')) {
-          return ['@offen/l10nify']
-        }
-        if (transform === 'envify' || (Array.isArray(transform) && transform[0] === 'envify')) {
-          return ['envify', { LOCALE: locale }]
-        }
-        return transform
+        entries: './index.js',
+        // See: https://github.com/nikku/karma-browserify/issues/130#issuecomment-120036815
+        postFilter: function (id, file, currentPkg) {
+          if (currentPkg && currentPkg.name === pkg.name) {
+            currentPkg.browserify.transform = []
+          }
+          return true
+        },
+        transform: transforms.map(function (transform) {
+          if (transform === '@offen/l10nify' || (Array.isArray(transform) && transform[0] === '@offen/l10nify')) {
+            return ['@offen/l10nify']
+          }
+          if (transform === 'envify' || (Array.isArray(transform) && transform[0] === 'envify')) {
+            let scriptContent = fs.readFileSync('./script/index.js', 'utf8')
+
+            console.log(scriptContent);
+            process.env.SCRIPT_INTEGRITY_HASH = crypto.createHash('sha256').update(scriptContent).digest('base64')
+            console.log(process.env.SCRIPT_INTEGRITY_HASH)
+
+            return ['envify', {
+              LOCALE: locale
+            }]
+          }
+          return transform
+        })
+      })
+      .transform('aliasify', {
+        global: true
       })
-    })
-      .transform('aliasify', { global: true })
 
     if (locale !== defaultLocale) {
       b.add(configureDatepickerLocale(locale))
@@ -90,18 +106,23 @@ function makeScriptTask (dest, locale) {
       .pipe(gap.prependText('/**'))
       .pipe(rev())
       .pipe(gulp.dest(dest))
-      .pipe(rev.manifest(dest + '/rev-manifest.json', { base: dest, merge: true }))
+      .pipe(rev.manifest(dest + '/rev-manifest.json', {
+        base: dest,
+        merge: true
+      }))
       .pipe(gulp.dest(dest))
   }
 }
 
-function makeVendorTask (dest) {
+function makeVendorTask(dest) {
   return function () {
     var b = browserify()
     return b
       .require('plotly.js-basic-dist')
       .require('zxcvbn')
-      .plugin('tinyify', { noFlat: true })
+      .plugin('tinyify', {
+        noFlat: true
+      })
       .bundle()
       .pipe(source('vendor.js'))
       .pipe(buffer())
@@ -110,7 +131,10 @@ function makeVendorTask (dest) {
       .pipe(gap.prependText('/**'))
       .pipe(rev())
       .pipe(gulp.dest(dest))
-      .pipe(rev.manifest(dest + '/rev-manifest.json', { base: dest, merge: true }))
+      .pipe(rev.manifest(dest + '/rev-manifest.json', {
+        base: dest,
+        merge: true
+      }))
       .pipe(gulp.dest(dest))
   }
 }
@@ -119,15 +143,15 @@ function makeVendorTask (dest) {
 // `react-datepicker`. Handling this at build time allows us to avoid including
 // unused locales for non-English bundles. At development time, the default
 // locale (en) will be included implicitly.
-function configureDatepickerLocale (locale) {
+function configureDatepickerLocale(locale) {
   return Readable.from([`
 const { registerLocale } = require('react-datepicker')
 const locale = require('date-fns/locale/${locale}')
 registerLocale('${locale}', locale)
   `])
 }
 
-function configureCountriesLocale (locale) {
+function configureCountriesLocale(locale) {
   return Readable.from([`
 const countries = require('i18n-iso-countries')
 countries.registerLocale(require('i18n-iso-countries/langs/${locale}.json'))

auditorium/src/views/components/auditorium/embed-code.js

@@ -8,7 +8,7 @@ const { h, Fragment } = require('preact')
 const { CopyToClipboard } = require('react-copy-to-clipboard')
 const classnames = require('classnames')
 const escapeHtml = require('escape-html')
-
+const { useState } = require('preact/hooks')
 const Collapsible = require('./../_shared/collapsible')
 const Paragraph = require('./../_shared/paragraph')
 
@@ -19,6 +19,10 @@ const EmbedCode = (props) => {
     onCopy(__('Successfully copied embed code to clipboard.'))
   }
 
+  function toggleScriptDisplay () {
+    setActive(!useSnippetWithSRI)
+  }
+
   const renderHeader = (props = {}) => {
     const { handleToggle = null, isCollapsed } = props
     return (
@@ -50,6 +54,10 @@ const EmbedCode = (props) => {
   }
 
   const snippet = `<script async src="${window.location.origin}/script.js" data-account-id="${model.account.accountId}"></script>`
+  const snippetWithSRI = `<script async src="${window.location.origin}/script.js" data-account-id="${model.account.accountId}" integrity="sha256-${process.env.SCRIPT_INTEGRITY_HASH}"></script>`
+  const [useSnippetWithSRI, setActive] = useState(false)
+  const embeddedSnipped = useSnippetWithSRI ? snippetWithSRI : snippet
+  const buttonText = useSnippetWithSRI ? __('Hide integrity hash') : __('Show with integrity hash')
 
   const renderBody = (props = {}) => (
     <div class='mw6 center ph3 mt3 mb4'>
@@ -59,17 +67,22 @@ const EmbedCode = (props) => {
       <Paragraph class='ma0 mb3'>
         {__('In case you are serving multiple domains from your Offen instance, please double check that the domain in this snippet matches the target account.')}
       </Paragraph>
+      <div class='flex items-end'>
+        <div class='w-100 tr bb b--light-gray'>
+          <button onClick={toggleScriptDisplay} class='pointer w-100 w-auto-ns fw1 f7 tc bn dib br1 ph2 pv1 black bg-black-10'><span class={classnames('ml2', 'dib', 'label-toggle', { 'label-toggle--rotate': useSnippetWithSRI })} /> {buttonText}</button>
+        </div>
+      </div>
       <div class='w-100 br1 ph2 pv2 bg-black-10'>
         <code
           class='ma0 lh-solid word-wrap'
           dangerouslySetInnerHTML={{
-            __html: escapeHtml(snippet)
+            __html: escapeHtml(embeddedSnipped)
           }}
         />
       </div>
       <CopyToClipboard
         onCopy={handleCopy}
-        text={snippet}
+        text={embeddedSnipped}
       >
         <div class='link dim'>
           <button class='pointer w-100 w-auto-ns f5 tc bn dib br1 ph3 pv2 mv3 white bg-mid-gray'>

build/Dockerfile.build

@@ -10,32 +10,33 @@ ENV ADBLOCK true
 ENV DISABLE_OPENCOLLECTIVE true
 ENV PUPPETEER_SKIP_CHROMIUM_DOWNLOAD true
 
-FROM offen_node as auditorium
+FROM offen_node as script
 ARG skip_locales
 ENV SKIP_LOCALES=$skip_locales
-COPY ./auditorium/package.json ./auditorium/package-lock.json /code/deps/
+COPY ./script/package.json ./script/package-lock.json /code/deps/
 WORKDIR /code/deps
 RUN npm ci
-COPY ./auditorium /code/auditorium
+COPY ./script /code/script
 COPY ./banner.txt /code/banner.txt
-COPY ./locales /code/auditorium/locales
-WORKDIR /code/auditorium
-RUN cp -a /code/deps/node_modules /code/auditorium/
+COPY ./locales /code/script/locales
+WORKDIR /code/script
+RUN cp -a /code/deps/node_modules /code/script/
 ENV NODE_ENV production
 RUN npm run build
 RUN npm run licenses
 
-FROM offen_node as script
+FROM offen_node as auditorium
 ARG skip_locales
 ENV SKIP_LOCALES=$skip_locales
-COPY ./script/package.json ./script/package-lock.json /code/deps/
+COPY ./auditorium/package.json ./auditorium/package-lock.json /code/deps/
 WORKDIR /code/deps
 RUN npm ci
-COPY ./script /code/script
+COPY ./auditorium /code/auditorium
+COPY --from=script ./code/script/index.js /code/auditorium/script/index.js
 COPY ./banner.txt /code/banner.txt
-COPY ./locales /code/script/locales
-WORKDIR /code/script
-RUN cp -a /code/deps/node_modules /code/script/
+COPY ./locales /code/auditorium/locales
+WORKDIR /code/auditorium
+RUN cp -a /code/deps/node_modules /code/auditorium/
 ENV NODE_ENV production
 RUN npm run build
 RUN npm run licenses

docker-compose.yml

@@ -67,6 +67,7 @@ services:
     working_dir: /offen/auditorium
     environment:
       LOCALE: ${LOCALE:-en}
+      SCRIPT_INTEGRITY_HASH: e3b0c44298fc1c149afbf4c8996fb92427ae41e4649b934ca495991b7852b855
       PORT: 9955
     volumes:
       - .:/offen