yuuza/outline
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Remove gist.github.com, gitlab.com from default CSP (#7008)

Browse Source
This commit is contained in:
Tom Moor
2024-06-08 10:54:55 -04:00
committed by GitHub
parent 946cbce06e
commit c02f7c9c85
8 changed files with 156 additions and 187 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
shared/editor/components/Frame.tsx
View File

@@ -26,8 +26,6 @@ type Props = Omit<Optional<HTMLIFrameElement>, "children"> & {
height?: string;
/** The allow policy of the frame */
allow?: string;
/** Whether to skip sanitization of the `src` prop */
dangerouslySkipSanitizeSrc?: boolean;
};
type PropsWithRef = Props & {
@@ -69,7 +67,6 @@ class Frame extends React.Component<PropsWithRef> {
isSelected,
referrerPolicy,
className = "",
dangerouslySkipSanitizeSrc,
src,
} = this.props;
const withBar = !!(icon || canonicalUrl);
@@ -94,7 +91,7 @@ class Frame extends React.Component<PropsWithRef> {
frameBorder="0"
title="embed"
loading="lazy"
src={dangerouslySkipSanitizeSrc ? src : sanitizeUrl(src)}
src={sanitizeUrl(src)}
referrerPolicy={referrerPolicy}
allowFullScreen
/>
@@ -167,19 +164,6 @@ const Bar = styled.div`
position: relative;
`;
/**
* Resize observer script that sends a message to the parent window when content is resized. Inject
* this script into the iframe to receive resize events.
*/
export const resizeObserverScript = `<script>
const resizeObserver = new ResizeObserver((entries) => {
for (const entry of entries) {
window.parent.postMessage({ "type": "frame-resized", "value": entry.contentRect.height }, '*');
}
});
resizeObserver.observe(document.body);
</script>`;
export default React.forwardRef<HTMLIFrameElement, Props>((props, ref) => (
<Frame {...props} forwardedRef={ref} />
));

12
shared/editor/embeds/Gist.tsx
View File

@@ -3,23 +3,13 @@ import Frame from "../components/Frame";
import { EmbedProps as Props } from ".";
function Gist(props: Props) {
const gistUrl = new URL(props.attrs.href);
const id = gistUrl.pathname.split("/")[2];
const gistLink = `https://gist.github.com/${id}.js`;
const gistScript = `<script type="text/javascript" src="${gistLink}"></script>`;
const styles =
"<style>*{ font-size:12px; } body { margin: 0; } .gist .blob-wrapper.data { max-height:300px; overflow:auto; }</style>";
const iframeHtml = `<html><head><base target="_parent">${styles}</head><body>${gistScript}</body></html>`;
return (
<Frame
src={`data:text/html;base64,${btoa(iframeHtml)}`}
src={`/embeds/github?url=${encodeURIComponent(props.attrs.href)}`}
className={props.isSelected ? "ProseMirror-selectednode" : ""}
width="100%"
height="355px"
id={`gist-${id}`}
title="GitHub Gist"
dangerouslySkipSanitizeSrc
/>
);
}

23
shared/editor/embeds/GitLabSnippet.tsx
View File

@@ -1,21 +1,20 @@
import * as React from "react";
import Frame, { resizeObserverScript } from "../components/Frame";
import Frame from "../components/Frame";
import { EmbedProps as Props } from ".";
function GitLabSnippet(props: Props) {
const frame = React.useRef(null);
const frame = React.useRef<HTMLIFrameElement>(null);
const [height, setHeight] = React.useState(400);
const snippetUrl = new URL(props.attrs.href);
const id = snippetUrl.pathname.split("/").pop();
const snippetLink = `${snippetUrl}.js`;
const snippetScript = `<script type="text/javascript" src="${snippetLink}"></script>${resizeObserverScript}`;
const styles =
"<style>body { margin: 0; .gitlab-embed-snippets { margin: 0; } }</style>";
const iframeHtml = `<html><head><base target="_parent">${styles}</head><body>${snippetScript}</body></html>`;
React.useEffect(() => {
const handler = (event: MessageEvent<{ type: string; value: number }>) => {
if (event.data.type === "frame-resized") {
const contentWindow =
frame.current?.contentWindow ||
frame.current?.contentDocument?.defaultView;
if (
event.data.type === "frame-resized" &&
event.source === contentWindow
) {
setHeight(event.data.value);
}
};
@@ -27,13 +26,11 @@ function GitLabSnippet(props: Props) {
return (
<Frame
ref={frame}
src={`data:text/html;base64,${btoa(iframeHtml)}`}
src={`/embeds/gitlab?url=${encodeURIComponent(props.attrs.href)}`}
className={props.isSelected ? "ProseMirror-selectednode" : ""}
width="100%"
height={`${height}px`}
id={`gitlab-snippet-${id}`}
title="GitLab Snippet"
dangerouslySkipSanitizeSrc
/>
);
}