Iframe Keystroke Logging: Security Risks

TL;DR

Yes, a JavaScript script on a parent page can log keystrokes inside an iframe, but it’s complex and relies on the same-origin policy being relaxed or bypassed. This is a significant cyber security risk. The best protection is to avoid loading content from untrusted sources into iframes.

Understanding the Problem

By default, JavaScript in one window (like your parent page) cannot directly access the contents of another window (like an iframe) due to a browser security feature called the same-origin policy. This prevents malicious websites from stealing data from other sites you’re visiting.

How Keystroke Logging Can Happen

There are several ways a parent page could potentially log keystrokes in an iframe, all involving weakening or bypassing the same-origin policy:

1. Same Origin

1. If the parent page and iframe share the same origin (protocol, domain, and port), JavaScript can directly access the iframe’s content.
2. The parent page can then attach event listeners to the iframe’s document object to capture keystrokes.

// Parent Page (same origin as iframe)
const iframe = document.getElementById('myIframe');
iframe.contentWindow.document.addEventListener('keydown', function(event) {
  console.log('Key pressed:', event.key);
});

2. postMessage

1. The iframe can use window.postMessage() to send keystroke events to the parent page.
2. The parent page must listen for these messages and process them.

// Iframe
document.addEventListener('keydown', function(event) {
  parent.postMessage({ type: 'keystroke', key: event.key }, '*'); // '*' is a security risk - see warnings below!
});

// Parent Page
window.addEventListener('message', function(event) {
  if (event.data && event.data.type === 'keystroke') {
    console.log('Key pressed:', event.data.key);
  }
});

3. Cross-Origin Resource Sharing (CORS)

1. If the iframe’s server is configured to allow cross-origin requests from the parent page’s origin using CORS headers, the parent page can access its content.
2. This requires explicit configuration on the iframe’s server and isn’t something a malicious script can easily force.

4. Vulnerabilities in the Iframe Content

1. If the iframe contains vulnerable JavaScript code (e.g., XSS vulnerabilities), an attacker could inject malicious scripts that send keystrokes to the parent page.

Protecting Against Keystroke Logging

1. Avoid loading content from untrusted sources into iframes. This is the most important step.
2. Content Security Policy (CSP): Implement a strong CSP to control which resources your page can load and prevent the execution of malicious scripts.
3. Carefully validate any data received via postMessage. Ensure it’s from an expected origin and contains only valid information. Never trust user-supplied data directly.
4. Sanitize input in the iframe: If you must allow user input within the iframe, thoroughly sanitize all input to prevent XSS attacks.
5. Use postMessage with specific origins instead of wildcards (‘*’). This limits which windows can send messages to your page.

   // Iframe (send message only to a specific origin)
   parent.postMessage({ type: 'keystroke', key: event.key }, 'https://your-trusted-domain.com');
   

6. Regularly audit your code and dependencies for security vulnerabilities.

Important Security Warnings

• Using postMessage('*') is extremely dangerous as it allows any website to send messages to your page, potentially leading to malicious attacks. Always specify the target origin.
• Relying on the same-origin policy alone for security is insufficient. Implement multiple layers of defense.