sveltejs / svelte

Cybernetically enhanced web apps
https://svelte.dev
MIT License
77.46k stars 4.04k forks source link

Allow @html in attribute tags. #4302

Open dxlbnl opened 4 years ago

dxlbnl commented 4 years ago

When using @rollup/plugin-image with svg images, it puts plain svg in an imported variable. Then it's impossible to set the data:image url as source since it's being escaped.

An possible solution is to allow @html tags inside attributes.

Example:

      <img src="data:image/svg+xml;utf-8,&lt;svg height=&quot;25&quot; width=&quot;25&quot; version=&quot;1.1&quot; data-name=&quot;Layer 1&quot; id=&quot;prefix__Layer_1&quot;&gt;&lt;defs id=&quot;prefix__defs4&quot;&gt;&lt;style id=&quot;style2&quot;&gt;.prefix__cls-2{fill:#fff}&lt;/style&gt;&lt;/defs&gt;&lt;g transform=&quot;translate(-.527 .475)&quot; id=&quot;prefix__g863&quot;&gt;&lt;path class=&quot;prefix__cls-2&quot; d=&quot;M13.63 17.48c-.37 0-.45-.06-.54-.15a.46.46 0 00-.37-.19.67.67 0 00-.41.16.68.68 0 01-.59.15c-1.48-.18-3.36-3-3.36-5a2.89 2.89 0 011-2.44 3.28 3.28 0 012.81-.34l.55.15a.17.17 0 00.1 0c1.74-.38 3.08-.25 3.89.38a2.68 2.68 0 01.92 2.24c0 2-2 4.88-4 5m.64-10.73a2.74 2.74 0 012.54.32c-.14.33-.36.63-1.33 1a6.28 6.28 0 01-1.89.41h-.49a1.93 1.93 0 011.17-1.79M18 12.44a3 3 0 00-1-2.54 4.82 4.82 0 00-4-.51 3.87 3.87 0 00.05-.45l.53-.07a6.61 6.61 0 002-.44c1.24-.5 1.42-.93 1.6-1.35a.17.17 0 000-.2 3 3 0 00-3.07-.48 2.13 2.13 0 00-1.21 1.22 4.17 4.17 0 00-.51-1.07.22.22 0 00-.28 0 .18.18 0 000 .27 3.64 3.64 0 01.57 2.61l-.37-.1a3.65 3.65 0 00-3.15.41A3.25 3.25 0 008 12.44c0 2 1.91 5.17 3.7 5.39a1 1 0 00.87-.22c.09-.06.13-.09.18-.09.05 0 0 0 .08.06a.81.81 0 00.7.29h.16c2.21-.18 4.37-3.25 4.37-5.42&quot; id=&quot;prefix__path12&quot; fill=&quot;#fff&quot;/&gt;&lt;path class=&quot;prefix__cls-2&quot; d=&quot;M15.85 15.03a5 5 0 01-1.17 1.21.19.19 0 000 .27.21.21 0 00.16.08.28.28 0 00.12 0 5.4 5.4 0 001.26-1.3.18.18 0 00-.05-.27.19.19 0 00-.27.05&quot; id=&quot;prefix__path14&quot; fill=&quot;#fff&quot;/&gt;&lt;path class=&quot;prefix__cls-2&quot; d=&quot;M9 12.25a.2.2 0 00-.19.19 3.53 3.53 0 00.07.7.19.19 0 00.19.15.2.2 0 00.16-.26 2.68 2.68 0 01-.07-.62.2.2 0 00-.2-.19&quot; id=&quot;prefix__path16&quot; fill=&quot;#fff&quot;/&gt;&lt;path class=&quot;prefix__cls-2&quot; d=&quot;M11 9.9a2 2 0 00-2.14 1.7.21.21 0 00.14.23.2.2 0 00.2-.15 1.59 1.59 0 011.8-1.39.2.2 0 100-.39&quot; id=&quot;prefix__path18&quot; fill=&quot;#fff&quot;/&gt;&lt;/g&gt;&lt;/svg&gt;" alt="apple">
Conduitry commented 4 years ago

Basically the same as #1779, and I still have the same concerns about making Svelte responsible for decoding entities at runtime, especially in SSR.

ghost commented 4 years ago

Another perspective is that this opens up yet another opportunity for XSS/CSRF exploitation. I think the less places we support injection, the better.

https://owasp.org/www-project-top-ten/

dxlbnl commented 4 years ago

@Conduitry I'm not seeing how it should be able to decode html entities, as it just shouldn't encode them to begin with?

@dkondrad It does, but thats why it would be in an explicit {@html } tag.

Conduitry commented 4 years ago

Oh that's true for SSR I suppose. If {@html foo} meant to literally insert that string at this point in the server rendered HTML, that would work. It's not really any more of a risk then {@html} elsewhere already is. You're taking your life in your hands either way, really.

For DOM mode, we'd still need some sort of hidden text area mechanism, because the APIs we have available to us expect literal strings.

nstuyvesant commented 2 years ago

Here's an example from Bootstrap 5.1 Documentation for Tooltips that contain HTML...

<button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-html="true" title="<em>Tooltip</em> <u>with</u> <b>HTML</b>">
  Tooltip with HTML
</button>

In my case, I want this...

   const title = `<em>Tooltip</em> <u>with</u> <b>HTML</b>`

and

<button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-html="true" title={@html title}>
  Tooltip with HTML
</button>

for a website that is not public.

Jojoshua commented 1 year ago

Any tooltip library is going to have this need...as I just found this svelte limitation trying to use html with https://kazzkiq.github.io/balloon.css/

Metis77 commented 3 months ago

We also have Html entities in the title. No need to have html tags, but the symbols are a must have. Even google SERPs do respect them.

Maybe adding another Special tag just for Html entities, like {@entities H&#8322;}