urbit/shrub
1
1
Fork 0
mirror of https://github.com/urbit/shrub.git synced 2024-12-19 16:51:42 +03:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #4473 from urbit/lf/img-cors

Browse Source 
RemoteContent: remove crossOrigin attribute if CORS unsupported
This commit is contained in:
matildepark 2021-02-21 23:31:27 -05:00 committed by GitHub
commit 5f138e80ac
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 11 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
pkg/interface/src/views/components/RemoteContent.tsx
View File

@ -23,6 +23,7 @@ interface RemoteContentProps {
interface RemoteContentState { interface RemoteContentState {
unfold: boolean; unfold: boolean;
embed: any | undefined; embed: any | undefined;
noCors: boolean;
} }
const IMAGE_REGEX = new RegExp(/(jpg|img|png|gif|tiff|jpeg|webp|webm|svg)$/i); const IMAGE_REGEX = new RegExp(/(jpg|img|png|gif|tiff|jpeg|webp|webm|svg)$/i);
@ -36,11 +37,13 @@ class RemoteContent extends PureComponent<RemoteContentProps, RemoteContentState
super(props); super(props);
this.state = { this.state = {
unfold: props.unfold || false, unfold: props.unfold || false,
embed: undefined embed: undefined,
noCors: false
}; };
this.unfoldEmbed = this.unfoldEmbed.bind(this); this.unfoldEmbed = this.unfoldEmbed.bind(this);
this.loadOembed = this.loadOembed.bind(this); this.loadOembed = this.loadOembed.bind(this);
this.wrapInLink = this.wrapInLink.bind(this); this.wrapInLink = this.wrapInLink.bind(this);
this.onError = this.onError.bind(this);
} }
componentWillUnmount() { componentWillUnmount() {
@ -87,6 +90,10 @@ return;
</BaseAnchor>); </BaseAnchor>);
} }
onError(e: Event) {
this.setState({ noCors: true });
}
render() { render() {
const { const {
remoteContentPolicy, remoteContentPolicy,
@ -103,6 +110,7 @@ return;
onLoad = () => {}, onLoad = () => {},
...props ...props
} = this.props; } = this.props;
const { noCors } = this.state;
const isImage = IMAGE_REGEX.test(url); const isImage = IMAGE_REGEX.test(url);
const isAudio = AUDIO_REGEX.test(url); const isAudio = AUDIO_REGEX.test(url);
const isVideo = VIDEO_REGEX.test(url); const isVideo = VIDEO_REGEX.test(url);
@ -111,11 +119,12 @@ return;
if (isImage && remoteContentPolicy.imageShown) { if (isImage && remoteContentPolicy.imageShown) {
return this.wrapInLink( return this.wrapInLink(
<BaseImage <BaseImage
crossOrigin="anonymous" {...(noCors ? {} : { crossOrigin: "anonymous" })}
flexShrink={0} flexShrink={0}
src={url} src={url}
style={style} style={style}
onLoad={onLoad} onLoad={onLoad}
onError={this.onError}
{...imageProps} {...imageProps}
{...props} {...props}
/> />