react-iframe

library1.8.5jsnpmunverified

react-iframe is a React component designed to simplify the integration of `<iframe>` elements into React applications. It acts as a convenient, TypeScript-supported wrapper around the native HTML `<iframe>` tag, abstracting common setup and attribute handling. The current stable version is 1.8.5. While it does not follow a strict release cadence, the project appears actively maintained with recent updates and comprehensive TypeScript support, making it well-suited for modern React development. Its key differentiator is providing a prop-driven interface for `iframe` attributes, including graceful handling of HTML5 deprecated attributes (like `frameBorder` and `allowFullScreen`), and offering explicit, convenient props for `sandbox` and `allow` attributes, which are crucial for security and feature control in contemporary web development and can be more cumbersome to manage directly with a plain `<iframe>` element.

web-framework

npm install react-iframe

github ↗package ↗

INSTALL

IMPORT

SIG · REACT-IFRAME

react-iframe

web-frameworkjavascriptv1.8.5

Install

—

Import

—

Disk

—

Pass rate

0/ 6

Env Coverage0 / 6

glibc

18–22

musl

18–22

Install & Compatibility

Where this runs

tested against v? · npm install

Install × environment matrix

Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux

musl

node 18–226 runs

build_error

glibc

node 18–226 runs

build_error

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

Iframe

✓ import Iframe from 'react-iframe'

✗ import { Iframe } from 'react-iframe'

Iframe is exported as the default export of the package.

Iframe

✓ const Iframe = require('react-iframe').default

✗ const Iframe = require('react-iframe')

For CommonJS environments, the default export must be accessed via `.default`.

IframeProps

✓ import type { IframeProps } from 'react-iframe'

The type definition for the component's props can be imported for TypeScript usage.

Demonstrates basic integration of the `Iframe` component, including essential layout props, explicit `frameBorder` setting, and examples of crucial `allow` and `sandbox` attributes for modern iframe security and feature control.

import React from 'react'; import Iframe from 'react-iframe'; function MyPage() { return ( <div> <h1>My Embedded Content</h1> <Iframe url="https://www.sdrive.app/embed/1ptBQD" width="640px" height="320px" id="my-sdrive-iframe" className="my-iframe-class" display="block" position="relative" frameBorder={0} allow="fullscreen; camera; microphone; geolocation" sandbox="allow-scripts allow-same-origin allow-forms allow-popups" styles={{ border: '1px solid #ccc', borderRadius: '8px' }} /> <p>Content below the iframe.</p> </div> ); } export default MyPage;

Debug

Known issues

deprecatedSeveral HTML iframe attributes like `frameBorder`, `scrolling`, and `allowFullScreen` are deprecated in HTML5. While `react-iframe` supports them for compatibility, it's recommended to achieve equivalent styling and functionality using CSS and the `allow` and `sandbox` attributes.

fix

Use CSS for styling (e.g., `border: 0` for `frameBorder`) and utilize the `allow` and `sandbox` props for modern feature control instead of deprecated attributes.

affects: >=1.x.x

gotchaThe `sandbox` and `allow` attributes are critical for iframe security and permissions. Improper configuration, especially omitting `sandbox` or using overly permissive values, can expose your application to Cross-Site Scripting (XSS) or other vulnerabilities from the embedded content. Conversely, overly restrictive settings can prevent necessary functionality.

fix

Always explicitly define `sandbox` with the minimum necessary permissions (e.g., `allow-scripts allow-same-origin`). Carefully review the `allow` attribute to grant only required features (e.g., `geolocation`, `camera`). Consult MDN documentation for valid values and security implications.

affects: >=1.x.x

gotchaThe `styles` prop in `react-iframe` intentionally overrides any conflicting style-related props such as `width`, `height`, `position`, or `overflow`. This behavior can lead to unexpected sizing or positioning if not understood.

fix

If using the `styles` prop, ensure it contains all necessary style definitions and accounts for any overrides of other props. Prioritize using specific props (e.g., `width`, `height`) unless granular CSS control is needed via `styles`.

affects: >=1.x.x

gotchaIframes are subject to browser security policies like the Same-Origin Policy, `X-Frame-Options` HTTP headers, and Content Security Policy (CSP). External content might refuse to load or interact if these policies are not met, often manifesting as blank iframes or console errors.

fix

Verify the `url` target's server-side configuration for `X-Frame-Options` and CSP. Ensure your own CSP allows iframing if you are embedding local content or content from specific domains. Be aware that these are server-side restrictions and may be outside your control for third-party content.

affects: >=1.x.x

Errors

Common errors & fixes

Refused to display 'https://example.com' in a frame because it set 'X-Frame-Options' to 'deny'.

The server hosting the embedded URL explicitly prevents it from being loaded in an iframe via the `X-Frame-Options` or `Content-Security-Policy` HTTP headers.

fix

Contact the content provider to see if they allow iframing. If not, you cannot embed this specific URL directly. Consider alternative integration methods like APIs or direct links.

Blocked a frame with origin "https://your-app.com" from accessing a cross-origin frame.

This error typically occurs when JavaScript within the iframe or the parent tries to interact with each other across different origins, violating the Same-Origin Policy, or when the `sandbox` attribute restricts such interactions.

fix

If interaction is intended, ensure both origins are the same, or use `window.postMessage()` for secure cross-origin communication. If using `sandbox`, ensure `allow-same-origin` is included if you need the iframe to be considered same-origin, but be cautious of security implications.

TypeError: Cannot read properties of undefined (reading 'default') OR Iframe is not a function

Occurs in CommonJS environments when attempting to `require('react-iframe')` without correctly accessing the default export.

fix

Change your import statement to `const Iframe = require('react-iframe').default;` to correctly import the default component.

The 'sandbox' attribute has an invalid value 'invalid-value'.

The string or array provided to the `sandbox` prop contains one or more values that are not valid `iframe` sandbox tokens.

fix

Review the MDN documentation for `<iframe>` sandbox attribute to ensure all values are valid tokens (e.g., `allow-forms`, `allow-scripts`, `allow-same-origin`, etc.). Correct any misspelled or unrecognized values.

Upgrade

Version history

1.8.5latest on npm

Audit

Dependencies

reactrequiredPeer dependency required for the React component to function.

Agent activity

4 hits · last 30 days

node

Resources

githubhttps://github.com/svenanders/react-iframe ↗

packagehttps://www.npmjs.com/package/react-iframe ↗