What are the common security vulnerabilities of iframes? How to prevent iframe-related security attacks? - 面试题

As a technology for embedding external content, iframes have multiple security vulnerabilities. If not used correctly, they can lead to serious security issues. Understanding these vulnerabilities and taking corresponding protective measures is crucial.

Common iframe Security Vulnerabilities

1. Clickjacking

Clickjacking is an attack technique where attackers overlay a transparent iframe on a legitimate webpage to trick users into clicking content they don't intend to click.

Attack Principle:

html
<!-- Attacker's page -->
<html>
<head>
  <style>
    .transparent-iframe {
      position: absolute;
      top: 0;
      left: 0;
      opacity: 0;
      filter: alpha(opacity=0);
      z-index: 999;
    }
  </style>
</head>
<body>
  <h1>Click here to claim your prize!</h1>
  <iframe 
    src="https://vulnerable-site.com/delete-account" 
    class="transparent-iframe"
    width="100%" 
    height="100%">
  </iframe>
</body>
</html>

Protection Measures:

javascript
// Method 1: Use X-Frame-Options HTTP header
X-Frame-Options: DENY              // Completely prohibit embedding
X-Frame-Options: SAMEORIGIN        // Only allow same-origin embedding
X-Frame-Options: ALLOW-FROM https://trusted-site.com  // Only allow specified origin embedding

// Method 2: Use CSP frame-ancestors
Content-Security-Policy: frame-ancestors 'none';              // Completely prohibit embedding
Content-Security-Policy: frame-ancestors 'self';                // Only allow same-origin embedding
Content-Security-Policy: frame-ancestors 'self' https://trusted-site.com;

// Method 3: Use JavaScript defense (frame busting)
if (window.top !== window.self) {
  window.top.location = window.self.location;
}

// Method 4: Use more secure frame busting
(function() {
  if (window !== window.top) {
    try {
      window.top.location = window.location;
    } catch (e) {
      // Cross-origin case, use other methods
      document.body.innerHTML = '<h1>This page is not allowed to be displayed in an iframe</h1>';
    }
  }
})();

2. Cross-Site Scripting (XSS)

iframes can become carriers for XSS attacks, especially when iframe content comes from untrusted sources.

Attack Example:

html
<!-- Malicious iframe -->
<iframe src="https://malicious-site.com/xss-payload"></iframe>

Protection Measures:

html
<!-- Use sandbox to limit iframe permissions -->
<iframe 
  src="https://external-content.com"
  sandbox="allow-scripts allow-same-origin">
</iframe>

<!-- More strict sandbox -->
<iframe 
  src="https://external-content.com"
  sandbox="allow-scripts">
</iframe>

3. Cross-Site Request Forgery (CSRF)

iframes may be used for CSRF attacks, where attackers load the target page in an iframe and exploit the user's login status to perform malicious operations.

Attack Example:

html
<!-- Attacker's page -->
<iframe 
  src="https://bank-site.com/transfer?to=attacker&amount=10000"
  style="display: none;">
</iframe>

Protection Measures:

javascript
// 1. Use CSRF Token
// Server generates random token and verifies it in requests

// 2. Check Referer header
// Server verifies request origin

// 3. Use SameSite Cookie attribute
Set-Cookie: sessionid=abc123; SameSite=Strict

// 4. Use custom HTTP headers
fetch('/api/transfer', {
  headers: {
    'X-Requested-With': 'XMLHttpRequest',
    'X-CSRF-Token': 'token-value'
  }
});

4. Information Leakage

iframes may lead to sensitive information leakage, especially when using improper postMessage communication.

Insecure Communication Example:

javascript
// Not recommended: Send sensitive data
iframe.postMessage({
  type: 'auth',
  token: 'sensitive-token',
  password: 'user-password'
}, '*');

Secure Communication Example:

javascript
// Recommended: Use secure communication methods
iframe.postMessage({
  type: 'auth-request',
  nonce: generateNonce()
}, 'https://trusted-domain.com');

window.addEventListener('message', (event) => {
  // Verify origin
  if (event.origin !== 'https://trusted-domain.com') {
    return;
  }
  
  // Verify data format
  if (!event.data || event.data.type !== 'auth-response') {
    return;
  }
  
  // Verify nonce to prevent replay attacks
  if (!validateNonce(event.data.nonce)) {
    return;
  }
  
  // Handle response
  handleAuthResponse(event.data);
});

5. iframe Injection Attack

Attackers may inject malicious iframes to carry out attacks.

Attack Example:

javascript
// Insecure user input handling
const userInput = '<iframe src="https://malicious-site.com"></iframe>';
document.getElementById('content').innerHTML = userInput;

