sanitize in a custom upload form

@pexlechris Depending on how you are handling this uploading file, Safe SVG may process that automatically. Our sanitization method runs off the core WordPress hook wp_handle_upload_prefilter. If you’re using an upload function from WordPress that ends up calling that hook, our sanitization should automatically happen.

If you’re not handling uploads in a way that will trigger that hook, you can manually call our sanitization. Something along the lines of:

if ( class_exists( 'safe_svg' ) ) {
    $safe_svg = new safe_svg();
    $sanitized_file = $safe_svg->check_for_svg( $file );

    if ( isset( $sanitized_file['error'] ) && $sanitized_file['error'] ) {
        // Handle error state
    }

    // Sanitization worked, save file here
}

I think that you havent forcasted cases like <svg onclick=”test();”>…

@pexlechris An attribute like that will be caught and removed currently. Do you have a test case where you’re seeing that onclick attribute not being removed?

The $safe_svg->check_for_svg( $file ) I mention above will first check if the file type is SVG and if so, it then runs the file through our sanitization. That sanitization relies on a list of approved tags and attributes and any tags or attributes that aren’t approved are removed. In this case, the onclick attribute is not allowed so it will be stripped.

<?xml version=”1.0″ encoding=”utf-8″?>
<!– Generator: Adobe Illustrator 21.0.2, SVG Export Plug-In . SVG Version: 6.00 Build 0) –>
<svg onclick=”test();” version=”1.1″ id=”Layer_1″ xmlns=”https://www.w3.org/2000/svg&#8221; xmlns:xlink=”https://www.w3.org/1999/xlink&#8221; x=”0px” y=”0px”
width=”36px” height=”40px” viewBox=”0 0 36 40″ style=”enable-background:new 0 0 36 40;” xml:space=”preserve”>
<style type=”text/css”>
.st0{fill:#303030;}
</style>
<g>
<g>
<path class=”st0″ d=”M34.1,4.1H1.9c-0.7,0-1.3-0.6-1.3-1.3V1.9c0-0.7,0.6-1.3,1.3-1.3h32.3c0.7,0,1.3,0.6,1.3,1.3v0.9
C35.5,3.6,34.9,4.1,34.1,4.1z”/>
<path class=”st0″ d=”M28.9,13.9h-27c-0.7,0-1.3-0.6-1.3-1.3v-0.9c0-0.7,0.6-1.3,1.3-1.3h27c0.7,0,1.3,0.6,1.3,1.3v0.9
C30.2,13.3,29.6,13.9,28.9,13.9z”/>
<path class=”st0″ d=”M34.1,23.7H1.9c-0.7,0-1.3-0.6-1.3-1.3v-0.9c0-0.7,0.6-1.3,1.3-1.3h32.3c0.7,0,1.3,0.6,1.3,1.3v0.9
C35.5,23.1,34.9,23.7,34.1,23.7z”/>
</g>
<g>
<path class=”st0″ d=”M2.1,29.9l3.1,7.6l3.1-7.6h1.6v9.3H8.6v-3.6l0.1-3.9l-3.1,7.6H4.7l-3.1-7.6l0.1,3.9v3.6H0.5v-9.3H2.1z”/>
<path class=”st0″ d=”M17.3,34.9h-4.1v3.3H18v1H12v-9.3h5.9v1h-4.6v3h4.1V34.9z”/>
<path class=”st0″ d=”M26.7,39.3h-1.2L20.7,32v7.2h-1.2v-9.3h1.2l4.7,7.2v-7.2h1.2V39.3z”/>
<path class=”st0″ d=”M35.5,29.9v6.4c0,0.9-0.3,1.6-0.8,2.2c-0.6,0.6-1.3,0.9-2.2,0.9l-0.3,0c-1,0-1.8-0.3-2.4-0.8
c-0.6-0.6-0.9-1.3-0.9-2.3v-6.4h1.2v6.3c0,0.7,0.2,1.2,0.6,1.6c0.4,0.4,0.9,0.6,1.6,0.6c0.7,0,1.2-0.2,1.6-0.6
c0.4-0.4,0.6-0.9,0.6-1.6v-6.3H35.5z”/>
</g>
</g>
</svg>

The $file[‘error’] is 0

Okay. I wasn’t clear on this in my code example but there should only be an error if there was a problem processing the SVG, something like malformed content. If there are things that need to be sanitized in the SVG, that shouldn’t return an error response but it should return the sanitized SVG string. I guess also important to note that if you’re using the check_for_svg method, that method does expect a normal file array (which should include things like tmp_name and name). If not, this won’t work correctly.

The below svg file contains onclick attributed and there is no error.

<?xml version=”1.0″ encoding=”utf-8″?>
<!– Generator: Adobe Illustrator 21.0.2, SVG Export Plug-In . SVG Version: 6.00 Build 0) –>
<svg onclick=”test();” version=”1.1″ id=”Layer_1″ xmlns=”https://www.w3.org/2000/svg” xmlns:xlink=”https://www.w3.org/1999/xlink” x=”0px” y=”0px”
width=”36px” height=”40px” viewBox=”0 0 36 40″ style=”enable-background:new 0 0 36 40;” xml:space=”preserve”>
<style type=”text/css”>
.st0{fill:#303030;}
</style>
<g>
<g>
<path class=”st0″ d=”M34.1,4.1H1.9c-0.7,0-1.3-0.6-1.3-1.3V1.9c0-0.7,0.6-1.3,1.3-1.3h32.3c0.7,0,1.3,0.6,1.3,1.3v0.9
C35.5,3.6,34.9,4.1,34.1,4.1z”/>
<path class=”st0″ d=”M28.9,13.9h-27c-0.7,0-1.3-0.6-1.3-1.3v-0.9c0-0.7,0.6-1.3,1.3-1.3h27c0.7,0,1.3,0.6,1.3,1.3v0.9
C30.2,13.3,29.6,13.9,28.9,13.9z”/>
<path class=”st0″ d=”M34.1,23.7H1.9c-0.7,0-1.3-0.6-1.3-1.3v-0.9c0-0.7,0.6-1.3,1.3-1.3h32.3c0.7,0,1.3,0.6,1.3,1.3v0.9
C35.5,23.1,34.9,23.7,34.1,23.7z”/>
</g>
<g>
<path class=”st0″ d=”M2.1,29.9l3.1,7.6l3.1-7.6h1.6v9.3H8.6v-3.6l0.1-3.9l-3.1,7.6H4.7l-3.1-7.6l0.1,3.9v3.6H0.5v-9.3H2.1z”/>
<path class=”st0″ d=”M17.3,34.9h-4.1v3.3H18v1H12v-9.3h5.9v1h-4.6v3h4.1V34.9z”/>
<path class=”st0″ d=”M26.7,39.3h-1.2L20.7,32v7.2h-1.2v-9.3h1.2l4.7,7.2v-7.2h1.2V39.3z”/>
<path class=”st0″ d=”M35.5,29.9v6.4c0,0.9-0.3,1.6-0.8,2.2c-0.6,0.6-1.3,0.9-2.2,0.9l-0.3,0c-1,0-1.8-0.3-2.4-0.8
c-0.6-0.6-0.9-1.3-0.9-2.3v-6.4h1.2v6.3c0,0.7,0.2,1.2,0.6,1.6c0.4,0.4,0.9,0.6,1.6,0.6c0.7,0,1.2-0.2,1.6-0.6
c0.4-0.4,0.6-0.9,0.6-1.6v-6.3H35.5z”/>
</g>
</g>
</svg>

@pexlechris Yes, there shouldn’t be an error here, as the error only happens if the SVG can’t be processed, not if it has attributes or elements that need to be removed.

I just tested that SVG with the code I first provided above and it does work as expected.

To recap:
– When you call the $safe_svg->check_for_svg( $file ) with a proper file array, it first checks if the file is an SVG and if so, it then tries to sanitize it
– If it can’t sanitize it for any reason, it will return an error. If you’re building your own upload integration, you would then delete the temporary file and not store the SVG
– If it can properly sanitize it, it will automatically overwrite the SVG file contents with the sanitized markup and then return the same file array that was passed in (with no error)

So no error means the SVG was processed correctly. If you inspect the contents of the actual SVG, you should see that sanitized.

As an example, I took the SVG code you provided, ran it through the code I supplied earlier and here’s the result:

`
<?xml version=”1.0″ encoding=”UTF-8″?> <svg xmlns=”https://www.w3.org/2000/svg&#8221; xmlns:xlink=”https://www.w3.org/1999/xlink&#8221; version=”1.1″ id=”Layer_1″ x=”0px” y=”0px” width=”36px” height=”40px” viewBox=”0 0 36 40″ style=”enable-background:new 0 0 36 40;” xml:space=”preserve”> <style type=”text/css”> .st0{fill:#303030;} </style> <g> <g> <path class=”st0″ d=”M34.1,4.1H1.9c-0.7,0-1.3-0.6-1.3-1.3V1.9c0-0.7,0.6-1.3,1.3-1.3h32.3c0.7,0,1.3,0.6,1.3,1.3v0.9 C35.5,3.6,34.9,4.1,34.1,4.1z”></path> <path class=”st0″ d=”M28.9,13.9h-27c-0.7,0-1.3-0.6-1.3-1.3v-0.9c0-0.7,0.6-1.3,1.3-1.3h27c0.7,0,1.3,0.6,1.3,1.3v0.9 C30.2,13.3,29.6,13.9,28.9,13.9z”></path> <path class=”st0″ d=”M34.1,23.7H1.9c-0.7,0-1.3-0.6-1.3-1.3v-0.9c0-0.7,0.6-1.3,1.3-1.3h32.3c0.7,0,1.3,0.6,1.3,1.3v0.9 C35.5,23.1,34.9,23.7,34.1,23.7z”></path> </g> <g> <path class=”st0″ d=”M2.1,29.9l3.1,7.6l3.1-7.6h1.6v9.3H8.6v-3.6l0.1-3.9l-3.1,7.6H4.7l-3.1-7.6l0.1,3.9v3.6H0.5v-9.3H2.1z”></path> <path class=”st0″ d=”M17.3,34.9h-4.1v3.3H18v1H12v-9.3h5.9v1h-4.6v3h4.1V34.9z”></path> <path class=”st0″ d=”M26.7,39.3h-1.2L20.7,32v7.2h-1.2v-9.3h1.2l4.7,7.2v-7.2h1.2V39.3z”></path> <path class=”st0″ d=”M35.5,29.9v6.4c0,0.9-0.3,1.6-0.8,2.2c-0.6,0.6-1.3,0.9-2.2,0.9l-0.3,0c-1,0-1.8-0.3-2.4-0.8 c-0.6-0.6-0.9-1.3-0.9-2.3v-6.4h1.2v6.3c0,0.7,0.2,1.2,0.6,1.6c0.4,0.4,0.9,0.6,1.6,0.6c0.7,0,1.2-0.2,1.6-0.6 c0.4-0.4,0.6-0.9,0.6-1.6v-6.3H35.5z”></path> </g> </g> </svg>

• This reply was modified 2 years, 8 months ago by Darin Kotter.

Now I understood how it works.
Thank you for your time