How does the frontend detect HTTPS status

The Necessity of Checking HTTPS Status

HTTPS is the foundational security protocol for modern web applications. Frontend detection of HTTPS status can effectively prevent security risks such as man-in-the-middle attacks and data tampering. By actively checking the protocol type, developers can ensure sensitive data (e.g., user credentials, payment information) is transmitted only over encrypted channels while avoiding security warnings caused by mixed content.

Using window.location.protocol to Detect Current Protocol

The most straightforward method is to check the window.location.protocol property, which returns the current page's protocol (including the colon):

if (window.location.protocol !== 'https:') {
  console.warn('The current page is not using HTTPS, which may pose security risks');
  // Optionally redirect to the HTTPS version
  window.location.href = window.location.href.replace('http:', 'https:');
}

Notes:

1. This method only works after the page has loaded.
2. Redirects may cause infinite loops—ensure the server supports HTTPS.
3. Local development environments (e.g., localhost) typically don't require forced HTTPS.

Identifying Insecure Environments via navigator.userAgent

Some older devices or browsers may not support modern security standards. User agent detection can help:

const isInsecureEnvironment = /Android [1-4]|Windows Phone|MSIE [1-9]/i.test(
  navigator.userAgent
);
if (isInsecureEnvironment) {
  alert('Your device or browser version is outdated. Upgrade for better security.');
}

Detecting Mixed Content

Mixed content refers to HTTPS pages containing HTTP subresources, which compromises security:

document.addEventListener('DOMContentLoaded', () => {
  const insecureElements = [
    ...document.querySelectorAll('img[src^="http://"]'),
    ...document.querySelectorAll('script[src^="http://"]'),
    ...document.querySelectorAll('link[href^="http://"]'),
    ...document.querySelectorAll('iframe[src^="http://"]')
  ];

  if (insecureElements.length > 0) {
    console.error(`Found ${insecureElements.length} insecure resources`);
    insecureElements.forEach(el => {
      const attr = el.src ? 'src' : 'href';
      const originalUrl = el[attr];
      el[attr] = originalUrl.replace('http:', 'https:');
    });
  }
});

Enhancing Detection with Content Security Policy (CSP)

Although CSP is primarily set server-side, the frontend can verify its effectiveness:

const cspHeaders = () => {
  if (document.securityPolicy) {
    return document.securityPolicy.allowedConnectSources;
  }
  
  const metaCSP = document.querySelector('meta[http-equiv="Content-Security-Policy"]');
  return metaCSP ? metaCSP.content : '';
};

if (!cspHeaders().includes('https:')) {
  console.warn('CSP policy does not enforce HTTPS connections');
}

Checking WebSocket Secure Connections

WebSocket connections also require encryption:

function checkWebSocketSecurity() {
  const ws = new WebSocket('wss://example.com/ws');
  
  ws.onerror = (e) => {
    if (e.target.url.startsWith('ws://')) {
      console.error('Detected insecure WebSocket connection');
    }
  };
}

Detecting Permissions via Feature Policy

Modern browsers support Feature Policy for controlling specific features:

if (window.featurePolicy && !window.featurePolicy.allowsFeature('geolocation')) {
  console.log('Geolocation API is restricted by policy');
}

Real-Time Monitoring of Network Request Security

Use the Performance API to detect all requests during page load:

const observer = new PerformanceObserver((list) => {
  list.getEntries().forEach(entry => {
    if (entry.initiatorType !== 'navigation' && 
        entry.name.startsWith('http://')) {
      console.warn(`Insecure request: ${entry.name}`);
    }
  });
});

observer.observe({ entryTypes: ['resource'] });

Handling Secure Loading of Third-Party Libraries

Detect whether third-party libraries are loaded via HTTPS:

const scriptLoadHandler = (event) => {
  const script = event.target;
  if (script.src && !script.src.startsWith('https')) {
    script.remove();
    console.error(`Blocked insecure script loading: ${script.src}`);
  }
};

document.addEventListener('beforeload', scriptLoadHandler, true);

Checking Service Worker Registration Status

Service Workers can only be registered under HTTPS or localhost:

if ('serviceWorker' in navigator) {
  navigator.serviceWorker.register('/sw.js').catch(err => {
    if (window.location.protocol !== 'https:' && 
        !window.location.hostname.match(/^localhost$|^127\.\d+\.\d+\.\d+$/)) {
      console.error('Service Workers can only be registered under HTTPS or local environments');
    }
  });
}

Detecting HTTP Strict Transport Security (HSTS)

Although HSTS is a server-side setting, the frontend can verify its presence:

fetch(window.location.href, { method: 'HEAD' })
  .then(res => {
    const hstsHeader = res.headers.get('Strict-Transport-Security');
    if (!hstsHeader) {
      console.warn('Missing HSTS header—recommend server configuration');
    }
  });

Ensuring Secure Form Submissions

Ensure all forms are submitted via HTTPS:

document.querySelectorAll('form').forEach(form => {
  if (!form.action.startsWith('https://') && 
      form.action !== '' && 
      !form.action.startsWith('//')) {
    form.action = form.action.replace('http:', 'https:');
  }
});

Browser Security API Integration Detection

Leverage built-in browser security reporting APIs:

if (window.ReportingObserver) {
  const observer = new ReportingObserver((reports) => {
    reports.forEach(report => {
      if (report.type === 'csp-violation' || 
          report.type === 'mixed-content') {
        console.error('Security violation:', report.body);
      }
    });
  }, { types: ['csp-violation', 'mixed-content'] });
  
  observer.observe();
}

Detecting iframe Nesting Security

Prevent critical pages from being nested in non-HTTPS pages:

if (window.top !== window.self && 
    window.top.location.protocol !== 'https:') {
  window.top.location.href = window.self.location.href;
}

Using Web Cryptography API for Advanced Verification

Combine cryptographic APIs for enhanced validation:

async function verifyConnectionSecurity() {
  try {
    const key = await crypto.subtle.generateKey(
      { name: 'ECDSA', namedCurve: 'P-256' },
      true,
      ['sign', 'verify']
    );
    return true;
  } catch (e) {
    console.error('Crypto API unavailable:', e);
    return false;
  }
}

Detecting Browser Security Context

Modern browsers provide security context APIs:

if (window.isSecureContext) {
  console.log('Running in a secure context');
} else {
  console.warn('Current context is insecure—some APIs may be restricted');
}

Handling Redirect Loops

Avoid infinite redirects when enforcing HTTPS:

if (window.location.protocol !== 'https:' && 
    !window.location.hostname.includes('localhost') &&
    !window.location.hostname.includes('127.0.0.1')) {
  
  try {
    // First attempt a HEAD request to avoid redirect loops
    fetch(window.location.href.replace('http:', 'https:'), { 
      method: 'HEAD',
      mode: 'no-cors'
    }).then(() => {
      window.location.href = window.location.href.replace('http:', 'https:');
    }).catch(() => {
      console.error('HTTPS version unreachable');
    });
  } catch (e) {
    console.error('Secure redirect check failed:', e);
  }
}

Verifying Resource Integrity

Check Subresource Integrity (SRI):

document.querySelectorAll('script[integrity], link[integrity]').forEach(el => {
  if (!el.hasAttribute('crossorigin')) {
    console.warn(`Resource ${el.src || el.href} requires crossorigin attribute for integrity verification`);
  }
});

Network Information API Detection

Leverage the Network Information API to detect connection types:

if (navigator.connection) {
  navigator.connection.addEventListener('change', () => {
    if (navigator.connection.effectiveType === 'slow-2g') {
      console.warn('Poor network conditions—reduce sensitive data transmission');
    }
  });
}