Protection Measures:

javascript
// 1. Use DOMPurify to sanitize HTML
import DOMPurify from 'dompurify';

const cleanHTML = DOMPurify.sanitize(userInput);
document.getElementById('content').innerHTML = cleanHTML;

// 2. Use textContent instead of innerHTML
document.getElementById('content').textContent = userInput;

// 3. Use whitelist filtering
function sanitizeHTML(html) {
  const div = document.createElement('div');
  div.textContent = html;
  return div.innerHTML;
}

iframe Security Best Practices

1. Use X-Frame-Options

http
# Server configuration examples
# Apache
Header always set X-Frame-Options "SAMEORIGIN"

# Nginx
add_header X-Frame-Options "SAMEORIGIN";

# IIS
<httpProtocol>
  <customHeaders>
    <add name="X-Frame-Options" value="SAMEORIGIN" />
  </customHeaders>
</httpProtocol>

2. Use CSP frame-ancestors

http
# More modern CSP configuration
Content-Security-Policy: frame-ancestors 'self' https://trusted-domain.com;

# Completely prohibit embedding
Content-Security-Policy: frame-ancestors 'none';

3. Use sandbox Attribute

html
# Strictest sandbox
<iframe src="https://external-content.com" sandbox></iframe>

# Allow script execution
<iframe 
  src="https://external-content.com" 
  sandbox="allow-scripts">
</iframe>

# Allow scripts and forms
<iframe 
  src="https://external-content.com" 
  sandbox="allow-scripts allow-forms">
</iframe>

4. Verify postMessage Origin

javascript
window.addEventListener('message', (event) => {
  // Strictly verify origin
  const allowedOrigins = [
    'https://trusted-domain.com',
    'https://another-trusted-domain.com'
  ];
  
  if (!allowedOrigins.includes(event.origin)) {
    console.warn('Reject message from unauthorized source:', event.origin);
    return;
  }
  
  // Verify data format
  if (!event.data || typeof event.data !== 'object') {
    return;
  }
  
  // Handle message
  handleMessage(event.data);
});

5. Use HTTPS

html
# Always use HTTPS
<iframe src="https://example.com/content"></iframe>

# Not recommended: Use HTTP
<iframe src="http://example.com/content"></iframe>

6. Implement Content Security Policy (CSP)

http
# Limit iframe sources
Content-Security-Policy: frame-src 'self' https://trusted-domain.com;

# Limit script sources
Content-Security-Policy: script-src 'self' 'unsafe-inline' https://trusted-cdn.com;

# Complete CSP policy
Content-Security-Policy: 
  default-src 'self';
  script-src 'self' 'unsafe-inline' https://trusted-cdn.com;
  style-src 'self' 'unsafe-inline';
  img-src 'self' data: https:;
  frame-src 'self' https://trusted-domain.com;
  connect-src 'self' https://api.example.com;

iframe Security Checklist

Pre-Deployment Checks

Are X-Frame-Options or CSP frame-ancestors used?
Is an appropriate sandbox attribute set for iframes?
Are all postMessage origins verified?
Is HTTPS used?
Is all user input sanitized?
Is CSRF protection implemented?
Are secure Cookie settings used (SameSite, HttpOnly, Secure)?

Runtime Checks

Is iframe loading and errors monitored?
Is suspicious postMessage activity logged?
Is the security of iframe content regularly reviewed?
Is a secure Content Delivery Network (CDN) used?

iframe Security Tools

1. Security Scanning Tools

bash
# Use OWASP ZAP to scan for iframe vulnerabilities
zap-cli quick-scan --self-contained https://example.com

# Use Burp Suite to test iframe security

2. Code Review Tools

javascript
# Use ESLint to detect insecure postMessage
# .eslintrc.js
{
  "rules": {
    "no-restricted-globals": ["error", {
      "name": "postMessage",
      "message": "Please verify the origin of postMessage"
    }]
  }
}

3. Browser Developer Tools

javascript
# Check iframes in console
console.log(document.querySelectorAll('iframe'));

# Check sandbox attribute of iframes
document.querySelectorAll('iframe').forEach(iframe => {
  console.log(iframe.sandbox);
});

Summary

Key points for iframe security protection:

Use X-Frame-Options or CSP: Prevent clickjacking attacks
Set sandbox Attribute: Limit iframe permissions
Verify postMessage Origin: Prevent information leakage and attacks
Use HTTPS: Protect data transmission security
Sanitize User Input: Prevent iframe injection attacks
Implement CSRF Protection: Prevent cross-site request forgery
Regular Security Audits: Ensure continuous security