sveltejs / svelte

web development for the rest of us
https://svelte.dev
MIT License
80.28k stars 4.27k forks source link

(minor) unquoted slash in attributes throws "attempted to close an element that was not open" #7782

Open mustafa0x opened 2 years ago

mustafa0x commented 2 years ago

Describe the bug

<a href=/>Home</a> is valid HTML5, but fails in Svelte.

Reproduction

<a href=/>go home</a>

Logs

No response

System Info

repl

Severity

annoyance

tanhauhau commented 2 years ago

related: https://mathiasbynens.be/notes/unquoted-attribute-values

eug-L commented 7 months ago

Hi, I would like to attempt this. From what I understand, the following restricts attribute values

const regex_starts_with_invalid_attr_value = /^(\/>|[\s"'=<>`])/;

Fixing OP's issue would be as simple as removing "/" from this regex, however <div class=foo/> will not be self closing as the attribute value becomes "foo/"

I thought of allowing "/" only if the read chunk length is 0, like so:

(chunk_length) => {
    if (quote_mark) return parser.match(quote_mark);
    return chunk_length > 0 ?
        !!parser.match_regex(regex_starts_with_invalid_attr_value)
        :
        !!parser.match_regex(/^[\s"'=<>`]/); // "/" allowed

which approach would be better?

Jaishree2310 commented 5 months ago

@mustafa0x @dummdidumm I want to take this token ID can you please assign this to me?

kala-goyal commented 4 months ago

Hi @dummdidumm! I'm down to implement eug-L's solution for this. Totally understand if, instead of assigning it to me, you'd rather I just fix it and make the PR first, just lemme know which you prefer! I'll start working on it regardless though, I'm excited for Svelte 5 to come together!

dummdidumm commented 4 months ago

Sure, go ahead - just removing the / from the regex sounds find to me.

kala-goyal commented 4 months ago

@dummdidumm Just removing the / causes svelte special elements to fail, because the parser then reads, for instance, "svelte:component this={MyComponent}/> to refer to a component titled "{MyComponent}/", and the validator is then unable to find a closing tag.

I tried changing read_sequence in /packages/svelte/src/compiler/phases/1-parse/state/element.js to pass chunk_length, but am having trouble actually getting the chunk length because end is always "-1". I'm getting the sense that the chunks here are not done being broken into the smallest chunks possible, where start and end would actually populate with the correct values, but I'm not entirely sure where to go from here. Would you happen to have any guidance? I'll keep trying things on my own as well.

mahaaaraja commented 4 months ago

@dummdidumm if this is still unresolved, I would like to work upon this. I am new to open source and I feel I can tackle this.

adlewisCMU commented 1 week ago

Hello. I was wondering if this issue was still truly open. I see two pull requests above this comment looking to fix the issue, one of which is still open. Have either of them solved the issue? I would also like to attempt this if the issue is still on the table. Thank you!