iframe (Inline Frame) is an inline frame element in HTML that allows embedding another independent HTML document within the current webpage. An iframe creates a separate browser context with its own Document Object Model (DOM), JavaScript execution environment, and CSS styling context.
Basic Syntax
<iframe src="https://example.com" width="600" height="400"></iframe>
Common Attributes
- src: Specifies the URL of the page to embed
- width/height: Sets the width and height of the iframe
- name: Names the iframe, which can be used with the target attribute of links
- sandbox: Restricts security policies for iframe content
- allowfullscreen: Allows iframe content to be displayed in fullscreen
- loading: Lazy loading settings (lazy/eager)
- referrerpolicy: Controls the sending of referrer information
Security Considerations
- Same-Origin Policy: iframe content must comply with the same-origin policy, and cross-domain access is restricted
- sandbox Attribute: It is recommended to always use the sandbox attribute to limit iframe permissions
- X-Frame-Options: Parent pages can control whether they allow being embedded through HTTP headers
- Content Security Policy (CSP): Use the frame-ancestors directive to control embedding permissions
Pros and Cons of iframe
Advantages:
- Achieves page content modularity and isolation
- Facilitates integration of third-party content (such as videos, maps, advertisements)
- Independent CSS and JavaScript environment, avoiding style conflicts
Disadvantages:
- Lower SEO friendliness, search engines have difficulty indexing iframe content
- Increases page load time and resource consumption
- Mobile compatibility and user experience may be affected
- Cross-domain communication is complex and requires using the postMessage API