dashboard: inline svgs + css for better forward auth (#771)

internal/frontend/assets/html/dashboard.go.html

@@ -17,7 +17,7 @@
             {{else}}
             <img
               class="icon"
-              src="/.pomerium/assets/img/account_circle-24px.svg"
+              src="{{dataURL "/.pomerium/assets/img/account_circle-24px.svg"}}"
               xmlns="http://www.w3.org/2000/svg"
             />
             {{end}}
@@ -198,7 +198,7 @@
             <h2>Sign-in-as</h2>
             <img
               class="icon"
-              src="/.pomerium/assets/img/supervised_user_circle-24px.svg"
+              src="{{dataURL "/.pomerium/assets/img/supervised_user_circle-24px.svg"}}"
               xmlns="http://www.w3.org/2000/svg"
             />
           </div>

internal/frontend/assets/html/error.go.html

@@ -12,7 +12,7 @@
           <div class="card-header">
             <img
               class="icon"
-              src="/.pomerium/assets/img/error-24px.svg"
+              src="{{dataURL "/.pomerium/assets/img/error-24px.svg"}}"
               xmlns="http://www.w3.org/2000/svg"
             />
             <h2>{{.StatusText}}</h2>
@@ -39,7 +39,7 @@
           <div class="card-footer">
             <a href="https://www.pomerium.io">
               <img
-                src="/.pomerium/assets/img/pomerium_circle_96.svg"
+                src="{{dataURL "/.pomerium/assets/img/pomerium_circle_96.svg"}}"
                 xmlns="http://www.w3.org/2000/svg"
                 class="icon"
               />

internal/frontend/assets/html/header.go.html

@@ -6,6 +6,11 @@
 <link
   rel="stylesheet"
   type="text/css"
-  href="/.pomerium/assets/style/main.css"
+  href="{{dataURL "/.pomerium/assets/style/main.css"}}"
+/>
+<link
+  rel="icon"
+  type="image/png"
+  href="{{dataURL "/.pomerium/assets/img/account_circle-24px.svg"}}"
 />
 {{end}}

internal/frontend/templates.go

@@ -5,11 +5,15 @@
 package frontend
 
 import (
+	"encoding/base64"
 	"fmt"
 	"html/template"
 	"io/ioutil"
+	"mime"
 	"net/http"
 	"os"
+	"path"
+	"strings"
 
 	"github.com/rakyll/statik/fs"
 
@@ -20,12 +24,45 @@ const statikNamespace = "web"
 
 // NewTemplates loads pomerium's templates. Panics on failure.
 func NewTemplates() (*template.Template, error) {
-	t := template.New("pomerium-templates")
 	statikFS, err := fs.NewWithNamespace(statikNamespace)
 	if err != nil {
 		return nil, fmt.Errorf("internal/frontend: error creating new file system: %w", err)
 	}
 
+	dataURLs := map[string]template.URL{}
+
+	err = fs.Walk(statikFS, "/", func(filePath string, fileInfo os.FileInfo, _ error) error {
+		if fileInfo.IsDir() {
+			return nil
+		}
+
+		file, err := statikFS.Open(filePath)
+		if err != nil {
+			return fmt.Errorf("internal/frontend: error opening %s: %w", filePath, err)
+		}
+		defer file.Close()
+
+		bs, err := ioutil.ReadAll(file)
+		if err != nil {
+			return fmt.Errorf("internal/frontend: error reading %s: %w", filePath, err)
+		}
+
+		encoded := base64.StdEncoding.EncodeToString(bs)
+		dataURLs[filePath] = template.URL(fmt.Sprintf(
+			"data:%s;base64,%s", mime.TypeByExtension(path.Ext(filePath)), encoded))
+
+		return nil
+	})
+	if err != nil {
+		return nil, err
+	}
+
+	t := template.New("pomerium-templates").Funcs(map[string]interface{}{
+		"dataURL": func(p string) template.URL {
+			return dataURLs[strings.TrimPrefix(p, "/.pomerium/assets")]
+		},
+	})
+
 	err = fs.Walk(statikFS, "/html", func(filePath string, fileInfo os.FileInfo, err error) error {
 		if !fileInfo.IsDir() {
 			file, err := statikFS.Open(filePath)

internal/httputil/headers.go

@@ -18,7 +18,7 @@ const (
 // by default includes profile photo exceptions for supported identity providers.
 // https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/script-src
 var HeadersContentSecurityPolicy = map[string]string{
-	"Content-Security-Policy": "default-src 'none'; style-src 'self'; img-src *;",
+	"Content-Security-Policy": "default-src 'none'; style-src 'self' data:; img-src * data:;",
 	"Referrer-Policy":         "Same-origin",
 }