gui: Set CSRF stuff earlier (fixes #3138)

We need to set these properties *before* Angular starts making requests,
and doing that from the response to a request is too late. The obvious
choice (to me) would be to use the angular $cookies service, but that
service isn't available until after initialization so we can't use it.
Instead, add a special file that is loaded by index.html and includes
the info we need before the JS app even starts running.

GitHub-Pull-Request: https://github.com/syncthing/syncthing/pull/3152

cmd/syncthing/gui.go

@@ -305,6 +305,9 @@ func (s *apiService) Serve() {
 	}
 	mux.Handle("/", assets)
 
+	// Handle the special meta.js path
+	mux.HandleFunc("/meta.js", s.getJSMetadata)
+
 	s.cfg.Subscribe(assets)
 
 	guiCfg := s.cfg.GUI()
@@ -525,6 +528,14 @@ func (s *apiService) restPing(w http.ResponseWriter, r *http.Request) {
 	sendJSON(w, map[string]string{"ping": "pong"})
 }
 
+func (s *apiService) getJSMetadata(w http.ResponseWriter, r *http.Request) {
+	meta, _ := json.Marshal(map[string]string{
+		"deviceID": s.id.String(),
+	})
+	w.Header().Set("Content-Type", "application/javascript")
+	fmt.Fprintf(w, "var metadata = %s;\n", meta)
+}
+
 func (s *apiService) getSystemVersion(w http.ResponseWriter, r *http.Request) {
 	sendJSON(w, map[string]string{
 		"version":     Version,

gui/default/index.html

@@ -664,6 +664,7 @@
 
   <script src="assets/lang/valid-langs.js"></script>
   <script src="assets/lang/prettyprint.js"></script>
+  <script src="meta.js"></script>
   <script src="syncthing/app.js"></script>
   <!-- / gui application code -->
 

gui/default/syncthing/app.js

@@ -23,31 +23,9 @@ var syncthing = angular.module('syncthing', [
 var urlbase = 'rest';
 
 syncthing.config(function ($httpProvider, $translateProvider, LocaleServiceProvider) {
-    $httpProvider.interceptors.push(function xHeadersResponseInterceptor() {
-        var deviceId = null;
-
-        return {
-            response: function onResponse(response) {
-                var headers = response.headers();
-
-                // angular template cache sends no headers
-                if(Object.keys(headers).length === 0) {
-                    return response;
-                }
-
-                if (!deviceId) {
-                    deviceId = headers['x-syncthing-id'];
-                    if (deviceId) {
-                        var deviceIdShort = deviceId.substring(0, 5);
-                        $httpProvider.defaults.xsrfHeaderName = 'X-CSRF-Token-' + deviceIdShort;
-                        $httpProvider.defaults.xsrfCookieName = 'CSRF-Token-' + deviceIdShort;
-                    }
-                }
-
-                return response;
-            }
-        };
-    });
+    var deviceIDShort = metadata.deviceID.substr(0, 5);
+    $httpProvider.defaults.xsrfHeaderName = 'X-CSRF-Token-' + deviceIDShort;
+    $httpProvider.defaults.xsrfCookieName = 'CSRF-Token-' + deviceIDShort;
 
     // language and localisation
 
@@ -59,7 +37,6 @@ syncthing.config(function ($httpProvider, $translateProvider, LocaleServiceProvi
 
     LocaleServiceProvider.setAvailableLocales(validLangs);
     LocaleServiceProvider.setDefaultLocale('en');
-
 });
 
 // @TODO: extract global level functions into separate service(s)