diff --git a/app/soapbox/features/embedded-status/index.tsx b/app/soapbox/features/embedded-status/index.tsx index 3ba482b34..52a4a7b90 100644 --- a/app/soapbox/features/embedded-status/index.tsx +++ b/app/soapbox/features/embedded-status/index.tsx @@ -1,4 +1,5 @@ import React, { useEffect, useState } from 'react'; +import { useHistory } from 'react-router-dom'; import { fetchStatus } from 'soapbox/actions/statuses'; import MissingIndicator from 'soapbox/components/missing_indicator'; @@ -18,10 +19,15 @@ const getStatus = makeGetStatus(); /** Status to be presented in an iframe for embeds on external websites. */ const EmbeddedStatus: React.FC = ({ params }) => { const dispatch = useAppDispatch(); + const history = useHistory(); const status = useAppSelector(state => getStatus(state, { id: params.statusId })); const [loading, setLoading] = useState(true); + // Prevent navigation for UX and security. + // https://stackoverflow.com/a/71531211 + history.block(); + useEffect(() => { dispatch(fetchStatus(params.statusId)) .then(() => setLoading(false))