Merge pull request #306 from FlowFuse/dashboard-iframe

Allow Dashboards to be loaded in an iFrame

Author: Steve-Mcl

lib/runtimeSettings.js

@@ -64,8 +64,12 @@ function getSettingsFile (settings) {
             if (settings.settings.dashboardUI !== undefined) {
                 dashboardSettings.push(`path: '${settings.settings.dashboardUI}'`)
             }
-            if (authMiddlewareRequired) {
+            if (authMiddlewareRequired && settings.settings.dashboardIFrame) {
+                dashboardSettings.push('middleware: flowforgeAuthMiddleware.concat(DashboardIFrameMiddleware)')
+            } else if (authMiddlewareRequired && !settings.settings.dashboardIFrame) {
                 dashboardSettings.push('middleware: flowforgeAuthMiddleware')
+            } else if (!authMiddlewareRequired && settings.settings.dashboardIFrame) {
+                dashboardSettings.push('middleware: [ DashboardIFrameMiddleware ]')
             }
             projectSettings.dashboardUI = `ui: { ${dashboardSettings.join(', ')}},`
         }
@@ -251,6 +255,10 @@ function getSettingsFile (settings) {
 
     const settingsTemplate = `
 ${projectSettings.setupAuthMiddleware}
+const DashboardIFrameMiddleware = async function(req,res,next) {
+    res.set("Content-Security-Policy", "frame-ancestors *");
+    next()
+}
 module.exports = {
     flowFile: 'flows.json',
     flowFilePretty: true,

test/unit/lib/runtimeSettings_spec.js

@@ -313,6 +313,71 @@ describe('Runtime Settings', function () {
             err.toString().should.match(/Cannot find module '@flowfuse\/nr-auth\/middleware'/)
         }
     })
+    it('includes httpNodeMiddleware and dashboard iFrame middleware if flowforge-user auth type set and dashboard ui set to be loaded into iFrame', async function () {
+        const result = runtimeSettings.getSettingsFile({
+            baseURL: 'https://BASEURL',
+            forgeURL: 'https://FORGEURL',
+            settings: {
+                dashboardUI: '/foo',
+                httpNodeAuth: { type: 'flowforge-user' },
+                dashboardIFrame: true
+            }
+        })
+
+        const settings = await loadSettings(result)
+        settings.should.have.property('ui')
+        settings.ui.should.have.property('path', '/foo')
+        settings.ui.should.have.property('middleware')
+        settings.ui.middleware.should.be.an.Array().and.have.length(3)
+        ;(typeof settings.ui.middleware[0]).should.equal('function')
+        ;(typeof settings.ui.middleware[1]).should.equal('function')
+        ;(typeof settings.ui.middleware[2]).should.equal('function') // iFrame middleware
+        // calling the middleware function should add the CSP header & call next
+        const headers = {}
+        let nextCalled = false
+        const res = {
+            set: function (header, value) {
+                headers[header] = value
+            }
+        }
+        const next = function () {
+            nextCalled = true
+        }
+        settings.ui.middleware[2]({}, res, next)
+        headers.should.have.property('Content-Security-Policy', 'frame-ancestors *')
+        nextCalled.should.equal(true)
+    })
+    it('includes only dashboard iFrame middleware if flowforge-user auth type is not set and dashboard ui set to be loaded into iFrame', async function () {
+        const result = runtimeSettings.getSettingsFile({
+            baseURL: 'https://BASEURL',
+            forgeURL: 'https://FORGEURL',
+            settings: {
+                dashboardUI: '/foo',
+                dashboardIFrame: true
+            }
+        })
+
+        const settings = await loadSettings(result)
+        settings.should.have.property('ui')
+        settings.ui.should.have.property('path', '/foo')
+        settings.ui.should.have.property('middleware')
+        settings.ui.middleware.should.be.an.Array().and.have.length(1)
+        ;(typeof settings.ui.middleware[0]).should.equal('function') // iFrame middleware
+        // calling the middleware function should add the CSP header & call next
+        const headers = {}
+        let nextCalled = false
+        const res = {
+            set: function (header, value) {
+                headers[header] = value
+            }
+        }
+        const next = function () {
+            nextCalled = true
+        }
+        settings.ui.middleware[0]({}, res, next)
+        headers.should.have.property('Content-Security-Policy', 'frame-ancestors *')
+        nextCalled.should.equal(true)
+    })
     it('includes HA settings when enabled', async function () {
         const result = runtimeSettings.getSettingsFile({
             baseURL: 'https://BASEURL',