Plugins: Fix plugins CDN not working when plugins are not in domain's root path (#63202)

* Plugins CDN: Add support for different CDN root path

* Plugins CDN: Make frontendsettings return the correct CDN base path

* Update comments

* Fix version detection

* Undo frontend changes

* Fix system.js asset path construction

* fix(plugins): translate all plugin css asset paths loaded via cdn

* refactor(plugins): rename extractPluginNameVersionFromUrl and add comments

* Fix typo in comment

Co-authored-by: Will Browne <wbrowne@users.noreply.github.com>

* Hardcode CDN URL structure

/{id}/{version}/public/plugins/{id}/{assetPath} is not required anymore in the cdn url template config

---------

Co-authored-by: Jack Westbrook <jack.westbrook@gmail.com>
Co-authored-by: Will Browne <wbrowne@users.noreply.github.com>

pkg/api/frontendsettings_test.go

@@ -166,7 +166,7 @@ func TestHTTPServer_GetFrontendSettings_pluginsCDNBaseURL(t *testing.T) {
 		{
 			desc: "With CDN",
 			mutateCfg: func(cfg *setting.Cfg) {
-				cfg.PluginsCDNURLTemplate = "https://cdn.example.com/{id}/{version}/public/plugins/{id}/{assetPath}"
+				cfg.PluginsCDNURLTemplate = "https://cdn.example.com"
 			},
 			expected: settings{PluginsCDNBaseURL: "https://cdn.example.com"},
 		},

pkg/api/plugins_test.go

@@ -174,7 +174,7 @@ func Test_GetPluginAssetCDNRedirect(t *testing.T) {
 			},
 		}
 		cfg := setting.NewCfg()
-		cfg.PluginsCDNURLTemplate = "https://cdn.example.com/{id}/{version}/public/plugins/{id}/{assetPath}"
+		cfg.PluginsCDNURLTemplate = "https://cdn.example.com"
 		cfg.PluginSettings = map[string]map[string]string{
 			cdnPluginID: {"cdn": "true"},
 		}

pkg/plugins/manager/loader/assetpath/assetpath_test.go

