50 lines
1.1 KiB
TypeScript
50 lines
1.1 KiB
TypeScript
|
import React, { useEffect, useRef } from 'react';
|
||
|
|
|
||
|
|
interface ISafeEmbed {
|
||
|
|
/** Styles for the outer frame element. */
|
||
|
|
className?: string,
|
||
|
|
/** Space-separate list of restrictions to ALLOW for the iframe. */
|
||
|
|
sandbox?: string,
|
||
|
|
/** Unique title for the iframe. */
|
||
|
|
title: string,
|
||
|
|
/** HTML body to embed. */
|
||
|
|
html?: string,
|
||
|
|
}
|
||
|
|
|
||
|
|
/** Safely embeds arbitrary HTML content on the page (by putting it in an iframe). */
|
||
|
|
const SafeEmbed: React.FC<ISafeEmbed> = ({
|
||
|
|
className,
|
||
|
|
sandbox,
|
||
|
|
title,
|
||
|
|
html,
|
||
|
|
}) => {
|
||
|
|
const iframe = useRef<HTMLIFrameElement>(null);
|
||
|
|
|
||
|
|
useEffect(() => {
|
||
|
|
const iframeDocument = iframe.current?.contentWindow?.document;
|
||
|
|
|
||
|
|
if (iframeDocument && html) {
|
||
|
|
iframeDocument.open();
|
||
|
|
iframeDocument.write(html);
|
||
|
|
iframeDocument.close();
|
||
|
|
iframeDocument.body.style.margin = '0';
|
||
|
|
|
||
|
|
const innerFrame = iframeDocument.querySelector('iframe');
|
||
|
|
if (innerFrame) {
|
||
|
|
innerFrame.width = '100%';
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}, [iframe.current, html]);
|
||
|
|
|
||
|
|
return (
|
||
|
|
<iframe
|
||
|
|
ref={iframe}
|
||
|
|
className={className}
|
||
|
|
sandbox={sandbox}
|
||
|
|
title={title}
|
||
|
|
/>
|
||
|
|
);
|
||
|
|
};
|
||
|
|
|
||
|
|
export default SafeEmbed;
|