Skip to content

Svelte compiler parses HTML entity without semicolon #8026

@tjkohli

Description

@tjkohli

Describe the bug

When setting a background image using an inline CSS style, Svelte is modifying the URL slightly to prevent it from working. I'm sure the scope of this issue could be more than just background image URLs, but that's where I've been able to reproduce it consistently.

From the REPL:

<div style="background-image: url(https://cdn.raster.app/goodnature/stock-photos/ZJ6yMqygYn?ixlib=js-3.7.0&height=902&width=1500&rect=0%2C0%2C5184%2C902&fit=crop&compress=false&ar=5.747228381374723&s=8780c2b194efb8a200fce57a03d7b48f);">	Doesn't work </div>

But as you can see, accessing the URL directly works fine.

Looking at the JS output and HTML, it appears Svelte is modifying the URL replacing &rect with .

The issue also does not affect all image URLs, only some that namely include the rect parameter. This is reflected in the REPL.

Reproduction

https://svelte.dev/repl/1bb1354c1f44431a95e000d61dc188da?version=3.53.1

Logs

403 forbidden due to the fact that the URL was modified

System Info

System: OS: macOS 13.0.1 CPU: (10) arm64 Apple M1 Max Memory: 1.67 GB / 64.00 GB Shell: 5.8.1 - /bin/zsh Binaries: Node: 16.18.0 - ~/.nvm/versions/node/v16.18.0/bin/node Yarn: 1.22.19 - ~/.nvm/versions/node/v16.18.0/bin/yarn npm: 8.19.2 - ~/.nvm/versions/node/v16.18.0/bin/npm Browsers: Safari: 16.1 npmPackages: svelte: ^3.52.0 => 3.52.0 
 ### Severity annoyance 

Metadata

Metadata

Assignees

No one assigned

    Labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions