Filament•10mo ago

Keep svg viewBox attribute on custom sanitizer doesn't work

Hi! To display icons from a svg column on the resource list page I'm attempting to overwrite the HTML sanitizer to allow rendering SVG. The SVG is whitelisted as expected, but the allowed attributes do not seem to work. I just the following code-snippet for example:

$sanitizer = new HtmlSanitizer(((new HtmlSanitizerConfig())
                            ->allowSafeElements()
                            ->allowElement('svg', ['fill', 'fill-opacity', 'view-box', 'viewBox', 'preserveAspectRatio', 'stroke', 'stroke-width', 'xmlns'])
                            ->allowElement('path', ['stroke-linecap', 'fill', 'fill-opacity', 'stroke-linejoin', 'd'])
                            ->allowElement('g', ['fill', 'fill-opacity'])
                            ->allowElement('polyline', ['fill', 'points'])
                            ->allowElement('polygon', ['fill', 'points'])
                            ->allowRelativeLinks()
                            ->allowRelativeMedias()
                            ->allowAttribute('class', allowedElements: '*')
                            ->allowAttribute('style', allowedElements: '*')
                            ->withMaxInputLength(500000)));
                        
                        $svg = $sanitizer->sanitize($record->svg);

                        dd([
                            'svg' => $record->svg,
                            'sanitized' => $svg
                        ]);

$sanitizer = new HtmlSanitizer(((new HtmlSanitizerConfig())
                            ->allowSafeElements()
                            ->allowElement('svg', ['fill', 'fill-opacity', 'view-box', 'viewBox', 'preserveAspectRatio', 'stroke', 'stroke-width', 'xmlns'])
                            ->allowElement('path', ['stroke-linecap', 'fill', 'fill-opacity', 'stroke-linejoin', 'd'])
                            ->allowElement('g', ['fill', 'fill-opacity'])
                            ->allowElement('polyline', ['fill', 'points'])
                            ->allowElement('polygon', ['fill', 'points'])
                            ->allowRelativeLinks()
                            ->allowRelativeMedias()
                            ->allowAttribute('class', allowedElements: '*')
                            ->allowAttribute('style', allowedElements: '*')
                            ->withMaxInputLength(500000)));
                        
                        $svg = $sanitizer->sanitize($record->svg);

                        dd([
                            'svg' => $record->svg,
                            'sanitized' => $svg
                        ]);

Resulting in the following dd() output:

"svg" => "<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 50"><g ..."
"sanitized" => "<svg><g ..."

"svg" => "<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 50"><g ..."
"sanitized" => "<svg><g ..."

But I did specify on the sanitizer to allow the viewBox attribute as well. This results in unpredictable sizes. Does anyone have a clue on how to fix this? Thanks in advance!

Solution:

Fixed this by implementing a SvgColumn ourselves

Jump to solution

1 Reply

Solution

TiBiBa•10mo ago

Fixed this by implementing a SvgColumn ourselves

Gaming

Programming

Keep svg viewBox attribute on custom sanitizer doesn't work