dont escape prop and attribute values #9

srghma · 2020-06-16T11:05:19Z

No description provided.

srghma · 2025-04-18T09:39:41Z

@thomashoneyman can I be added to org?

flip111 · 2025-04-18T10:58:30Z

Add srghma to org please, he makes good code 👍

garyb · 2025-04-18T12:20:17Z

It might not be escaping correctly just now but they definitely need to be escaped too, otherwise the result will be syntactically invalid when there's a " in the value, for example.

srghma · 2025-04-19T04:07:40Z

deku is using jsdom innerHTML to algo

https://github.com/mikesol/purescript-deku/blob/4d18f6ccebb4a59cdd2a6d2d9e2466349bf8df20/deku-ssr/src/Deku/SSR.purs#L211

https://github.com/mikesol/deku-documentation/blob/63adc7ff7d378fbd4cd264d49a40eaa720f7e25e/renderer/%2BonRenderHtml.js#L22

elm is using

escapeHtml : String -> String
escapeHtml rawText =
    {- https://github.com/elm/virtual-dom/blob/5a5bcf48720bc7d53461b3cd42a9f19f119c5503/src/Elm/Kernel/VirtualDom.server.js#L8-L26 -}
    rawText
        |> String.replace "&" "&amp;"
        |> String.replace "<" "&lt;"
        |> String.replace ">" "&gt;"
        |> String.replace "\"" "&quot;"
        |> String.replace "'" "&#039;"

so, probably suffers from same issue too

https://github.com/dillonkearns/elm-pages/blob/451c2c03903c34422f165a847d38909b0717096d/src/HtmlPrinter.elm#L14

https://github.com/dillonkearns/elm-pages/blob/451c2c03903c34422f165a847d38909b0717096d/src/Test/Html/Internal/ElmHtml/ToString.elm#L130C57-L130C67

srghma · 2025-04-19T04:10:11Z

@garyb
Proposal 1:

escapeRegex ∷ Regex
escapeRegex = unsafeRegex "[\\\"\\\'/&<>]" global

escapeChar ∷ String → String
escapeChar = case _ of
  "/"  → "&#x2F;"
  ch   → escapeCharExceptSlash ch

escape ∷ String → String
escape = replace' escapeRegex (const <<< escapeChar)
----------
escapeRegexExceptSlash ∷ Regex
escapeRegexExceptSlash = unsafeRegex "[\\\"\\\'&<>]" global

escapeCharExceptSlash ∷ String → String
escapeCharExceptSlash = case _ of
  "\"" → "&quot;"
  "'"  → "&#39;"
  "&"  → "&amp;"
  "<"  → "&lt;"
  ">"  → "&gt;"
  ch   → ch

escapeExceptSlash ∷ String → String
escapeExceptSlash = replace' escapeRegexExceptSlash (const <<< escapeCharExceptSlash)
----------

IF node == "script" && prop = "type" THEN escapeAllExceptSlash value ELSE escapeHTML value

Proposal 2: always use escapeExceptSlash

…src="chunks/defaultVendors~main-063769ad5d827b791041.js"></script>` but should `<script async="" type="application/javascript" src="chunks/defaultVendors~main-063769ad5d827b791041.js"></script>`

…on>` -> dont render prop at all if it is a boolean and is false (this commit matches purescript-halogen/purescript-halogen-vdom@cfd471e)

…purescript-halogen/purescript-halogen-vdom#41)

…1 from purescript-halogen#13)

srghma · 2025-04-19T05:57:17Z

TODO: jsdom uses:

test - https://github.com/jsdom/w3c-xmlserializer/blob/83115f8ecce8ed77a2a907c74407b2c671751463/test/test.js#L55-L76

attr value - https://github.com/jsdom/w3c-xmlserializer/blob/83115f8ecce8ed77a2a907c74407b2c671751463/lib/attributes.js#L24-L37

data - https://github.com/jsdom/w3c-xmlserializer/blob/83115f8ecce8ed77a2a907c74407b2c671751463/lib/serialize.js#L150-L159

srghma · 2025-04-19T06:17:10Z

      config =
        [ { char: "\"", charName: "double quotes", escapedChar: "&quot;", elementName: true, attrName: true, attrValue: true, propName: true, propValue: true }
        , { char: "'", charName: "single quotes", escapedChar: "&#39;", elementName: true, attrName: true, attrValue: true, propName: true, propValue: true }
        , { char: "/", charName: "slash", escapedChar: "&#x2F;", elementName: true, attrName: true, attrValue: true, propName: true, propValue: true }
        , { char: "\\", charName: "backslash", escapedChar: "", elementName: true, attrName: true, attrValue: true, propName: true, propValue: true }
        , { char: "&", charName: "ampersand", escapedChar: "&amp;", elementName: true, attrName: true, attrValue: true, propName: true, propValue: true }
        , { char: "<", charName: "less than", escapedChar: "&lt;", elementName: true, attrName: true, attrValue: true, propName: true, propValue: true }
        , { char: ">", charName: "more than", escapedChar: "&gt;", elementName: true, attrName: true, attrValue: true, propName: true, propValue: true }
        , { char: "\t", charName: "tab", escapedChar: "&#x9;", elementName: true, attrName: true, attrValue: true, propName: true, propValue: true }
        , { char: "\n", charName: "newline", escapedChar: "&#xA;", elementName: true, attrName: true, attrValue: true, propName: true, propValue: true }
        , { char: "\r", charName: "r", escapedChar: "&#xD;", elementName: true, attrName: true, attrValue: true, propName: true, propValue: true }
        , { char: "", charName: "", escapedChar: "&#xD;", elementName: true, attrName: true, attrValue: true, propName: true, propValue: true }
        ]

      config.forEach(x => { try { document.createElement(div${x.char}) } catch (e) { console.error(e)} }) // all are invalid names

VM291:15 InvalidCharacterError: Failed to execute 'createElement' on 'Document': The tag name provided ('div"') is not a valid name.
    at <anonymous>:15:44
    at Array.forEach (<anonymous>)
    at <anonymous>:15:14
overrideMethod @ hook.js:608
(anonymous) @ VM291:15
(anonymous) @ VM291:15Understand this errorAI
VM291:15 InvalidCharacterError: Failed to execute 'createElement' on 'Document': The tag name provided ('div'') is not a valid name.
    at <anonymous>:15:44
    at Array.forEach (<anonymous>)
    at <anonymous>:15:14
overrideMethod @ hook.js:608
(anonymous) @ VM291:15
(anonymous) @ VM291:15Understand this errorAI
VM291:15 InvalidCharacterError: Failed to execute 'createElement' on 'Document': The tag name provided ('div/') is not a valid name.
    at <anonymous>:15:44
    at Array.forEach (<anonymous>)
    at <anonymous>:15:14
overrideMethod @ hook.js:608
(anonymous) @ VM291:15
(anonymous) @ VM291:15Understand this errorAI
VM291:15 InvalidCharacterError: Failed to execute 'createElement' on 'Document': The tag name provided ('div\') is not a valid name.
    at <anonymous>:15:44
    at Array.forEach (<anonymous>)
    at <anonymous>:15:14
overrideMethod @ hook.js:608
(anonymous) @ VM291:15
(anonymous) @ VM291:15Understand this errorAI
VM291:15 InvalidCharacterError: Failed to execute 'createElement' on 'Document': The tag name provided ('div&') is not a valid name.
    at <anonymous>:15:44
    at Array.forEach (<anonymous>)
    at <anonymous>:15:14
overrideMethod @ hook.js:608
(anonymous) @ VM291:15
(anonymous) @ VM291:15Understand this errorAI
VM291:15 InvalidCharacterError: Failed to execute 'createElement' on 'Document': The tag name provided ('div<') is not a valid name.
    at <anonymous>:15:44
    at Array.forEach (<anonymous>)
    at <anonymous>:15:14
overrideMethod @ hook.js:608
(anonymous) @ VM291:15
(anonymous) @ VM291:15Understand this errorAI
VM291:15 InvalidCharacterError: Failed to execute 'createElement' on 'Document': The tag name provided ('div>') is not a valid name.
    at <anonymous>:15:44
    at Array.forEach (<anonymous>)
    at <anonymous>:15:14
overrideMethod @ hook.js:608
(anonymous) @ VM291:15
(anonymous) @ VM291:15Understand this errorAI
VM291:15 InvalidCharacterError: Failed to execute 'createElement' on 'Document': The tag name provided ('div	') is not a valid name.
    at <anonymous>:15:44
    at Array.forEach (<anonymous>)
    at <anonymous>:15:14
overrideMethod @ hook.js:608
(anonymous) @ VM291:15
(anonymous) @ VM291:15Understand this errorAI
VM291:15 InvalidCharacterError: Failed to execute 'createElement' on 'Document': The tag name provided ('div
') is not a valid name.
    at <anonymous>:15:44
    at Array.forEach (<anonymous>)
    at <anonymous>:15:14
overrideMethod @ hook.js:608
(anonymous) @ VM291:15
(anonymous) @ VM291:15Understand this errorAI
VM291:15 InvalidCharacterError: Failed to execute 'createElement' on 'Document': The tag name provided ('div
') is not a valid name.
    at <anonymous>:15:44
    at Array.forEach (<anonymous>)
    at <anonymous>:15:14
overrideMethod @ hook.js:608
(anonymous) @ VM291:15
(anonymous) @ VM291:15Understand this errorAI
VM291:15 InvalidCharacterError: Failed to execute 'createElement' on 'Document': The tag name provided ('div') is not a valid name.
    at <anonymous>:15:44
    at Array.forEach (<anonymous>)
    at <anonymous>:15:14

so, we need to add https://github.com/jsdom/xml-name-validator/blob/836f307eec81279d2b1655587892e38a1effe039/lib/xml-name-validator.js#L4 to

purescript-halogen-vdom-string-renderer/src/Halogen/VDom/StringRenderer.purs

Line 50 in c735467

"<" <> name <> (if S.null as' then "" else " ") <> as' <>

P.S.

✅ `xnv.name(potentialName)`

This checks if the string is a valid XML Name, as per the Name production in XML 1.0:

Name ::= NameStartChar (NameChar)*

Cannot contain :
Used for validating:
- localName (e.g. <foo>, foo="bar")
- Non-namespaced names
Example valid names:
- foo
- _myName
- número
Example invalid:
- 1foo
- foo bar
- foo:bar ← : is not allowed here!

✅ `xnv.qname(potentialQname)`

This checks if the string is a valid [Qualified Name (QName)](https://www.w3.org/TR/xml-names/#NT-QName) — which can include a colon:

QName ::= PrefixedName | UnprefixedName
PrefixedName ::= Prefix ':' LocalPart

Used where namespace prefixes are allowed
Example valid:
- x:tag
- svg:circle
- foo_bar:baz99
- Also just name is valid (unprefixed QName)
Example invalid:
- :foo (prefix missing)
- foo: (local name missing)
- foo:bar:baz (too many colons)

🔧 Usage in `w3c-xmlserializer`

if (
  requireWellFormed &&
  (node.localName.includes(":") || !xnv.name(node.localName))
)

Rejects colons in localName — that's correct, because colons belong in qualifiedName, not localName.

…attr name is invlaid - we ignore invalid chars) (NOTE: we could just use he npm package to escape all, no ignoring/cleaning)

srghma · 2025-04-19T08:00:32Z

I have added more functionality, but escapeHtmlEntity function doesnt escape everything possible (we could use he package to escape all),

and instead of cleanAndEscapeTextNode - we could use he package too

srghma mentioned this pull request Jul 24, 2020

use propertyToAttribute purescript-halogen/purescript-halogen-vdom#41

Closed

srghma added 5 commits April 19, 2025 11:31

fix: it renders `<script async="" type="application/javascript" …

1bf0190

…src="chunks/defaultVendors~main-063769ad5d827b791041.js"></script>` but should `<script async="" type="application/javascript" src="chunks/defaultVendors~main-063769ad5d827b791041.js"></script>`

fix: error expected false, but got true on `<button disabled></butt…

44823b8

…on>` -> dont render prop at all if it is a boolean and is false (this commit matches purescript-halogen/purescript-halogen-vdom@cfd471e)

feat: handle additional props in propNameToAttrName -> add (related to …

c0eb92a

…purescript-halogen/purescript-halogen-vdom#41)

fix: TypeError: s.replace is not a function

d375930

refactor: for numbers -> use toString instead of show (idea of flip11…

803bb53

…1 from purescript-halogen#13)

srghma added 2 commits April 19, 2025 14:54

feat: update spago version

690f32b

feat: be more like jsdom (when jsdom throws error if element name or …

92edec4

…attr name is invlaid - we ignore invalid chars) (NOTE: we could just use he npm package to escape all, no ignoring/cleaning)

srghma force-pushed the master branch from 8eeee70 to 92edec4 Compare April 19, 2025 07:56

feat: ci -> purs-tidy test

2fffc2b

fix: ci -> purs-tidy version was removed?

c9ee9a3

srghma force-pushed the master branch from 3f35661 to c9ee9a3 Compare April 19, 2025 08:29

fix: ci -> deps

91bddf5

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

dont escape prop and attribute values #9

dont escape prop and attribute values #9

srghma commented Jun 16, 2020

srghma commented Apr 18, 2025

flip111 commented Apr 18, 2025

garyb commented Apr 18, 2025

srghma commented Apr 19, 2025

srghma commented Apr 19, 2025 •

edited

Loading

srghma commented Apr 19, 2025 •

edited

Loading

srghma commented Apr 19, 2025

srghma commented Apr 19, 2025

dont escape prop and attribute values #9

Are you sure you want to change the base?

dont escape prop and attribute values #9

Conversation

srghma commented Jun 16, 2020

srghma commented Apr 18, 2025

flip111 commented Apr 18, 2025

garyb commented Apr 18, 2025

srghma commented Apr 19, 2025

srghma commented Apr 19, 2025 • edited Loading

srghma commented Apr 19, 2025 • edited Loading

srghma commented Apr 19, 2025

so, we need to add https://github.com/jsdom/xml-name-validator/blob/836f307eec81279d2b1655587892e38a1effe039/lib/xml-name-validator.js#L4 to purescript-halogen-vdom-string-renderer/src/Halogen/VDom/StringRenderer.purs Line 50 in c735467 "<" <> name <> (if S.null as' then "" else " ") <> as' <>

✅ xnv.name(potentialName)

✅ xnv.qname(potentialQname)

🔧 Usage in w3c-xmlserializer

srghma commented Apr 19, 2025

srghma commented Apr 19, 2025 •

edited

Loading

srghma commented Apr 19, 2025 •

edited

Loading

so, we need to add https://github.com/jsdom/xml-name-validator/blob/836f307eec81279d2b1655587892e38a1effe039/lib/xml-name-validator.js#L4 to

purescript-halogen-vdom-string-renderer/src/Halogen/VDom/StringRenderer.purs

Line 50 in c735467

"<" <> name <> (if S.null as' then "" else " ") <> as' <>

✅ `xnv.name(potentialName)`

✅ `xnv.qname(potentialQname)`

🔧 Usage in `w3c-xmlserializer`