Merge pull request #16 from echohello-dev/feature/helmet-plausible

chore: CSP Plausible

Author: johnnyhuy

.env.example

@@ -1,8 +1,11 @@
+# GitHub
 GITHUB_TOKEN=
 
+# Backstage
+PLAUSIBLE_DATA_DOMAIN=backstage.localhost
+PLAUSIBLE_SOURCE_URL=http://plausible.localhost/js/script.js
+
 # Plausible
 BASE_URL=http://plausible.localhost
-PLAUSIBLE_DATA_DOMAIN=http://backstage.localhost
-PLAUSIBLE_SOURCE_DOMAIN=http://plausible.localhost
 SECRET_KEY_BASE=
 TOTP_VAULT_KEY=

app-config.example.yaml

@@ -20,6 +20,7 @@ catalog:
       target: ../../examples/all.yaml
     - type: file
       target: ../../examples/acme-corp.yaml
-
-plausible:
-  enabled: false
+# plausible:
+#   enabled: true
+#   dataDomain: backstage.localhost
+#   sourceUrl: http://plausible.localhost/js/script.js

app-config.production.yaml

@@ -36,4 +36,4 @@ catalog:
 plausible:
   enabled: true
   dataDomain: ${PLAUSIBLE_DATA_DOMAIN}
-  sourceDomain: ${PLAUSIBLE_SOURCE_DOMAIN}
+  sourceUrl: ${PLAUSIBLE_SOURCE_URL}

app-config.yaml

@@ -19,6 +19,7 @@ backend:
     # host: 127.0.0.1
   csp:
     connect-src: ["'self'", 'http:', 'https:']
+    script-src: ["'self'", 'http:', 'https:']
     # Content-Security-Policy directives follow the Helmet format: https://helmetjs.github.io/#reference
     # Default Helmet Content-Security-Policy values can be removed by setting the key to false
   cors:

plugins/plausible/config.d.ts

@@ -1,18 +1,26 @@
 export interface Config {
   plausible?: {
     /**
+     * Whether Plausible Analytics is enabled.
+     *
      * @visibility frontend
      */
     enabled: boolean;
 
     /**
+     * Plausible data domain to track.
+     *
      * @visibility frontend
+     * @example example.com
      */
     dataDomain: string;
 
     /**
+     * Plausible source URL to load the script from.
+     *
      * @visibility frontend
+     * @example https://plausible.example.com/js/script.js
      */
-    sourceDomain: string;
+    sourceUrl: string;
   };
 }

plugins/plausible/package.json

@@ -30,6 +30,7 @@
     "@material-ui/core": "^4.9.13",
     "@material-ui/icons": "^4.9.1",
     "@material-ui/lab": "4.0.0-alpha.61",
+    "react-helmet": "^6.1.0",
     "react-use": "^17.2.4"
   },
   "peerDependencies": {
@@ -43,6 +44,7 @@
     "@testing-library/jest-dom": "^6.0.0",
     "@testing-library/react": "^14.0.0",
     "@testing-library/user-event": "^14.0.0",
+    "@types/react-helmet": "^6",
     "msw": "^1.0.0",
     "react": "^16.13.1 || ^17.0.0 || ^18.0.0"
   },

plugins/plausible/src/components/PlausibleAnalytics.tsx

@@ -1,16 +1,20 @@
 import { useApi, configApiRef } from '@backstage/core-plugin-api';
 import React from 'react';
+import { Helmet } from 'react-helmet';
 
 export const PlausibleAnalytics = () => {
   const config = useApi(configApiRef);
   const enabled = config.getOptionalBoolean('plausible.enabled') ?? false;
   const dataDomain = config.getOptionalString('plausible.dataDomain');
-  const sourceDomain = config.getOptionalString('plausible.sourceDomain');
-  const source = `https://${sourceDomain}/js/script.js`;
+  const sourceUrl = config.getOptionalString('plausible.sourceUrl');
 
-  if (!enabled || !dataDomain || !sourceDomain) {
+  if (!enabled || !dataDomain || !sourceUrl) {
     return null;
   }
 
-  return <script defer data-domain={dataDomain} src={source} />;
+  return (
+    <Helmet>
+      <script defer data-domain={dataDomain} src={sourceUrl} />
+    </Helmet>
+  );
 };

plugins/plausible/src/plugin.test.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { render } from '@testing-library/react';
+import { render, waitFor } from '@testing-library/react';
 import { ConfigApi, configApiRef } from '@backstage/core-plugin-api';
 import { TestApiProvider } from '@backstage/test-utils';
 import { PlausibleAnalytics } from './components/PlausibleAnalytics';
@@ -34,26 +34,31 @@ describe('PlausibleAnalytics', () => {
     expect(container.firstChild).toBeNull();
   });
 
-  it('renders script tag when plausible is enabled and domain is provided', () => {
+  it('renders script tag when plausible is configured', async () => {
     const config = mockConfigApi({
       plausible: {
         enabled: true,
         dataDomain: 'example.com',
-        sourceDomain: 'plausible.example.com',
+        sourceUrl: 'https://plausible.example.com/js/script.js',
       },
     });
-    const { container } = render(
+    render(
       <TestApiProvider apis={[[configApiRef, config]]}>
         <PlausibleAnalytics />
       </TestApiProvider>,
     );
-    const scriptTag = container.querySelector('script');
-    expect(scriptTag).toBeInTheDocument();
-    expect(scriptTag).toHaveAttribute('data-domain', 'example.com');
-    expect(scriptTag).toHaveAttribute(
-      'src',
-      'https://plausible.example.com/js/script.js',
-    );
-    expect(scriptTag).toHaveAttribute('defer');
+
+    await waitFor(() => {
+      const scriptTag = document.querySelector(
+        'script[data-domain="example.com"]',
+      );
+      expect(scriptTag).toBeInTheDocument();
+      expect(scriptTag).toHaveAttribute('data-domain', 'example.com');
+      expect(scriptTag).toHaveAttribute(
+        'src',
+        'https://plausible.example.com/js/script.js',
+      );
+      expect(scriptTag).toHaveAttribute('defer');
+    });
   });
 });

yarn.lock

@@ -6152,8 +6152,10 @@ __metadata:
     "@testing-library/jest-dom": "npm:^6.0.0"
     "@testing-library/react": "npm:^14.0.0"
     "@testing-library/user-event": "npm:^14.0.0"
+    "@types/react-helmet": "npm:^6"
     msw: "npm:^1.0.0"
     react: "npm:^16.13.1 || ^17.0.0 || ^18.0.0"
+    react-helmet: "npm:^6.1.0"
     react-use: "npm:^17.2.4"
   peerDependencies:
     react: ^16.13.1 || ^17.0.0 || ^18.0.0
@@ -12100,6 +12102,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@types/react-helmet@npm:^6":
+  version: 6.1.11
+  resolution: "@types/react-helmet@npm:6.1.11"
+  dependencies:
+    "@types/react": "npm:*"
+  checksum: 10c0/f7b3bb2151d992a108ae46fed876fb9c8119108397d9a01d150c5642782997542c8b3c52e742b56e8689b7dbfa62ca9cfc76aa7e05dec4e60c652f7ef53fa783
+  languageName: node
+  linkType: hard
+
 "@types/react-redux@npm:^7.1.20":
   version: 7.1.33
   resolution: "@types/react-redux@npm:7.1.33"
@@ -27523,7 +27534,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"react-helmet@npm:6.1.0":
+"react-helmet@npm:6.1.0, react-helmet@npm:^6.1.0":
   version: 6.1.0
   resolution: "react-helmet@npm:6.1.0"
   dependencies: