Detecting Cross-Origin Iframes in Web Logs

TL;DR

Cross-origin iframes don’t automatically appear in your web server logs like requests from the same domain. You need to look for specific clues, primarily within the Referer header (though it’s not always reliable) and by examining JavaScript events triggered by the iframe. This guide explains how.

Detecting Cross-Origin Iframes

1. Understand the Problem: When an iframe loads content from a different domain (cross-origin), standard web server logs won’t show direct requests *from* that iframe. They’ll only see requests initiated by your main page. The iframe itself is making separate HTTP requests to its origin.
2. Check the Referer Header: The Referer header in your web server logs can sometimes indicate a cross-origin iframe request. When an iframe loads content, it often includes the URL of the page containing it as the Referer.
   • Caveat: The Referer header isn’t always present or accurate due to browser security settings and user privacy preferences. It’s a helpful clue but not definitive proof.
   • Example Log Entry: Look for entries where the Referer points to your domain, while the requested resource is from another domain.

     192.168.1.1 - - [01/Jan/2024:12:00:00 +0000] "GET /some-resource HTTP/1.1" 200 1234 "http://yourdomain.com/page-with-iframe" "Mozilla/5.0 (Windows NT 10.0; Win64; x64)"

3. JavaScript Event Monitoring: Use JavaScript to detect when an iframe loads and log the origin of the loaded content.
   • onload event: Attach an onload handler to your iframe element.
   • Accessing iframe’s src attribute: Inside the onload handler, access the src attribute of the iframe to determine its origin.

     const iframe = document.getElementById('myIframe');
     iframe.onload = function() {
       const iframeOrigin = new URL(this.src).origin;
       console.log('Iframe loaded from:', iframeOrigin);
       // Send this information to your logging server.
     };
     

   • Sending data to your server: Use fetch or XMLHttpRequest to send the iframeOrigin to your backend for logging.

     fetch('/log-iframe-load', {
       method: 'POST',
       headers: {
         'Content-Type': 'application/json'
       },
       body: JSON.stringify({ origin: iframeOrigin })
     });

4. Content Security Policy (CSP) Reporting: Configure a Content Security Policy with report-uri to receive reports when an iframe attempts to load content from a non-allowed domain.
   • Example CSP Header: Add the following header to your server’s response:

     Content-Security-Policy: default-src 'self'; frame-ancestors 'none'; report-uri /csp-report

   • Report Endpoint: Create an endpoint (e.g., /csp-report) on your server to receive and log the CSP violation reports.
5. Network Monitoring Tools: Use browser developer tools or network monitoring proxies (like Charles Proxy, Fiddler, or Wireshark) to inspect the HTTP requests made by the iframe directly. This provides detailed information about the iframe’s activity.
6. Consider Third-Party Libraries: Some JavaScript libraries can help simplify cross-origin iframe detection and security management.