React Safe Srcdoc Iframe
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.
Table of Contents
- The Problem
- This Solution
- Guards
- Install
- Usage Example
- Component Props
- Special Thanks
- License
- Changelog
- Security
The Problem 🔴
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 Solution 🔵
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.
Guards 👮
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".
Install
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.
Import Examples
// 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;Usage Example 📝
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" />;
};Component Props
Note: any prop not specified here will be forwarded to the native iframe element. However, if
srcis passed, it will always be filtered out.
referrerPolicy
string| optional. Default value:no-referrer.
sandbox
string| optional. Default value:allow-same-origin(for safeguard injection).
The value for the sandbox iframe attribute.
srcDoc
string| required.
Source of the html document to render.
title
string| required.
Provide a title for the iframe in order to help screen reader users. More info
Special Thanks 👏
- "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 :)