From 99f7e0d98097e1f9a00f09c485c869db59eddc17 Mon Sep 17 00:00:00 2001
From: Amir Raminfar <findamir@gmail.com>
Date: Fri, 8 May 2020 19:45:08 -0700
Subject: [PATCH] Implements Content-Security-Policy (#442)

---
 __snapshots__/dozzle.snapshot                 |  4 +++
 assets/App.spec.js                            |  3 ++-
 assets/components/LogEventSource.spec.js      | 15 +++--------
 assets/components/LogEventSource.vue          |  3 ++-
 .../__snapshots__/LogEventSource.spec.js.snap | 13 +++++++++
 assets/index.ejs                              | 13 ++++-----
 assets/main.js                                |  3 ++-
 assets/pages/Settings.vue                     |  5 ++--
 assets/store/config.js                        |  2 ++
 assets/store/index.js                         |  5 ++--
 main.go                                       | 18 -------------
 package.json                                  |  6 ++---
 routes.go                                     | 27 ++++++++++++++++++-
 webpack.config.js                             |  5 ++--
 14 files changed, 73 insertions(+), 49 deletions(-)
 create mode 100644 assets/components/__snapshots__/LogEventSource.spec.js.snap
 create mode 100644 assets/store/config.js

diff --git a/__snapshots__/dozzle.snapshot b/__snapshots__/dozzle.snapshot
index 94e150c3..27ee7616 100644
--- a/__snapshots__/dozzle.snapshot
+++ b/__snapshots__/dozzle.snapshot
@@ -1,6 +1,7 @@
 /* snapshot: Test_createRoutes_foobar */
 HTTP/1.1 200 OK
 Connection: close
+Content-Security-Policy: default-src 'none'; script-src 'self'; style-src 'self' fonts.googleapis.com; img-src 'self'; manifest-src 'self'; font-src fonts.gstatic.com; connect-src 'self'
 Content-Type: text/plain; charset=utf-8
 
 foo page
@@ -8,6 +9,7 @@ foo page
 /* snapshot: Test_createRoutes_index */
 HTTP/1.1 200 OK
 Connection: close
+Content-Security-Policy: default-src 'none'; script-src 'self'; style-src 'self' fonts.googleapis.com; img-src 'self'; manifest-src 'self'; font-src fonts.gstatic.com; connect-src 'self'
 Content-Type: text/plain; charset=utf-8
 
 index page
@@ -15,6 +17,7 @@ index page
 /* snapshot: Test_createRoutes_redirect */
 HTTP/1.1 301 Moved Permanently
 Connection: close
+Content-Security-Policy: default-src 'none'; script-src 'self'; style-src 'self' fonts.googleapis.com; img-src 'self'; manifest-src 'self'; font-src fonts.gstatic.com; connect-src 'self'
 Content-Type: text/html; charset=utf-8
 Location: /foobar/
 
@@ -23,6 +26,7 @@ Location: /foobar/
 /* snapshot: Test_createRoutes_version */
 HTTP/1.1 200 OK
 Connection: close
+Content-Security-Policy: default-src 'none'; script-src 'self'; style-src 'self' fonts.googleapis.com; img-src 'self'; manifest-src 'self'; font-src fonts.gstatic.com; connect-src 'self'
 Content-Type: text/plain; charset=utf-8
 
 dev
diff --git a/assets/App.spec.js b/assets/App.spec.js
index 57472e94..1e364e47 100644
--- a/assets/App.spec.js
+++ b/assets/App.spec.js
@@ -3,6 +3,8 @@ import { shallowMount, RouterLinkStub, createLocalVue } from "@vue/test-utils";
 import Vuex from "vuex";
 import App from "./App";
 
+jest.mock("./store/config.js", () => ({ base: "" }));
+
 const localVue = createLocalVue();
 
 localVue.use(Vuex);
@@ -12,7 +14,6 @@ describe("<App />", () => {
   let store;
 
   beforeEach(() => {
-    global.BASE_PATH = "";
     global.EventSource = EventSource;
     const state = {
       containers: [
diff --git a/assets/components/LogEventSource.spec.js b/assets/components/LogEventSource.spec.js
index 9a7a1c2b..c0ee97f6 100644
--- a/assets/components/LogEventSource.spec.js
+++ b/assets/components/LogEventSource.spec.js
@@ -13,9 +13,10 @@ jest.mock("lodash.debounce", () =>
   })
 );
 
+jest.mock("../store/config.js", () => ({ base: "" }));
+
 describe("<LogEventSource />", () => {
   beforeEach(() => {
-    global.BASE_PATH = "";
     global.EventSource = EventSource;
     MockDate.set("6/12/2019", 0);
     window.scrollTo = jest.fn();
@@ -57,17 +58,7 @@ describe("<LogEventSource />", () => {
 
   test("renders correctly", async () => {
     const wrapper = createLogEventSource();
-    expect(wrapper.element).toMatchInlineSnapshot(`
-      <div>
-        <div
-          class="control"
-        />
-         
-        <ul
-          class="events medium"
-        />
-      </div>
-    `);
+    expect(wrapper.element).toMatchSnapshot();
   });
 
   test("should connect to EventSource", async () => {
diff --git a/assets/components/LogEventSource.vue b/assets/components/LogEventSource.vue
index 1faf0a30..cb13bc89 100644
--- a/assets/components/LogEventSource.vue
+++ b/assets/components/LogEventSource.vue
@@ -8,6 +8,7 @@
 <script>
 import debounce from "lodash.debounce";
 import InfiniteLoader from "./InfiniteLoader";
+import config from "../store/config";
 
 export default {
   props: ["id"],
@@ -33,7 +34,7 @@ export default {
         this.buffer = [];
         this.es = null;
       }
-      this.es = new EventSource(`${BASE_PATH}/api/logs/stream?id=${this.id}`);
+      this.es = new EventSource(`${config.base}/api/logs/stream?id=${this.id}`);
       const flushBuffer = debounce(
         () => {
           this.messages.push(...this.buffer);
diff --git a/assets/components/__snapshots__/LogEventSource.spec.js.snap b/assets/components/__snapshots__/LogEventSource.spec.js.snap
new file mode 100644
index 00000000..8d8f1252
--- /dev/null
+++ b/assets/components/__snapshots__/LogEventSource.spec.js.snap
@@ -0,0 +1,13 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<LogEventSource /> renders correctly 1`] = `
+<div>
+  <div
+    class="control"
+  />
+   
+  <ul
+    class="events medium"
+  />
+</div>
+`;
diff --git a/assets/index.ejs b/assets/index.ejs
index a34127ed..77cebdb9 100644
--- a/assets/index.ejs
+++ b/assets/index.ejs
@@ -4,17 +4,18 @@
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <title>Dozzle</title>
-    <link href="https://fonts.googleapis.com/css?family=Roboto|Roboto+Mono|Gafata" rel="stylesheet" />  
-    <script>
-      window["BASE_PATH"] = "{{ .Base }}";
-      window["VERSION"] = "{{ .Version }}";
+    <link href="https://fonts.googleapis.com/css?family=Roboto|Roboto+Mono|Gafata" rel="stylesheet" />
+    <script type="application/json" id="config__json">
+      {
+        "base": "{{ .Base }}",
+        "version": "{{ .Version }}"
+      }
     </script>
   </head>
-
   <body>
     <svg
       aria-hidden="true"
-      style="position: absolute; width: 0; height: 0; overflow: hidden;"
+      class="is-hidden"
       version="1.1"
       xmlns="http://www.w3.org/2000/svg"
       xmlns:xlink="http://www.w3.org/1999/xlink"
diff --git a/assets/main.js b/assets/main.js
index 4cfe1397..18ff7fd5 100644
--- a/assets/main.js
+++ b/assets/main.js
@@ -4,6 +4,7 @@ import Meta from "vue-meta";
 import Dropdown from "buefy/dist/esm/dropdown";
 import Switch from "buefy/dist/esm/switch";
 import store from "./store";
+import config from "./store/config";
 import App from "./App.vue";
 import Container from "./pages/Container.vue";
 import Settings from "./pages/Settings.vue";
@@ -35,7 +36,7 @@ const routes = [
 
 const router = new VueRouter({
   mode: "history",
-  base: BASE_PATH + "/",
+  base: config.base + "/",
   routes,
 });
 
diff --git a/assets/pages/Settings.vue b/assets/pages/Settings.vue
index fa3e7482..05ccffdf 100644
--- a/assets/pages/Settings.vue
+++ b/assets/pages/Settings.vue
@@ -72,6 +72,7 @@ import gt from "semver/functions/gt";
 import valid from "semver/functions/valid";
 import { mapActions, mapState } from "vuex";
 import Icon from "../components/Icon";
+import config from "../store/config";
 
 export default {
   props: [],
@@ -81,7 +82,7 @@ export default {
   },
   data() {
     return {
-      currentVersion: VERSION,
+      currentVersion: config.version,
       nextRelease: null,
       hasUpdate: false,
     };
@@ -117,7 +118,7 @@ export default {
   },
 };
 </script>
-<style lang="scss">
+<style lang="scss" scoped>
 .title {
   color: #eee;
 }
diff --git a/assets/store/config.js b/assets/store/config.js
new file mode 100644
index 00000000..6c72af3f
--- /dev/null
+++ b/assets/store/config.js
@@ -0,0 +1,2 @@
+const config = JSON.parse(document.querySelector("script#config__json").textContent);
+export default config;
diff --git a/assets/store/index.js b/assets/store/index.js
index fbfd49a8..08b5b932 100644
--- a/assets/store/index.js
+++ b/assets/store/index.js
@@ -2,6 +2,7 @@ import Vue from "vue";
 import Vuex from "vuex";
 import storage from "store/dist/store.modern";
 import { DEFAULT_SETTINGS, DOZZLE_SETTINGS_KEY } from "./settings";
+import config from "./config";
 
 Vue.use(Vuex);
 
@@ -50,7 +51,7 @@ const actions = {
     commit("SET_SEARCH", filter);
   },
   async FETCH_CONTAINERS({ commit }) {
-    const containers = await (await fetch(`${BASE_PATH}/api/containers.json`)).json();
+    const containers = await (await fetch(`${config.base}/api/containers.json`)).json();
     commit("SET_CONTAINERS", containers);
   },
   UPDATE_SETTING({ commit }, setting) {
@@ -72,7 +73,7 @@ const getters = {
   },
 };
 
-const es = new EventSource(`${BASE_PATH}/api/events/stream`);
+const es = new EventSource(`${config.base}/api/events/stream`);
 es.addEventListener("containers-changed", (e) => setTimeout(() => store.dispatch("FETCH_CONTAINERS"), 1000), false);
 mql.addListener((e) => store.commit("SET_MOBILE_WIDTH", e.matches));
 
diff --git a/main.go b/main.go
index 433820da..3709e23d 100644
--- a/main.go
+++ b/main.go
@@ -11,7 +11,6 @@ import (
 
 	"github.com/amir20/dozzle/docker"
 	"github.com/gobuffalo/packr"
-	"github.com/gorilla/mux"
 	log "github.com/sirupsen/logrus"
 	"github.com/spf13/pflag"
 	"github.com/spf13/viper"
@@ -75,23 +74,6 @@ func init() {
 	})
 }
 
-func createRoutes(base string, h *handler) *mux.Router {
-	r := mux.NewRouter()
-	if base != "/" {
-		r.HandleFunc(base, http.HandlerFunc(func(w http.ResponseWriter, req *http.Request) {
-			http.Redirect(w, req, base+"/", http.StatusMovedPermanently)
-		}))
-	}
-	s := r.PathPrefix(base).Subrouter()
-	s.HandleFunc("/api/containers.json", h.listContainers)
-	s.HandleFunc("/api/logs/stream", h.streamLogs)
-	s.HandleFunc("/api/logs", h.fetchLogsBetweenDates)
-	s.HandleFunc("/api/events/stream", h.streamEvents)
-	s.HandleFunc("/version", h.version)
-	s.PathPrefix("/").Handler(http.StripPrefix(base, http.HandlerFunc(h.index)))
-	return r
-}
-
 func main() {
 	log.Infof("Dozzle version %s", version)
 	dockerClient := docker.NewClientWithFilters(filters)
diff --git a/package.json b/package.json
index b7e06381..5317355b 100644
--- a/package.json
+++ b/package.json
@@ -3,11 +3,11 @@
  "version": "1.23.2",
  "description": "Realtime log viewer for docker containers. ",
  "scripts": {
-  "prestart": "npm run clean",
-  "start": "concurrently 'npm run watch-server' 'npm run watch-assets'",
+  "prestart": "yarn clean",
+  "start": "concurrently 'yarn watch-server' 'yarn watch-assets'",
   "watch-assets": "webpack --mode=development --watch",
   "watch-server": "reflex -c .reflex",
-  "prebuild": "npm run clean",
+  "prebuild": "yarn clean",
   "build": "yarn webpack --mode=production",
   "clean": "rm -rf static/ a_main-packr.go",
   "release": "release-it",
diff --git a/routes.go b/routes.go
index 3dafa5e3..13383106 100644
--- a/routes.go
+++ b/routes.go
@@ -8,9 +8,35 @@ import (
 	"runtime"
 	"time"
 
+	"github.com/gorilla/mux"
 	log "github.com/sirupsen/logrus"
 )
 
+func createRoutes(base string, h *handler) *mux.Router {
+	r := mux.NewRouter()
+	r.Use(setCSPHeaders)
+	if base != "/" {
+		r.HandleFunc(base, http.HandlerFunc(func(w http.ResponseWriter, req *http.Request) {
+			http.Redirect(w, req, base+"/", http.StatusMovedPermanently)
+		}))
+	}
+	s := r.PathPrefix(base).Subrouter()
+	s.HandleFunc("/api/containers.json", h.listContainers)
+	s.HandleFunc("/api/logs/stream", h.streamLogs)
+	s.HandleFunc("/api/logs", h.fetchLogsBetweenDates)
+	s.HandleFunc("/api/events/stream", h.streamEvents)
+	s.HandleFunc("/version", h.version)
+	s.PathPrefix("/").Handler(http.StripPrefix(base, http.HandlerFunc(h.index)))
+	return r
+}
+
+func setCSPHeaders(next http.Handler) http.Handler {
+	return http.HandlerFunc(func(w http.ResponseWriter, r *http.Request) {
+		w.Header().Set("Content-Security-Policy", "default-src 'none'; script-src 'self'; style-src 'self' fonts.googleapis.com; img-src 'self'; manifest-src 'self'; font-src fonts.gstatic.com; connect-src 'self'")
+		next.ServeHTTP(w, r)
+	})
+}
+
 func (h *handler) index(w http.ResponseWriter, req *http.Request) {
 	fileServer := http.FileServer(h.box)
 	if h.box.Has(req.URL.Path) && req.URL.Path != "" && req.URL.Path != "/" {
@@ -94,7 +120,6 @@ func (h *handler) streamLogs(w http.ResponseWriter, r *http.Request) {
 	w.Header().Set("Connection", "keep-alive")
 	w.Header().Set("X-Accel-Buffering", "no")
 
-
 	log.Debugf("Starting to stream logs for %s", id)
 Loop:
 	for {
diff --git a/webpack.config.js b/webpack.config.js
index 6d1be49e..bfdc8df4 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -4,12 +4,13 @@ const MiniCssExtractPlugin = require("mini-css-extract-plugin");
 const HtmlWebpackPlugin = require("html-webpack-plugin");
 const WebpackPwaManifest = require("webpack-pwa-manifest");
 
-module.exports = {
+module.exports = (env, argv) => ({
   stats: { children: false, entrypoints: false, modules: false },
   performance: {
     maxAssetSize: 350000,
     maxEntrypointSize: 570000,
   },
+  devtool: argv.mode === "development" ? "inline-cheap-source-map" : false,
   entry: ["./assets/main.js", "./assets/styles.scss"],
   output: {
     path: path.resolve(__dirname, "./static"),
@@ -74,4 +75,4 @@ module.exports = {
     },
     extensions: ["*", ".js", ".vue", ".json"],
   },
-};
+});