Filament•11mo ago

On TextColumn using an HTML ->prefix() with <svg> results in the svg being stripped from the output

I am trying to add an icon with a link as a prefix to my table. I can add text no problem but the <svg> tag seems to be stripped. Any idea why and how to resolve? Code looks like this:

Tables\Columns\TextColumn::make('name')
                    ->label('Domain Name')
                    ->prefix(function (): ?HtmlString {
                        return new HtmlString(view('components.external-link-button', [])->render());
                    })

Tables\Columns\TextColumn::make('name')
                    ->label('Domain Name')
                    ->prefix(function (): ?HtmlString {
                        return new HtmlString(view('components.external-link-button', [])->render());
                    })

the blade component looks like this (just for testing):

<p class="text-2xl">
    foobar
    <svg height="100" width="100">
        <circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" />
    </svg>
</p>

<p class="text-2xl">
    foobar
    <svg height="100" width="100">
        <circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" />
    </svg>
</p>

and I can see that the p class along with "foobar" is rendered but the svg code is completely strippped. Any ideas why?

1 Reply

CTOP•11mo ago

After searching a bit I have found this thread here, it seems that <svg> is not allowed and stripped; https://discordapp.com/channels/883083792112300104/1194608307097325578 I am trying to: 1. Prefix a clickable svg on the left... I can see we have ->icon() but cannot see a way to make it clickable or turn it into a link 2. Ensure that the main text is ->copyable() Right now I am looking at overriding HTMLSanitizer in my AppServiceProvider, I think it could work For anyone searching in the future, the following works;

 $this->app->scoped(
            HtmlSanitizerInterface::class,
            fn (): HtmlSanitizer => new HtmlSanitizer(
                (new HtmlSanitizerConfig())
                    ->allowSafeElements()
                    ->allowElement('svg', ['fill', 'view-box', 'viewBox', 'stroke', 'stroke-width', 'xmlns'])
                    ->allowElement('path', ['stroke-linecap', 'stroke-linejoin', 'd'])
                    ->allowRelativeLinks()
                    ->allowRelativeMedias()
                    ->allowAttribute('class', allowedElements: '*')
                    ->allowAttribute('style', allowedElements: '*')
                    ->withMaxInputLength(500000),
            ),
        );

 $this->app->scoped(
            HtmlSanitizerInterface::class,
            fn (): HtmlSanitizer => new HtmlSanitizer(
                (new HtmlSanitizerConfig())
                    ->allowSafeElements()
                    ->allowElement('svg', ['fill', 'view-box', 'viewBox', 'stroke', 'stroke-width', 'xmlns'])
                    ->allowElement('path', ['stroke-linecap', 'stroke-linejoin', 'd'])
                    ->allowRelativeLinks()
                    ->allowRelativeMedias()
                    ->allowAttribute('class', allowedElements: '*')
                    ->allowAttribute('style', allowedElements: '*')
                    ->withMaxInputLength(500000),
            ),
        );

basically you just have to override HtmlSanitizerInterface and then add all the elements and their attributes. One kinda big issue I can see is that ViewBox is stripped always no matter what... but I guess that's more of a symfony problem

Gaming

Programming

On TextColumn using an HTML ->prefix() with <svg> results in the svg being stripped from the output