@@ -1,6 +1,7 @@
 package assetpath
 
 import (
+	"strings"
 	"testing"
 
 	"github.com/grafana/grafana/pkg/plugins"
@@ -14,75 +15,101 @@ func extPath(pluginID string) string {
 }
 
 func TestService(t *testing.T) {
-	svc := ProvideService(pluginscdn.ProvideService(&config.Cfg{
-		PluginsCDNURLTemplate: "https://cdn.example.com/{id}/{version}/public/plugins/{id}/{assetPath}",
-		PluginSettings: map[string]map[string]string{
-			"one": {"cdn": "true"},
-			"two": {},
+	for _, tc := range []struct {
+		name       string
+		cdnBaseURL string
+	}{
+		{
+			name:       "Simple",
+			cdnBaseURL: "https://cdn.example.com",
 		},
-	}))
+		{
+			name:       "Not root",
+			cdnBaseURL: "https://cdn.example.com/plugins",
+		},
+		{
+			name:       "End slashes",
+			cdnBaseURL: "https://cdn.example.com/plugins////",
+		},
+	} {
+		t.Run(tc.name, func(t *testing.T) {
+			svc := ProvideService(pluginscdn.ProvideService(&config.Cfg{
+				PluginsCDNURLTemplate: tc.cdnBaseURL,
+				PluginSettings: map[string]map[string]string{
+					"one": {"cdn": "true"},
+					"two": {},
+				},
+			}))
 
-	const tableOldPath = "/grafana/public/app/plugins/panel/table-old"
-	jsonData := map[string]plugins.JSONData{
-		"table-old": {ID: "table-old", Info: plugins.Info{Version: "1.0.0"}},
+			const tableOldPath = "/grafana/public/app/plugins/panel/table-old"
+			jsonData := map[string]plugins.JSONData{
+				"table-old": {ID: "table-old", Info: plugins.Info{Version: "1.0.0"}},
 
-		"one": {ID: "one", Info: plugins.Info{Version: "1.0.0"}},
-		"two": {ID: "two", Info: plugins.Info{Version: "2.0.0"}},
+				"one": {ID: "one", Info: plugins.Info{Version: "1.0.0"}},
+				"two": {ID: "two", Info: plugins.Info{Version: "2.0.0"}},
+			}
+
+			t.Run("CDN Base URL", func(t *testing.T) {
+				base, err := svc.cdn.BaseURL()
+				require.NoError(t, err)
+				require.Equal(t, tc.cdnBaseURL, base)
+			})
+
+			t.Run("Base", func(t *testing.T) {
+				base, err := svc.Base(jsonData["one"], plugins.External, extPath("one"))
+				require.NoError(t, err)
+				require.Equal(t, "plugin-cdn/one/1.0.0/public/plugins/one", base)
+
+				base, err = svc.Base(jsonData["two"], plugins.External, extPath("two"))
+				require.NoError(t, err)
+				require.Equal(t, "public/plugins/two", base)
+
+				base, err = svc.Base(jsonData["table-old"], plugins.Core, tableOldPath)
+				require.NoError(t, err)
+				require.Equal(t, "public/app/plugins/table-old", base)
+			})
+
+			t.Run("Module", func(t *testing.T) {
+				module, err := svc.Module(jsonData["one"], plugins.External, extPath("one"))
+				require.NoError(t, err)
+				require.Equal(t, "plugin-cdn/one/1.0.0/public/plugins/one/module", module)
+
+				module, err = svc.Module(jsonData["two"], plugins.External, extPath("two"))
+				require.NoError(t, err)
+				require.Equal(t, "plugins/two/module", module)
+
+				module, err = svc.Module(jsonData["table-old"], plugins.Core, tableOldPath)
+				require.NoError(t, err)
+				require.Equal(t, "app/plugins/table-old/module", module)
+			})
+
+			t.Run("RelativeURL", func(t *testing.T) {
+				pluginsMap := map[string]*plugins.Plugin{
+					"one": {
+						JSONData: plugins.JSONData{ID: "one", Info: plugins.Info{Version: "1.0.0"}},
+						BaseURL:  "plugin-cdn/one/1.0.0/public/pluginsMap/one",
+					},
+					"two": {
+						JSONData: plugins.JSONData{ID: "two", Info: plugins.Info{Version: "2.0.0"}},
+						BaseURL:  "public/pluginsMap/two",
+					},
+				}
+				u, err := svc.RelativeURL(pluginsMap["one"], "", "default")
+				require.NoError(t, err)
+				require.Equal(t, "default", u)
+
+				u, err = svc.RelativeURL(pluginsMap["one"], "path/to/file.txt", "default")
+				require.NoError(t, err)
+				require.Equal(t, strings.TrimRight(tc.cdnBaseURL, "/")+"/one/1.0.0/public/plugins/one/path/to/file.txt", u)
+
+				u, err = svc.RelativeURL(pluginsMap["two"], "path/to/file.txt", "default")
+				require.NoError(t, err)
+				require.Equal(t, "public/pluginsMap/two/path/to/file.txt", u)
+
+				u, err = svc.RelativeURL(pluginsMap["two"], "default", "default")
+				require.NoError(t, err)
+				require.Equal(t, "default", u)
+			})
+		})
 	}
-
-	t.Run("Base", func(t *testing.T) {
-		base, err := svc.Base(jsonData["one"], plugins.External, extPath("one"))
-		require.NoError(t, err)
-		require.Equal(t, "plugin-cdn/one/1.0.0/public/plugins/one", base)
-
-		base, err = svc.Base(jsonData["two"], plugins.External, extPath("two"))
-		require.NoError(t, err)
-		require.Equal(t, "public/plugins/two", base)
-
-		base, err = svc.Base(jsonData["table-old"], plugins.Core, tableOldPath)
-		require.NoError(t, err)
-		require.Equal(t, "public/app/plugins/table-old", base)
-	})
-
-	t.Run("Module", func(t *testing.T) {
-		module, err := svc.Module(jsonData["one"], plugins.External, extPath("one"))
-		require.NoError(t, err)
-		require.Equal(t, "plugin-cdn/one/1.0.0/public/plugins/one/module", module)
-
-		module, err = svc.Module(jsonData["two"], plugins.External, extPath("two"))
-		require.NoError(t, err)
-		require.Equal(t, "plugins/two/module", module)
-
-		module, err = svc.Module(jsonData["table-old"], plugins.Core, tableOldPath)
-		require.NoError(t, err)
-		require.Equal(t, "app/plugins/table-old/module", module)
-	})
-
-	t.Run("RelativeURL", func(t *testing.T) {
-		pluginsMap := map[string]*plugins.Plugin{
-			"one": {
-				JSONData: plugins.JSONData{ID: "one", Info: plugins.Info{Version: "1.0.0"}},
-				BaseURL:  "plugin-cdn/one/1.0.0/public/pluginsMap/one",
-			},
-			"two": {
-				JSONData: plugins.JSONData{ID: "two", Info: plugins.Info{Version: "2.0.0"}},
-				BaseURL:  "public/pluginsMap/two",
-			},
-		}
-		u, err := svc.RelativeURL(pluginsMap["one"], "", "default")
-		require.NoError(t, err)
-		require.Equal(t, "default", u)
-
-		u, err = svc.RelativeURL(pluginsMap["one"], "path/to/file.txt", "default")
-		require.NoError(t, err)
-		require.Equal(t, "https://cdn.example.com/one/1.0.0/public/plugins/one/path/to/file.txt", u)
-
-		u, err = svc.RelativeURL(pluginsMap["two"], "path/to/file.txt", "default")
-		require.NoError(t, err)
-		require.Equal(t, "public/pluginsMap/two/path/to/file.txt", u)
-
-		u, err = svc.RelativeURL(pluginsMap["two"], "default", "default")
-		require.NoError(t, err)
-		require.Equal(t, "default", u)
-	})
 }

pkg/plugins/manager/loader/loader_test.go

@@ -412,7 +412,7 @@ func TestLoader_Load(t *testing.T) {
 			name:  "Load CDN plugin",
 			class: plugins.External,
 			cfg: &config.Cfg{
-				PluginsCDNURLTemplate: "https://cdn.example.com/{id}/{version}/public/plugins/{id}/{assetPath}",
+				PluginsCDNURLTemplate: "https://cdn.example.com",
 				PluginSettings: setting.PluginSettings{
 					"grafana-worldmap-panel": {"cdn": "true"},
 				},

pkg/plugins/pluginscdn/pluginscdn.go

@@ -2,16 +2,17 @@ package pluginscdn
 
 import (
 	"errors"
-	"fmt"
-	"net/url"
-	"path"
+	"strings"
 
 	"github.com/grafana/grafana/pkg/plugins/config"
 )
 
 const (
-	// systemJSCDNKeyword is the path prefix used by system.js to identify the plugins CDN.
-	systemJSCDNKeyword = "plugin-cdn"
+	// cdnAssetPathTemplate is the relative path template used to locate plugin CDN assets
+	cdnAssetPathTemplate = "{id}/{version}/public/plugins/{id}/{assetPath}"
+
+	// systemJSCDNURLTemplate is a special path template used by system.js to identify plugin CDN assets
+	systemJSCDNURLTemplate = "plugin-cdn/" + cdnAssetPathTemplate
 )
 
 var ErrPluginNotCDN = errors.New("plugin is not a cdn plugin")
@@ -30,7 +31,7 @@ func ProvideService(cfg *config.Cfg) *Service {
 // and invalid base url.
 func (s *Service) NewCDNURLConstructor(pluginID, pluginVersion string) URLConstructor {
 	return URLConstructor{
-		cdnURLTemplate: s.cfg.PluginsCDNURLTemplate,
+		cdnURLTemplate: strings.TrimRight(s.cfg.PluginsCDNURLTemplate, "/") + "/" + cdnAssetPathTemplate,
 		pluginID:       pluginID,
 		pluginVersion:  pluginVersion,
 	}
@@ -47,27 +48,28 @@ func (s *Service) PluginSupported(pluginID string) bool {
 }
 
 // BaseURL returns the absolute base URL of the plugins CDN.
+// This is the "fixed" part of the URL (protocol + host + root url).
 // If the plugins CDN is disabled, it returns an empty string.
 func (s *Service) BaseURL() (string, error) {
 	if !s.IsEnabled() {
 		return "", nil
 	}
-	u, err := url.Parse(s.cfg.PluginsCDNURLTemplate)
-	if err != nil {
-		return "", fmt.Errorf("url parse: %w", err)
-	}
-	return u.Scheme + "://" + u.Host, nil
+	return s.cfg.PluginsCDNURLTemplate, nil
 }
 
 // SystemJSAssetPath returns a system-js path for the specified asset on the plugins CDN.
-// It replaces the base path of the CDN with systemJSCDNKeyword.
+// The returned path will follow the template specified in systemJSCDNURLTemplate.
 // If assetPath is an empty string, the base path for the plugin is returned.
 func (s *Service) SystemJSAssetPath(pluginID, pluginVersion, assetPath string) (string, error) {
-	u, err := s.NewCDNURLConstructor(pluginID, pluginVersion).Path(assetPath)
+	u, err := URLConstructor{
+		cdnURLTemplate: systemJSCDNURLTemplate,
+		pluginID:       pluginID,
+		pluginVersion:  pluginVersion,
+	}.Path(assetPath)
 	if err != nil {
 		return "", err
 	}
-	return path.Join(systemJSCDNKeyword, u.Path), nil
+	return u.String(), nil
 }
 
 // AssetURL returns the URL of a CDN asset for a CDN plugin. If the specified plugin is not a CDN plugin,

pkg/plugins/pluginscdn/pluginscdn_test.go

@@ -9,7 +9,7 @@ import (
 
 func TestService(t *testing.T) {
 	svc := ProvideService(&config.Cfg{
-		PluginsCDNURLTemplate: "https://cdn.example.com/{id}/{version}/public/plugins/{id}/{assetPath}",
+		PluginsCDNURLTemplate: "https://cdn.example.com",
 		PluginSettings: map[string]map[string]string{
 			"one": {"cdn": "true"},
 			"two": {},
@@ -30,8 +30,8 @@ func TestService(t *testing.T) {
 		}{
 			{
 				name:       "valid",
-				cfgURL:     "https://grafana-assets.grafana.net/plugin-cdn-test/plugin-cdn/{id}/{version}/public/plugins/{id}/{assetPath}",
-				expBaseURL: "https://grafana-assets.grafana.net",
+				cfgURL:     "https://grafana-assets.grafana.net/plugin-cdn-test/plugin-cdn",
+				expBaseURL: "https://grafana-assets.grafana.net/plugin-cdn-test/plugin-cdn",
 			},
 			{
 				name:       "empty",