First implementation of vault-plugin

Signed-off-by: ivgo <ivgo@spreadgroup.com>
2022-05-09 16:15:22 +02:00
parent 63f01a3554
commit 09f1256a85
33 changed files with 3658 additions and 2706 deletions
@@ -0,0 +1 @@
+module.exports = require('@backstage/cli/config/eslint-factory')(__dirname);
@@ -0,0 +1,96 @@
+# @backstage/plugin-vault
+
+A frontend for [Vault](https://www.vaultproject.io/), this plugin allows you to display a list of secrets in a certain path inside your vault instance. There are also some useful links to edit and/or view them using the official UI.
+
+![Screenshot of the vault plugin table](images/vault-table.png)
+
+## Introduction
+
+Vault is an identity-based secrets and encryption management system. A secret is anything that you want to tightly control access to, such as API encryption keys, passwords, or certificates. Vault provides encryption services that are gated by authentication and authorization methods.
+
+This plugins allows you to view all the available secrets at a certain location, and redirect you to the official UI so backstage can rely on LIST permissions, which is safer.
+
+## Getting started
+
+To get started, first you need a running instance of Vault. You can follow [this tutorial](https://learn.hashicorp.com/tutorials/vault/getting-started-intro?in=vault/getting-started) to install vault and start your server locally.
+
+1. When your Vault instance is up and running, then you will need to install the plugin into your app:
+
+   ```bash
+     # From your Backstage root directory
+     yarn add --cwd packages/app @backstage/plugin-vault
+   ```
+
+2. Add the Vault card to the overview tab on the EntityPage:
+
+   ```typescript
+     // In packages/app/src/components/catalog/EntityPage.tsx
+     import { EntityVaultCard } from '@backstage/plugin-vault';
+
+     const overviewContent = (
+       <Grid container spacing={3} alignItems="stretch">
+         {/* ...other content */}
+         <Grid item md={6} xs={12}>
+           <EntityVaultCard />
+         </Grid>
+     );
+   ```
+
+3. Add some extra configurations in your [`app-config.yaml`](https://github.com/backstage/backstage/blob/master/app-config.yaml).
+
+   ```yaml
+   vault:
+     sourceUrl: http://your-vault-url
+     token: <VAULT_TOKEN>
+     secretEngine: 'customSecretEngine' # Optional. By default it uses 'secrets'
+     kvVersion: <kv-version> # Optional. The K/V version that your instance is using. The available options are '1' or '2'
+   ```
+
+4. Get a `VAULT_TOKEN` with **LIST** permissions, as it's enough for the plugin. You can check [this tutorial](https://learn.hashicorp.com/tutorials/vault/tokens) for more info.
+
+5. If you also want to use the `renew` functionality, you need to attach the following block to your custom policy, so that Backstage can perform a token-renew:
+   ```
+     # Allow tokens to renew themselves
+     path "auth/token/renew-self" {
+       capabilities = ["update"]
+     }
+   ```
+
+## Integration with the Catalog
+
+The plugin can be integrated into each Component in the catalog. To allow listing the available secrets a new annotation must be added to the `catalog-info.yaml`:
+
+```yaml
+apiVersion: backstage.io/v1alpha1
+kind: Component
+metadata:
+  # ...
+  annotations:
+    vault.io/secrets-path: path/to/secrets
+```
+
+The path is relative to your secrets engine folder. So if you want to get the secrets for backstage and you have the following directory structure:
+
+    .
+    ├── ...
+    ├── secrets                 # Your secret engine name (usually it is `secrets`)
+    │   ├── test                # Folder with test secrets
+    │   │   ├── backstage       # In this folder there are secrets for Backstage
+    │   ├── other               # Other folder with more secrets inside
+    │   └── folder              # And another folder
+    └── ...
+
+You will set the `vault.io/secret-path` to `test/backstage`. If the folder `backstage` contains other sub-folders, the plugin will fetch the secrets inside them and adapt the **View** and **Edit** URLs to point to the correct place.
+
+If the annotation is missing for a certain component, then the card will show some information to the user:
+
+![Screenshot of the vault plugin with missing annotation](images/annotation-missing.png)
+
+## Features
+
+- List the secrets present in a certain path
+- Open a link to view the secret
+- Open a link to edit the secret
+- Renew the token automatically with a defined periodicity
+
+The secrets cannot be edited/viewed from within Backstage to make it more secure. Backstage will only have permissions to LIST data from Vault. And the user who wants to edit/view a certain secret needs the correct permissions to do so.
@@ -0,0 +1,19 @@
+/*
+ * Copyright 2020 The Backstage Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import { createDevApp } from '@backstage/dev-utils';
+import { vaultPlugin } from '../src/plugin';
+
+createDevApp().registerPlugin(vaultPlugin).render();
@@ -0,0 +1,66 @@
+{
+  "name": "@backstage/plugin-vault",
+  "description": "A Backstage plugin that integrates towards Vault",
+  "version": "0.1.0",
+  "main": "src/index.ts",
+  "types": "src/index.ts",
+  "license": "Apache-2.0",
+  "private": false,
+  "publishConfig": {
+    "access": "public",
+    "main": "dist/index.esm.js",
+    "types": "dist/index.d.ts"
+  },
+  "backstage": {
+    "role": "frontend-plugin"
+  },
+  "homepage": "https://backstage.io",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/backstage/backstage",
+    "directory": "plugins/vault"
+  },
+  "keywords": [
+    "backstage",
+    "vault"
+  ],
+  "scripts": {
+    "start": "backstage-cli package start",
+    "build": "backstage-cli package build",
+    "lint": "backstage-cli package lint",
+    "test": "backstage-cli package test",
+    "clean": "backstage-cli package clean",
+    "prepack": "backstage-cli package prepack",
+    "postpack": "backstage-cli package postpack"
+  },
+  "dependencies": {
+    "@backstage/catalog-model": "^1.0.1",
+    "@backstage/core-components": "^0.9.3",
+    "@backstage/core-plugin-api": "^1.0.1",
+    "@backstage/plugin-catalog-react": "^1.0.1",
+    "@backstage/theme": "^0.2.15",
+    "@material-ui/core": "^4.12.2",
+    "@material-ui/icons": "^4.9.1",
+    "@material-ui/lab": "^4.0.0-alpha.57",
+    "react-use": "^17.2.4"
+  },
+  "peerDependencies": {
+    "react": "^16.13.1 || ^17.0.0"
+  },
+  "devDependencies": {
+    "@backstage/cli": "^0.17.0",
+    "@backstage/core-app-api": "^1.0.1",
+    "@backstage/dev-utils": "^1.0.1",
+    "@backstage/test-utils": "^1.0.1",
+    "@testing-library/jest-dom": "^5.10.1",
+    "@testing-library/react": "^12.1.3",
+    "@testing-library/user-event": "^14.0.0",
+    "@types/jest": "*",
+    "@types/node": "*",
+    "cross-fetch": "^3.1.5",
+    "msw": "^0.35.0"
+  },
+  "files": [
+    "dist"
+  ]
+}
@@ -0,0 +1,73 @@
+/*
+ * Copyright 2020 The Backstage Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import { DiscoveryApi, createApiRef } from '@backstage/core-plugin-api';
+
+export const vaultApiRef = createApiRef<VaultApi>({
+  id: 'plugin.vault.service',
+});
+
+export type VaultSecretList = {
+  data: {
+    keys: string[];
+  };
+};
+
+export type Secret = {
+  name: string;
+  showUrl: string;
+  editUrl: string;
+};
+
+export interface VaultApi {
+  listSecrets(secretPath: string): Promise<Secret[]>;
+}
+
+export class VaultClient implements VaultApi {
+  private readonly discoveryApi: DiscoveryApi;
+
+  constructor({ discoveryApi }: { discoveryApi: DiscoveryApi }) {
+    this.discoveryApi = discoveryApi;
+  }
+
+  private async callApi<T>(
+    path: string,
+    query: { [key in string]: any },
+  ): Promise<T | undefined> {
+    const apiUrl = `${await this.discoveryApi.getBaseUrl('vault')}`;
+    const response = await fetch(
+      `${apiUrl}/${path}?${new URLSearchParams(query).toString()}`,
+      {
+        headers: {
+          Accept: 'application/json',
+        },
+      },
+    );
+    if (response.status === 200) {
+      return (await response.json()) as T;
+    }
+    return undefined;
+  }
+
+  async listSecrets(secretPath: string): Promise<Secret[]> {
+    const result = await this.callApi<Secret[]>('v1/secrets', {
+      path: secretPath,
+    });
+    if (!result) {
+      return [];
+    }
+    return result;
+  }
+}
@@ -0,0 +1,75 @@
+/*
+ * Copyright 2020 The Backstage Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import React from 'react';
+import { useEntity } from '@backstage/plugin-catalog-react';
+import { makeStyles, Typography } from '@material-ui/core';
+import { isVaultAvailable } from '../../conditions';
+import { CodeSnippet, InfoCard, Button } from '@backstage/core-components';
+import { BackstageTheme } from '@backstage/theme';
+import { VAULT_SECRET_PATH_ANNOTATION } from '../../constants';
+import { EntityVaultTable } from '../EntityVaultTable';
+
+const COMPONENT_YAML = `metadata:
+  name: example
+  annotations:
+    ${VAULT_SECRET_PATH_ANNOTATION}: value`;
+
+const useStyles = makeStyles<BackstageTheme>(
+  theme => ({
+    code: {
+      borderRadius: 6,
+      margin: `${theme.spacing(2)}px 0px`,
+      background: theme.palette.type === 'dark' ? '#444' : '#fff',
+    },
+  }),
+  { name: 'BackstageMissingVaultAnnotation' },
+);
+
+export const EntityVaultCard = () => {
+  const { entity } = useEntity();
+  const classes = useStyles();
+
+  if (isVaultAvailable(entity)) {
+    return <EntityVaultTable entity={entity} />;
+  }
+  return (
+    <InfoCard title="Vault">
+      <>
+        <Typography variant="body1">
+          Add the annotation to your component YAML as shown in the highlighted
+          example below:
+        </Typography>
+        <div className={classes.code}>
+          <CodeSnippet
+            text={COMPONENT_YAML}
+            language="yaml"
+            showLineNumbers
+            highlightedNumbers={[3, 4]}
+            customStyle={{ background: 'inherit', fontSize: '115%' }}
+          />
+        </div>
+        <Button
+          color="primary"
+          variant="contained"
+          style={{ textDecoration: 'none' }}
+          to="https://backstage.io/docs/features/software-catalog/well-known-annotations"
+        >
+          Read more
+        </Button>
+      </>
+    </InfoCard>
+  );
+};
@@ -0,0 +1,16 @@
+/*
+ * Copyright 2020 The Backstage Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+export { EntityVaultCard } from './EntityVaultCard';
@@ -0,0 +1,98 @@
+/*
+ * Copyright 2020 The Backstage Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import React from 'react';
+import { Entity } from '@backstage/catalog-model';
+import { Table, TableColumn } from '@backstage/core-components';
+import { useApi } from '@backstage/core-plugin-api';
+import { Box, Typography } from '@material-ui/core';
+import Edit from '@material-ui/icons/Edit';
+import Visibility from '@material-ui/icons/Visibility';
+import Alert from '@material-ui/lab/Alert';
+import useAsync from 'react-use/lib/useAsync';
+import { Secret, vaultApiRef } from '../../api';
+import { VAULT_SECRET_PATH_ANNOTATION } from '../../constants';
+
+export const vaultSecretPath = (entity: Entity) => {
+  const secretPath =
+    entity.metadata.annotations?.[VAULT_SECRET_PATH_ANNOTATION] ?? '';
+
+  return { secretPath };
+};
+
+export const EntityVaultTable = ({ entity }: { entity: Entity }) => {
+  const vaultApi = useApi(vaultApiRef);
+  const { secretPath } = vaultSecretPath(entity);
+  const { value, loading, error } = useAsync(async (): Promise<Secret[]> => {
+    return vaultApi.listSecrets(secretPath);
+  }, []);
+
+  const columns: TableColumn[] = [
+    { title: 'Secret', field: 'secret', highlight: true },
+    { title: 'View URL', field: 'view', width: '10%' },
+    { title: 'Edit URL', field: 'edit', width: '10%' },
+  ];
+
+  const data = (value || []).map(secret => {
+    return {
+      secret: secret.name,
+      view: (
+        <a
+          aria-label="View"
+          title={`View ${secret.name}`}
+          href={secret.showUrl}
+        >
+          <Visibility style={{ fontSize: 16 }} />
+        </a>
+      ),
+      edit: (
+        <a
+          aria-label="Edit"
+          title={`Edit ${secret.name}`}
+          href={secret.editUrl}
+        >
+          <Edit style={{ fontSize: 16 }} />
+        </a>
+      ),
+    };
+  });
+
+  if (error) {
+    return <Alert severity="error">{error.message}</Alert>;
+  }
+
+  return (
+    <Table
+      title="Vault"
+      subtitle={`Secrets for ${entity.metadata.name} in ${secretPath}`}
+      columns={columns}
+      data={data}
+      isLoading={loading}
+      options={{
+        padding: 'dense',
+        pageSize: 10,
+        emptyRowsWhenPaging: false,
+        search: false,
+      }}
+      emptyContent={
+        <Box style={{ textAlign: 'center', padding: '15px' }}>
+          <Typography variant="body1">
+            No secrets found for {entity.metadata.name} in {secretPath}
+          </Typography>
+        </Box>
+      }
+    />
+  );
+};
@@ -0,0 +1,16 @@
+/*
+ * Copyright 2020 The Backstage Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+export { EntityVaultTable } from './EntityVaultTable';
@@ -0,0 +1,23 @@
+/*
+ * Copyright 2020 The Backstage Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import { Entity } from '@backstage/catalog-model';
+import { VAULT_SECRET_PATH_ANNOTATION } from './constants';
+
+export function isVaultAvailable(entity: Entity): boolean {
+  return Boolean(
+    entity.metadata.annotations?.hasOwnProperty(VAULT_SECRET_PATH_ANNOTATION),
+  );
+}
@@ -0,0 +1,16 @@
+/*
+ * Copyright 2020 The Backstage Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+export const VAULT_SECRET_PATH_ANNOTATION = 'vault.io/secrets-path';
@@ -0,0 +1,16 @@
+/*
+ * Copyright 2020 The Backstage Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+export { vaultPlugin, EntityVaultCard } from './plugin';
@@ -0,0 +1,22 @@
+/*
+ * Copyright 2020 The Backstage Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import { vaultPlugin } from './plugin';
+
+describe('vault', () => {
+  it('should export plugin', () => {
+    expect(vaultPlugin).toBeDefined();
+  });
+});
@@ -0,0 +1,48 @@
+/*
+ * Copyright 2020 The Backstage Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import {
+  createApiFactory,
+  createComponentExtension,
+  createPlugin,
+  DiscoveryApi,
+  discoveryApiRef,
+} from '@backstage/core-plugin-api';
+
+import { VaultClient, vaultApiRef } from './api';
+
+export const vaultPlugin = createPlugin({
+  id: 'vault',
+  apis: [
+    createApiFactory({
+      api: vaultApiRef,
+      deps: { discoveryApi: discoveryApiRef },
+      factory: ({ discoveryApi }: { discoveryApi: DiscoveryApi }) =>
+        new VaultClient({
+          discoveryApi,
+        }),
+    }),
+  ],
+});
+
+export const EntityVaultCard = vaultPlugin.provide(
+  createComponentExtension({
+    name: 'EntityVaultCard',
+    component: {
+      lazy: () =>
+        import('./components/EntityVaultCard').then(m => m.EntityVaultCard),
+    },
+  }),
+);
@@ -0,0 +1,20 @@
+/*
+ * Copyright 2020 The Backstage Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import { createRouteRef } from '@backstage/core-plugin-api';
+
+export const rootRouteRef = createRouteRef({
+  id: 'vault',
+});
@@ -0,0 +1,17 @@
+/*
+ * Copyright 2020 The Backstage Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import '@testing-library/jest-dom';
+import 'cross-fetch/polyfill';
				`@@ -0,0 +1 @@`
				`module.exports = require('@backstage/cli/config/eslint-factory')(__dirname);`