RageStudio/comty
1
0
Fork 0
mirror of https://github.com/ragestudio/comty.git synced 2025-06-10 02:54:15 +00:00
Code Issues Packages Projects Releases Wiki Activity

support remote resource

Browse Source
This commit is contained in:
SrGooglo 2023-07-12 11:11:38 +00:00
parent dceedb1e8a
commit b3348fd817
1 changed files with 17 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

25
packages/app/src/components/RemoteSVGToComponent/index.jsx
View File

@ -1,12 +1,13 @@
import loadable from "@loadable/component" import loadable from "@loadable/component"
import DOMPurify from "dompurify" import DOMPurify from "dompurify"
import axios from "axios"
export default loadable(async (props) => { export default loadable(async (props) => {
// IMPORTANT: Only use this component for SVG files that you trust. // IMPORTANT: Only use this component for SVG files that you trust.
console.warn("RemoteSVGToComponent: This component is not safe at all, cause use __dangerouslySetInnerHTML. Only use it for SVG files that you trust.") console.warn("RemoteSVGToComponent: This component is not safe at all, cause use __dangerouslySetInnerHTML. Only use it for SVG files that you trust.")
// make sure the url is local // make sure the url is local
if (!props.src.startsWith("/")) { if (!props.src.startsWith("/") && !props.remote) {
console.error("RemoteSVGToComponent: The file is not a local file.") console.error("RemoteSVGToComponent: The file is not a local file.")
return () => null return () => null
} }
@ -17,23 +18,23 @@ export default loadable(async (props) => {
return () => null return () => null
} }
const response = await fetch(props.src, { const response = await axios({
headers: { method: "GET",
"Content-Type": "image/svg+xml" url: props.src,
} }).catch((err) => {
console.error(err)
return false
}) })
if (!response.ok) { if (!response) {
return () => <div>Error</div> return () => <></>
} }
let svg = await response.text() return () => <div dangerouslySetInnerHTML={{
__html: DOMPurify.sanitize(response.data, {
svg = DOMPurify.sanitize(svg, {
USE_PROFILES: { USE_PROFILES: {
svg: true svg: true
} }
}) })
}} />
return () => <div dangerouslySetInnerHTML={{ __html: svg }} />
}) })