Integrate Mend Results into Backstage

Overview

Mend.io is integrated with Backstage, the open-source framework for building developer portals. This integration enables proactive application risk management for developers and security teams directly in Backstage.

The plugin empowers developers to code securely by automatically checking for security vulnerabilities with every code commit. Developers can review and address newly introduced vulnerabilities by Mend.io directly in Backstage, reducing the overall application security risk and delivering more secure applications.

Getting it done

Prerequisites

• Plugin Compatibility: The plugin has been successfully tested with Backstage v1.28. If you are using a newer version of Backstage, please file an issue through the GitHub repository, and Backstage will provide guidance on the best integration practices for your specific version.

• Note: The Backstage frontend plugin will not function without the backend plugin.

Install Mend Plugin for Backstage

You can download the Mend Plugin from the Backstage Marketplace:

From your Backstage root directory, run the following commands:

yarn --cwd packages/app add @backstage-community/plugin-mend
yarn --cwd packages/backend add @backstage-community/plugin-mend-backend

Retrieve your Activation Key from the Mend Platform

1. Log into your organization via the Mend Platform.
   Note: Make sure you are an organization administrator.

2. Navigate to the settings “cog” icon → Integrations:

   

3. Click on the Backstage card. Then, click on the Generate Activation Key button that appears to get your activation key for the Backstage Integration:

   

4. Copy and save this value for the next step.

Configure Mend Plugin for Backstage

1. Configure your Mend Activation Key in your local app-config.yaml or production app-config.production.yaml file:

mend:
  baseUrl: ${API_URL_HERE} ##Example: https://api-saas.mend.io/api/v3.0
  activationKey: ${YOUR_ACTIVATION_KEY_HERE}

2. Add the Mend tab to your entity page:

In your packages/app/src/components/Catalog/EntityPage.tsx file:

// ... other imports here
import { MendTab } from '@backstage-community/plugin-mend';
// ... other components
const serviceEntityPage = (
  <EntityLayout>
    <EntityLayout.Route path="/" title="Overview">
    // ... other elements
    <EntityLayout.Route path="/mend" title="mend.io">
      <MendTab />
    </EntityLayout.Route>
    // ... other elements
    </EntityLayout.Route>
  </EntityLayout>
// ...
);
// ...

3. Add the Mend page to your routes:

In your packages/app/src/App.tsx file:

// ... other imports here
import { MendPage } from '@backstage-community/plugin-mend';
// ... other components
const routes = (
  <FlatRoutes>
    <Route path="/" element={<Navigate to="catalog" />} />
    <Route path="/catalog" element={<CatalogIndexPage />} />
    // ... other elements
    <Route path="/mend" element={<MendPage />} />
   // ... other elements
  </FlatRoutes>
// ...
);
// ...

4. Add the Mend sidebar button:

In your packages/app/src/components/Root/Root.tsx file:

// ... other imports here
import { MendSidebar } from '@backstage-community/plugin-mend';
// ... other components
export const Root = ({ children }: PropsWithChildren<{}>) => (
  <SidebarPage>
    <Sidebar>
      // ... other elements
      <MendSidebar />
      // ... other elements
    </Sidebar>
    {children}
  </SidebarPage>
// ...
);
// ...

5. Add the Mend backend plugin:

In your packages/backend/src/index.ts file:

backend.add(import('@backstage-community/plugin-mend-backend'));

Note: The Backstage frontend plugin will not function without the backend plugin.

Configure Mend Plugin Permissions (Optional)

The Mend plugin for Backstage offers methods to construct conditional permissions, an additional top layer for filtering projects, which can be integrated into your Organization’s Permission Policy.

• Provide a list of project IDs to the plugin. This will enable it to filter projects.

• Use the exclude property to fine-tune the filtering behavior, ensuring precise control over which projects are included or excluded from the permission set.

Here is a sample:

// ... other imports here
import {
  mendReadPermission,
  mendConditions,
  createMendProjectConditionalDecision,
} from '@mend-io/<PLUGIN_NAME>';
// ... other polices
export class OrganizationPolicy implements PermissionPolicy {
    async handle(
      request: PolicyQuery,
      user?: BackstageIdentityResponse,
    ): Promise<PolicyDecision> {
      if (isPermission(request.permission, mendReadPermission)) {
        return createMendProjectConditionalDecision(
          request.permission,
          mendConditions.filter({
            ids: [], // List of project id
            exclude: true // Default
          }),
        );
      }
       // ... other conditions
      return {
        result: AuthorizeResult.ALLOW,
      };
    }
  }
// ...

Review the Code Findings Results in Backstage

The Mend.io plugin for Backstage provides two views for display. You can use these views to visualize your data.

Project Overview

This view showcases the integrated project list along with statistics derived from these projects.

Findings Overview

This view presents the project's security findings and detailed statistics derived from these findings.