A component which applies guards to srcdoc iframes in order to provide a predictable and safe experience to the user. Complements the
sandboxnative iframe attribute.
- The Problem
- This Solution
- Guards
- Install
- Usage Example
- Component Props
- Special Thanks
- License
- Changelog
- Security
You need to render an html document, for which you have the source locally, into an iframe on your React application. However, you would like some guards applied to the document in order to provide a safe and consistent experience to the user. For example, preventing clicks on elements which could lead to page navigation.
This component compliments the sandbox iframe attribute. It will take the html document source code which you provide through the srcDoc component prop and inject safeguards on document load.
The following guards are applied to the document:
- disable pointer events on any element with an href attribute, buttons, and images.
- only whitelist the "allow-same-origin"
sandboxattribute flag for guard injection into the document. referrerPolicyset to "no-referrer".
npm install --save react-safe-src-doc-iframe
Or
yarn add react-safe-src-doc-iframe
Note this package also depends on
reactandprop-types. Ensure they are installed or available beforehand.
// 1) es6 module
import SafeSrcDocIframe from 'react-safe-src-doc-iframe';
// 2) commonjs
const SafeSrcDocIframe = require('react-safe-src-doc-iframe').default;
// 3) window
const SafeSrcDocIframe = window.SafeSrcDocIframe;import React from 'react';
import SafeSrcDocIframe from 'react-safe-src-doc-iframe';
const html = `
<!DOCTYPE html>
<html>
<head>
<title>My Cats Page</title>
</head>
<body>
<a href="https://link-to-about-page.com">About</a><br />
<a href="https://link-to-awesome-cats.com"><img src="http://placekitten.com/200/300" /></a><br />
<button onclick="navigate();">Click me to see more cats!</button>
</body>
</html>
`;
const App = () => {
return <SafeSrcDocIframe srcdoc={html} width="500" height="500" />;
};Note: any prop not specified here will be forwarded to the native iframe element. However, if
srcis passed, it will always be filtered out.
string| optional. Default value:no-referrer.
string| optional. Default value:allow-same-origin(for safeguard injection).
The value for the sandbox iframe attribute.
string| required.
Source of the html document to render.
string| required.
Provide a title for the iframe in order to help screen reader users. More info
- "guard" icon created by Jason Gray, from the Noun Project. Used with attribution under Creative Commons.
- "Browser" icon created by Wira, from the Noun Project. Used with attribution under Creative Commons.
- Downshift for the README format inspiration :)