Add improve-api-security-graph sample

samples/improve-app-security-graph/.devproxy/excessive-permissions.json

@@ -0,0 +1,19 @@
+{
+    "$schema": "https://raw.githubusercontent.com/microsoft/dev-proxy/main/schemas/v0.19.1/rc.schema.json",
+    "plugins": [
+        {
+            "name": "MinimalPermissionsGuidancePlugin",
+            "enabled": true,
+            "pluginPath": "~appFolder/plugins/dev-proxy-plugins.dll"
+        },
+        {
+            "name": "GraphMockResponsePlugin",
+            "enabled": true,
+            "pluginPath": "~appFolder/plugins/dev-proxy-plugins.dll",
+            "configSection": "mocksPlugin"
+        }
+    ],
+    "mocksPlugin": {
+        "mocksFile": "responses/graph-mocks.json"
+    }
+}

samples/improve-app-security-graph/.devproxy/generate-mocks.json

@@ -0,0 +1,14 @@
+{
+    "$schema": "https://raw.githubusercontent.com/microsoft/dev-proxy/main/schemas/v0.19.1/rc.schema.json",
+    "plugins": [
+        {
+            "name": "MockGeneratorPlugin",
+            "enabled": true,
+            "pluginPath": "~appFolder/plugins/dev-proxy-plugins.dll"
+        }
+    ],
+    "urlsToWatch": [
+        "https://graph.microsoft.com/*",
+        "https://placehold.co/*"
+    ]
+}

samples/improve-app-security-graph/.devproxy/minimal-permissions.json

@@ -0,0 +1,23 @@
+{
+    "$schema": "https://raw.githubusercontent.com/microsoft/dev-proxy/main/schemas/v0.19.1/rc.schema.json",
+    "plugins": [
+        {
+            "name": "MinimalPermissionsPlugin",
+            "enabled": true,
+            "pluginPath": "~appFolder/plugins/dev-proxy-plugins.dll",
+            "configSection": "minimalPermissionsPlugin"
+        },
+        {
+            "name": "GraphMockResponsePlugin",
+            "enabled": true,
+            "pluginPath": "~appFolder/plugins/dev-proxy-plugins.dll",
+            "configSection": "mocksPlugin"
+        }
+    ],
+    "minimalPermissionsPlugin": {
+        "type": "delegated"
+    },
+    "mocksPlugin": {
+        "mocksFile": "responses/graph-mocks.json"
+    }
+}

samples/improve-app-security-graph/.devproxy/responses/image-mocks.json

@@ -0,0 +1,69 @@
+{
+    "$schema": "https://raw.githubusercontent.com/microsoft/dev-proxy/main/schemas/v0.19.1/mockresponseplugin.schema.json",
+    "mocks": [
+        {
+            "request": {
+                "url": "https://placehold.co/150x150/white/black?text=*",
+                "method": "GET"
+            },
+            "response": {
+                "statusCode": 200,
+                "body": "@img/white.svg",
+                "headers": [
+                    {
+                        "name": "Content-Type",
+                        "value": "image/svg\u002Bxml; charset=utf-8"
+                    }
+                ]
+            }
+        },
+        {
+            "request": {
+                "url": "https://placehold.co/150x150/red/white?text=*",
+                "method": "GET"
+            },
+            "response": {
+                "statusCode": 200,
+                "body": "@img/red.svg",
+                "headers": [
+                    {
+                        "name": "Content-Type",
+                        "value": "image/svg\u002Bxml; charset=utf-8"
+                    }
+                ]
+            }
+        },
+        {
+            "request": {
+                "url": "https://placehold.co/150x150/green/white?text=*",
+                "method": "GET"
+            },
+            "response": {
+                "statusCode": 200,
+                "body": "@img/green.svg",
+                "headers": [
+                    {
+                        "name": "Content-Type",
+                        "value": "image/svg\u002Bxml; charset=utf-8"
+                    }
+                ]
+            }
+        },
+        {
+            "request": {
+                "url": "https://placehold.co/150x150/blue/white?text=*",
+                "method": "GET"
+            },
+            "response": {
+                "statusCode": 200,
+                "body": "@img/blue.svg",
+                "headers": [
+                    {
+                        "name": "Content-Type",
+                        "value": "image/svg\u002Bxml; charset=utf-8"
+                    }
+                ]
+            }
+        }
+    ]
+}

samples/improve-app-security-graph/.env.sample

