Clickjacking in Chi

Clickjacking in Chi applications occurs when malicious actors embed Chi-rendered components within transparent iframes, tricking users into unknowingly interacting with hidden UI elements. This attack vector exploits Chi's component-based architecture where UI elements can be rendered without explicit user awareness of their context.

The most common Chi clickjacking scenario involves embedding a Chi modal or button component inside an invisible iframe layered over legitimate content. For example, a banking application using Chi might render a 'Transfer Funds' button that appears to users as a harmless 'Download PDF' button. When users click what they believe is a document download, they're actually triggering a financial transaction in the underlying Chi application.

Chi's flexible rendering system creates unique clickjacking opportunities. Since Chi components can be programmatically rendered and positioned using CSS, attackers can manipulate z-index, opacity, and positioning to hide malicious components beneath seemingly benign content. The attack often targets Chi's modal components, which can be made invisible while still capturing user interactions.

Consider this vulnerable Chi pattern:

const ChiModal = chi.modal(document.createElement('div'));
ChiModal.show({
  title: 'Confirm Transaction',
  body: 'Are you sure you want to transfer $5,000?',
  buttons: [{
    text: 'Cancel',
    type: 'default'
  }, {
    text: 'Transfer',
    type: 'primary'
  }]
});

When this modal is rendered within an iframe with CSS properties like opacity: 0; position: absolute; top: 0; left: 0;, users clicking anywhere on the page would inadvertently trigger the 'Transfer' button. Chi's event handling system processes these clicks regardless of visual visibility, making the attack particularly effective.

Another Chi-specific vulnerability arises from its data-table components. Attackers can embed hidden Chi data-tables with clickable rows that perform actions when users believe they're interacting with their own application's UI. The data-table's selection events fire even when the component is visually obscured, allowing for data exfiltration or unauthorized operations.

Detecting clickjacking in Chi applications requires examining both the application's response headers and its component rendering patterns. middleBrick's black-box scanning approach is particularly effective for Chi applications since it tests the actual runtime behavior without requiring source code access.

middleBrick scans for clickjacking by attempting to load your Chi application within an iframe and checking for the presence of X-Frame-Options headers. The scanner tests three scenarios: deny all framing, allow framing only from the same origin, and allow specific trusted origins. For Chi applications, middleBrick also examines the rendered DOM for Chi-specific component patterns that might be vulnerable to framing attacks.

The detection process includes testing Chi modals and overlays by simulating user interactions through the iframe. middleBrick's scanner attempts to trigger Chi's modal event handlers while the component is hidden, verifying whether the application properly validates the context of user actions. This active testing approach catches vulnerabilities that static analysis would miss.

For Chi applications using the CHI Design System, middleBrick specifically checks for:

• Missing or misconfigured X-Frame-Options headers
• Missing Content-Security-Policy frame-ancestors directives
• Chi modal components that can be programmatically triggered without origin validation
• Chi data-table selection handlers that execute without proper context checks
• Chi form submissions that can be initiated from within iframes

middleBrick's CLI tool makes this detection accessible from your development environment:

npm install -g middlebrick
middlebrick scan https://your-chi-app.com

The scan completes in 5-15 seconds and provides a security score with specific findings about clickjacking vulnerabilities, including Chi-specific recommendations for remediation.

Remediating clickjacking in Chi applications involves multiple layers of defense, starting with HTTP security headers and extending to component-level validation. The most effective approach combines server-side headers with client-side Chi component safeguards.

First, implement proper HTTP headers in your Chi application's server configuration:

Header always set X-Frame-Options DENY
Header always set Content-Security-Policy "frame-ancestors 'none'"

For applications that legitimately need to be framed (such as embedded dashboards), restrict framing to trusted origins:

Header always set X-Frame-Options "ALLOW-FROM https://trusted.example.com"
Header always set Content-Security-Policy "frame-ancestors https://trusted.example.com"

At the Chi component level, implement context validation before processing user actions. For Chi modals, add origin verification:

function validateModalContext() {
  if (window === window.parent) {
    return true; // Not in an iframe
  }
  
  try {
    // Check if we can access parent properties
    const sameOrigin = window.location.origin === window.parent.location.origin;
    return sameOrigin;
  } catch (e) {
    // Cross-origin access throws, which is what we want
    return false;
  }
}

const ChiModal = chi.modal(document.createElement('div'));
ChiModal.show({
  title: 'Confirm Transaction',
  body: 'Are you sure you want to transfer $5,000?',
  buttons: [{
    text: 'Cancel',
    type: 'default'
  }, {
    text: 'Transfer',
    type: 'primary',
    click: function() {
      if (!validateModalContext()) {
        console.error('Clickjacking attempt detected');
        return;
      }
      // Proceed with transfer
    }
  }]
});

For Chi data-table components, implement selection validation that checks the click origin:

const chiTable = chi.table(document.createElement('div'));
chiTable.show({
  data: tableData,
  columns: [...],
  onRowSelect: function(event) {
    if (!validateModalContext()) {
      event.preventDefault();
      console.warn('Clickjacking attempt blocked');
      return;
    }
    // Process row selection
  }
});

Integrate middleBrick into your CI/CD pipeline to continuously verify these protections:

name: API Security Scan
on: [push, pull_request]
jobs:
  security:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v2
      - name: Run middleBrick Scan
        run: |
          npm install -g middlebrick
          middlebrick scan https://staging.your-chi-app.com --fail-below B

This GitHub Action configuration fails builds if clickjacking protections aren't properly implemented, ensuring security is validated before deployment.