sanitize-svg
a small SVG sanitizer to prevent XSS attacks
Installation
yarn add @mattkrick/sanitize-svg
Why
Bad actors can put script tags in SVG files.
These script tags are not run when the svg is inside an <img>
,
but if the SVG file is opened directly ("Open image in...") they will run under the image's domain,
which means that bad actor could steal domain-specific context (cookies, local storage, etc.)
FAQ
When should I use this?
Anytime someone tries to upload a svg. Optionally on the client, but definitely on the server.
How do I detect if the SVG is malicious?
The output file will be null
Why does your package start with @mattkrick? Ego much?
NPM's security model is broken by design & this is marginally safer because it prevents namespace & typo attacks.
Usage on Client
import sanitizeSVG from '@mattkrick/sanitize-svg'
// file input onSubmit handler
const onSubmit = async (e) => {
const attachedImage = e.currentTarget.files[0]
const cleanImage = await sanitizeSVG(attachedImage)
if (!cleanImage) {
alert('Howdy, hacker')
}
}
// in JSX
<input type='file' onSubmit={onSubmit}/>
Usage on Server
import JSDOM from 'jsdom'
import sanitizeSVG from '@mattkrick/sanitize-svg'
const {window} = new JSDOM()
const imageName = 'foo.svg'
const imageBuffer = await fetch(imageName).then(r => r.buffer())
// Buffers don't contain type info, so you should check that on your own
if (imageName.endsWith('.svg')) {
const cleanImage = await sanitizeSVG(imageBuffer, window)
}
License
MIT