@@ -0,0 +1,2 @@
+[email protected]
+TEST_PASSWORD=password

samples/improve-app-security-graph/.github/workflows/api-permissions-check.yml

@@ -0,0 +1,88 @@
+name: API permissions check
+
+on:
+  push:
+    branches:
+      - main
+  workflow_dispatch:
+
+jobs:
+  test:
+    name: Check API permissions with Dev Proxy
+    timeout-minutes: 60
+    runs-on: ubuntu-latest
+    env:
+      LOG_FILE: devproxy.log
+      DEVPROXY_VERSION: v0.19.1
+    steps:
+      - uses: actions/checkout@v4
+
+      - uses: actions/setup-node@v4
+        with:
+          cache: "npm"
+
+      - name: Install dependencies
+        run: npm ci
+
+      - name: Create env.js file in src folder
+        run: echo "const appId = '${{ vars.APPID }}';" > src/env.js
+
+      - name: Create dotenv file
+        run: |
+          echo "TEST_USERNAME=${{ secrets.TEST_USERNAME }}" > .env
+          echo "TEST_PASSWORD=${{ secrets.TEST_PASSWORD }}" >> .env
+
+      #################################
+      # Cache + install of Playwright #
+      #################################
+      - name: Store Playwright's Version
+        run: |
+          PLAYWRIGHT_VERSION=$(npm ls @playwright/test | grep @playwright | sed 's/.*@//')
+          echo "Playwright's Version: $PLAYWRIGHT_VERSION"
+          echo "PLAYWRIGHT_VERSION=$PLAYWRIGHT_VERSION" >> $GITHUB_ENV
+
+      - name: Cache Playwright Browsers for Playwright's Version
+        id: cache-playwright
+        uses: actions/cache@v4
+        with:
+          path: ~/.cache/ms-playwright
+          key: playwright-ubuntu-${{ env.PLAYWRIGHT_VERSION }}
+
+      - name: Install Playwright Browsers
+        if: steps.cache-playwright.outputs.cache-hit != 'true'
+        run: npx playwright install --with-deps
+
+      ################################
+      # Cache + install of Dev Proxy #
+      ################################
+      - name: Cache Dev Proxy
+        id: cache-devproxy
+        uses: actions/cache@v4
+        with:
+          path: ./devproxy
+          key: devproxy-${{ env.DEVPROXY_VERSION }}
+
+      - name: Install Dev Proxy
+        if: steps.cache-devproxy.outputs.cache-hit != 'true'
+        run: bash -c "$(curl -sL https://aka.ms/devproxy/setup.sh)" -- ${{ env.DEVPROXY_VERSION }}
+
+      - name: Run Dev Proxy
+        run: /bin/bash run.sh
+
+      - name: Upload Dev Proxy logs
+        uses: actions/upload-artifact@v4
+        with:
+          name: ${{ env.LOG_FILE }}
+          path: ${{ env.LOG_FILE }}
+
+      # only when using a reporting plugin with the Markdown reporter
+      - name: Upload Dev Proxy reports
+        uses: actions/upload-artifact@v4
+        with:
+          name: Reports
+          path: ./*Reporter*
+
+      # only when using a reporting plugin with the Markdown reporter
+      - name: Write summary
+        run: |
+          cat MinimalPermissionsGuidancePlugin_MarkdownReporter.md >> $GITHUB_STEP_SUMMARY

samples/improve-app-security-graph/.gitignore

@@ -0,0 +1,8 @@
+node_modules
+env.js
+/test-results/
+/playwright-report/
+/blob-report/
+/playwright/.cache/
+*Reporter*
+.env

samples/improve-app-security-graph/.vscode/extensions.json

@@ -0,0 +1,6 @@
+{
+    "recommendations": [
+        "garrytrinder.dev-proxy-toolkit",
+        "ms-playwright.playwright"
+    ]
+}

samples/improve-app-security-graph/assets/sample.json

@@ -0,0 +1,103 @@
+[
+    {
+        "name": "pnp-devproxy-improve-app-security-graph",
+        "source": "pnp",
+        "title": "Improve your app security when calling Microsoft Graph",
+        "shortDescription": "This sample demonstrates how to use Dev Proxy to improve your app security when calling Microsoft Graph API. Using this sample you use Dev Proxy to check for minimal permissions, check if you are using excessive permissions, and prevent permission scope creep.",
+        "url": "https://github.com/pnp/proxy-samples/tree/main/samples/improve-app-security-graph",
+        "downloadUrl": "https://pnp.github.io/download-partial/?url=https://github.com/pnp/proxy-samples/tree/main/samples/improve-app-security-graph",
+        "longDescription": [
+            "This sample demonstrates how to use Dev Proxy to improve your app security when calling Microsoft Graph API. Using this sample you use Dev Proxy to check for minimal permissions, check if you are using excessive permissions, and prevent permission scope creep."
+        ],
+        "creationDateTime": "2024-07-02",
+        "updateDateTime": "2024-07-02",
+        "products": [
+            "Dev Proxy"
+        ],
+        "metadata": [
+            {
+                "key": "PRESET",
+                "value": "YES"
+            },
+            {
+                "key": "MOCKS",
+                "value": "Yes"
+            },
+            {
+                "key": "PLUGIN",
+                "value": "No"
+            },
+            {
+                "key": "PROXY VERSION",
+                "value": "v0.19"
+            }
+        ],
+        "thumbnails": [
+            {
+                "type": "image",
+                "order": 100,
+                "url": "https://github.com/pnp/proxy-samples/raw/main/samples/improve-app-security-graph/assets/web-app.png",
+                "alt": "Product support tickets web app showing a list of current support tickets and ticket type counts"
+            },
+            {
+                "type": "image",
+                "order": 200,
+                "url": "https://github.com/pnp/proxy-samples/raw/main/samples/improve-app-security-graph/assets/minimal-permissions.png",
+                "alt": "Terminal output showing minimal scopes for the tracked requests"
+            },
+            {
+                "type": "image",
+                "order": 300,
+                "url": "https://github.com/pnp/proxy-samples/raw/main/samples/improve-app-security-graph/assets/excessive-permissions.png",
+                "alt": "Terminal output showing minimal scopes for the tracked requests and excessive scopes"
+            },
+            {
+                "type": "image",
+                "order": 400,
+                "url": "https://github.com/pnp/proxy-samples/raw/main/samples/improve-app-security-graph/assets/playwright.png",
+                "alt": "Visual Studio Code showing passed Playwright tests in the Test Explorer, a Playwright test written in TypeScript, a terminal window with Dev Proxy running and the generated markdown report open in the editor displaying minimal permissions and excessive permissions"
+            },
+            {
+                "type": "image",
+                "order": 600,
+                "url": "https://github.com/pnp/proxy-samples/raw/main/samples/improve-app-security-graph/assets/github-action.png",
+                "alt": "GitHub Actions workflow job summary displaying the markdown report"
+            },
+            {
+                "type": "image",
+                "order": 700,
+                "url": "https://github.com/pnp/proxy-samples/raw/main/samples/improve-app-security-graph/assets/azure-pipelines.png",
+                "alt": "Azure Pipelines job summary"
+            }
+        ],
+        "authors": [
+            {
+                "gitHubAccount": "garrytrinder",
+                "pictureUrl": "https://github.com/garrytrinder.png",
+                "name": "Garry Trinder"
+            }
+        ],
+        "references": [
+            {
+                "name": "Get started with the Dev Proxy",
+                "description": "The tutorial will introduce you to the Dev Proxy and show you how to use its features.",
+                "url": "https://learn.microsoft.com/microsoft-cloud/dev/dev-proxy/get-started"
+            },
+            {
+                "name": "Detect minimal Microsoft Graph API permissions",
+                "description": "Instructions on how to detect the minimal Microsoft Graph API permissions that your app needs.",
+                "url": "https://learn.microsoft.com/microsoft-cloud/dev/dev-proxy/how-to/detect-minimal-microsoft-graph-api-permissions"
+            },
+            {
+                "name": "Check if you're using excessive Microsoft Graph API permissions",
+                "description": "Instructions on how to check if your app is using more permissions than it needs.",
+                "url": "https://learn.microsoft.com/microsoft-cloud/dev/dev-proxy/how-to/check-if-you-are-using-excessive-microsoft-graph-api-permissions"
+            },
+            {
+                "name": "Use Dev Proxy in CI/CD scenarios",
+                "description": "Instructions on how to use Dev Proxy with GitHub Actions and Azure Pipelines.",
+                "url": "https://learn.microsoft.com/microsoft-cloud/dev/dev-proxy/how-to/use-dev-proxy-in-ci-cd-overview"
+            }
+        ]
+    }
+]