app/components/file-details/vulnerability-analysis-details/findings/vulnerable-api/index.ts

import Component from '@glimmer/component';
import { service } from '@ember/service';
import { action } from '@ember/object';
import type IntlService from 'ember-intl/services/intl';

import type AnalysisModel from 'irene/models/analysis';
import {
  indentHTML,
  type VulnerableApiFinding,
} from 'irene/utils/parse-vulnerable-api-finding';

export interface FileDetailsVulnerabilityAnalysisDetailsFindingsVulnerableApiSignature {
  Element: HTMLDivElement;
  Args: {
    analysis: AnalysisModel;
    currentVulnerability?: VulnerableApiFinding;
  };
}

interface FormattedResult {
  value: string;
  isJSON?: boolean;
  isHTML?: boolean;
}

interface VulnerabilityDetails {
  title: string;
  value: string;
  isEmpty: boolean;
  copyIcon: boolean;
  isKeyValuePair?: boolean;
  whiteSpace?: 'pre-wrap' | 'pre-line';
}

export default class FileDetailsVulnerabilityAnalysisDetailsFindingsVulnerableApiComponent extends Component<FileDetailsVulnerabilityAnalysisDetailsFindingsVulnerableApiSignature> {
  @service declare intl: IntlService;

  get vulnerabilityResponse() {
    return this.args.currentVulnerability?.response;
  }

  get vulnerabilityRequest() {
    return this.args.currentVulnerability?.request;
  }

  get currentVulnerabilityDetails() {
    const currentVulnerability = this.args.currentVulnerability || {};

    if (Object.keys(currentVulnerability).length !== 0) {
      return [
        {
          label: this.intl.t('url'),
          value: this.url,
        },
        {
          label: this.intl.t('method'),
          value: this.vulnerabilityRequest?.method,
        },
        {
          label: this.intl.t('severity'),
          value: this.args.currentVulnerability?.severity,
        },
        {
          label: this.intl.t('confidence'),
          value: this.args.currentVulnerability?.confidence,
        },
        {
          label: this.intl.t('issueDetails'),
          value: this.args.currentVulnerability?.description,
        },
      ];
    } else {
      return [];
    }
  }

  get url() {
    if (this.vulnerabilityResponse?.url) {
      return this.vulnerabilityResponse?.url;
    } else if (this.vulnerabilityRequest?.url) {
      return this.vulnerabilityRequest?.url;
    } else {
      return this.args.currentVulnerability?.url;
    }
  }

  @action getFormattedText(inputString: string | undefined): FormattedResult {
    if (!inputString) {
      return {
        value: '',
      };
    }

    const sanitizedString = inputString
      .trim()
      .replace(/(^['"])|(['"]$)/g, '')
      .replace(/\\n/g, '\n');

    // Check if it's HTML content
    if (
      sanitizedString.includes('<!DOCTYPE html') ||
      sanitizedString.includes('<html') ||
      sanitizedString.toLowerCase().includes('<!doctype html')
    ) {
      return {
        value: indentHTML(sanitizedString),
        isJSON: false,
        isHTML: true,
      };
    }

    // Try to parse as JSON first
    try {
      const parsed = JSON.parse(sanitizedString);

      return {
        value: JSON.stringify(parsed, null, 2),
        isJSON: true,
        isHTML: false,
      };
    } catch {
      // If JSON parsing fails, return the sanitized string
      return {
        value: sanitizedString,
        isJSON: false,
        isHTML: false,
      };
    }
  }

  getWhiteSpaceStyle(formattedBody: {
    isJSON?: boolean;
    isHTML?: boolean;
  }): string {
    return formattedBody.isJSON || formattedBody.isHTML
      ? 'pre-wrap'
      : 'pre-line';
  }

  get vulnerabilityDetails() {
    const request = this.args.currentVulnerability?.request;
    const response = this.args.currentVulnerability?.response;

    const formattedRequestBody = this.getFormattedText(request?.body);
    const formattedResponseBody = this.getFormattedText(response?.text);

    const reqBodyWhitespaceStyle =
      this.getWhiteSpaceStyle(formattedRequestBody);

    const resBodyWhitespaceStyle = this.getWhiteSpaceStyle(
      formattedResponseBody
    );

    return [
      {
        title: this.intl.t('requestBody'),
        value: formattedRequestBody.value,
        isEmpty: !request?.body,
        copyIcon: true,
        whiteSpace: reqBodyWhitespaceStyle,
      },
      {
        title: this.intl.t('requestHeaders'),
        value: request?.headers,
        isEmpty: !request?.headers,
        copyIcon: true,
        isKeyValuePair: true,
      },
      {
        title: this.intl.t('requestParameters'),
        value: request?.params,
        isEmpty: !request?.params || Object.keys(request.params).length === 0,
        copyIcon: true,
        isKeyValuePair: true,
      },
      {
        title: this.intl.t('requestCookies'),
        value: request?.cookies,
        isEmpty: !request?.cookies || Object.keys(request.cookies).length === 0,
        copyIcon: true,
        isKeyValuePair: true,
      },
      {
        title: this.intl.t('response'),
        value: response?.status_code,
        isEmpty: !response?.status_code,
        copyIcon: false,
      },
      {
        title: this.intl.t('responseHeaders'),
        value: response?.headers,
        isEmpty:
          !response?.headers || Object.keys(response.headers).length === 0,
        copyIcon: true,
        isKeyValuePair: true,
      },
      {
        title: this.intl.t('responseCookies'),
        value: response?.cookies,
        isEmpty:
          !response?.cookies || Object.keys(response.cookies).length === 0,
        copyIcon: true,
        isKeyValuePair: true,
      },
      {
        title: this.intl.t('responseBody'),
        value: formattedResponseBody.value,
        isEmpty: !response?.text || response?.text === '""',
        whiteSpace: resBodyWhitespaceStyle,
        copyIcon: true,
      },
    ] as VulnerabilityDetails[];
  }
}

declare module '@glint/environment-ember-loose/registry' {
  export default interface Registry {
    'FileDetails::VulnerabilityAnalysisDetails::Findings::VulnerableApi': typeof FileDetailsVulnerabilityAnalysisDetailsFindingsVulnerableApiComponent;
  }
}