prevent URLs in attributes being escaped #9820

alexnguyennz · 2024-01-25T05:43:49Z

Changes

Adds check for server rendered URLs attributes with any & so they're not escaped. For edge cases where multiple params are needed e.g. for an API that generates OG images.

Before:
<meta name="og:image" content="https://example.com/api/og?title=hello&description=somedescription">

After:
<meta name="og:image" content="https://example.com/api/og?title=hello&description=somedescription">

I think this change is safe - let me know if there's another way this should be done.

Testing

pnpm run test

And manually with minimal demo in dev and build with:

<head>
  <meta
    name="og:image"
    content={'https://example.com/api/og?title=hello&description=somedescription'}
  />
</head>

Docs

N/A

changeset-bot · 2024-01-25T05:43:53Z

🦋 Changeset detected

Latest commit: 3cfc4c5

The changes in this PR will be included in the next version bump.

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

.changeset/quick-islands-ring.md

florian-lefebvre · 2024-01-25T07:33:48Z

packages/astro/src/runtime/server/render/util.ts

@@ -104,6 +104,11 @@ Make sure to use the static attribute syntax (\`${key}={value}\`) instead of the
 		return markHTMLString(` class="${toAttributeString(value, shouldEscape)}"`);
 	}

+	// prevent URLs in `content` attributes being escaped for multiple params to work
+	if (key === 'content' && typeof value === 'string' && URL.canParse(value)) {


Not familiar with this part of the codebase, but can you for hrefs attributes as well?

bluwy · 2024-01-25T09:20:18Z

Do we need to escape the & in the first place? It should be fine to be used in attribute values 🤔 Seems like it's added since #1789. Perhaps @natemoo-re has some context about it.

natemoo-re · 2024-01-26T16:43:13Z

Do we need to escape the & in the first place? It should be fine to be used in attribute values 🤔 Seems like it's added since #1789. Perhaps @natemoo-re has some context about it.

Good question! Escaping & is best practice. Seems like Preact and Svelte escape it by default.

I'm not sure that we should hard-code the content attribute... Maybe we could check for the existence of & and then check for a URL? I'm not sure of a simple way we can determine if the & should be escaped or if it's potentially needed for a URL.

alexnguyennz · 2024-01-26T17:56:56Z

I'm not sure that we should hard-code the content attribute... Maybe we could check for the existence of & and then check for a URL? I'm not sure of a simple way we can determine if the & should be escaped or if it's potentially needed for a URL.

Not sure either - it's now just a general URL check (with any &) for all attributes if that works.

bluwy · 2024-01-29T14:21:23Z

Good question! Escaping & is best practice. Seems like Preact and Svelte escape it by default.

Thanks! It seems like they encode & as & and " as ", while we encode as & and " respectively. Perhaps we need to change how we encode this as well? Technically both should be equivalent, but maybe browsers are able to parse & better because the # is not tripping it up (?).

ematipico · 2024-01-30T11:40:37Z

I also think that using HTML entities is better.

ematipico · 2024-02-13T15:34:22Z

This PR is sitting for a while without too much activity. cc @alexnguyennz and @natemoo-re

natemoo-re · 2024-02-13T17:00:13Z

Thanks for the ping @ematipico! I'm okay with this solution if everyone else is.

We can follow-up with switching to & and " in another PR.

.changeset/quick-islands-ring.md

natemoo-re

Just blocking until we resolve the URL.canParse discrepancy.

Nothing for you to do @alexnguyennz, the maintainers just need to decide when we're updating our Node version.

natemoo-re · 2024-02-13T17:04:13Z

packages/astro/src/runtime/server/render/util.ts

@@ -104,6 +104,11 @@ Make sure to use the static attribute syntax (\`${key}={value}\`) instead of the
 		return markHTMLString(` class="${toAttributeString(value, shouldEscape)}"`);
 	}

+	// Prevents URLs in attributes from being escaped in static builds
+	if (typeof value === 'string' && value.includes('&') && URL.canParse(value)) {


I noticed that URL.canParse was added in Node v18.17.0, but our minimum required version is still v18.14.1.

We should either implement a fallback for URL.canParse (try/catch) or wait on merging this until we bump our engines to v.18.17.0 (possibly in the next minor cc @Princesseuh)

URL.canParse uses the same internal method as the URL constructor, so a try-catch should be sufficient to unblock.

Co-authored-by: Florian Lefebvre <contact@florian-lefebvre.dev>

lilnasy

Looks great to me! It must have taken effort to find the relevant code path, thanks for the clean fix!

packages/astro/src/runtime/server/render/util.ts

Using patch-package to apply this PR until it is merged & released withastro/astro#9820

natemoo-re

Thanks for getting this over the line, @lilnasy!

github-actions bot added the pkg: astro Related to the core `astro` package (scope) label Jan 25, 2024

alexnguyennz mentioned this pull request Jan 25, 2024

& encoding with server rendered strings affects head URLs with multiple params #9695

Closed

1 task

florian-lefebvre linked an issue Jan 25, 2024 that may be closed by this pull request

& encoding with server rendered strings affects head URLs with multiple params #9695

Closed

1 task

florian-lefebvre reviewed Jan 25, 2024

View reviewed changes

alexnguyennz changed the title ~~prevent URLs in content attributes being escaped~~ prevent URLs in attributes being escaped Jan 26, 2024

natemoo-re approved these changes Feb 13, 2024

View reviewed changes

.changeset/quick-islands-ring.md Outdated Show resolved Hide resolved

natemoo-re requested changes Feb 13, 2024

View reviewed changes

alexnguyennz and others added 7 commits March 8, 2024 23:33

prevent URLs in content attributes being escapedk

9c9bf4e

removed content check

917addd

Update .changeset/quick-islands-ring.md

ff3286c

Co-authored-by: Florian Lefebvre <contact@florian-lefebvre.dev>

add check for '&' in string

da6c8aa

Update .changeset/quick-islands-ring.md

2746a5c

manual canParse

bf4db62

add test

24bbb62

lilnasy approved these changes Mar 8, 2024

View reviewed changes

Fryuni reviewed Mar 9, 2024

View reviewed changes

packages/astro/src/runtime/server/render/util.ts Show resolved Hide resolved

third774 added a commit to third774/kevinkipp.com that referenced this pull request Mar 11, 2024

Switch over to using og:image generating service

a33c64b

Using patch-package to apply this PR until it is merged & released withastro/astro#9820

third774 mentioned this pull request Mar 11, 2024

Switch over to using og:image generating service third774/kevinkipp.com#12

Merged

natemoo-re approved these changes Mar 13, 2024

View reviewed changes

Merge branch 'main' into &-encoding-head-urls-multiple-params

3cfc4c5

lilnasy merged commit 8edc42a into withastro:main Mar 13, 2024
13 checks passed

astrobot-houston mentioned this pull request Mar 13, 2024

[ci] release #10416

Merged

sync-by-unito bot mentioned this pull request Mar 19, 2024

Bump astro from 4.0.8 to 4.5.5 GeauxWeisbeck4/homeless-hacker-blog#12

Closed

delucis mentioned this pull request Apr 9, 2024

Quotes in YAML codeblocks can escape and leak onto the page #10726

Closed

1 task

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

prevent URLs in attributes being escaped #9820

prevent URLs in attributes being escaped #9820

alexnguyennz commented Jan 25, 2024 •

edited

Loading

changeset-bot bot commented Jan 25, 2024 •

edited

Loading

florian-lefebvre Jan 25, 2024

bluwy commented Jan 25, 2024

natemoo-re commented Jan 26, 2024

alexnguyennz commented Jan 26, 2024

bluwy commented Jan 29, 2024

ematipico commented Jan 30, 2024

ematipico commented Feb 13, 2024

natemoo-re commented Feb 13, 2024

natemoo-re left a comment

natemoo-re Feb 13, 2024

lilnasy Mar 8, 2024

lilnasy left a comment

natemoo-re left a comment

prevent URLs in attributes being escaped #9820

prevent URLs in attributes being escaped #9820

Conversation

alexnguyennz commented Jan 25, 2024 • edited Loading

Changes

Testing

Docs

changeset-bot bot commented Jan 25, 2024 • edited Loading

🦋 Changeset detected

florian-lefebvre Jan 25, 2024

Choose a reason for hiding this comment

bluwy commented Jan 25, 2024

natemoo-re commented Jan 26, 2024

alexnguyennz commented Jan 26, 2024

bluwy commented Jan 29, 2024

ematipico commented Jan 30, 2024

ematipico commented Feb 13, 2024

natemoo-re commented Feb 13, 2024

natemoo-re left a comment

Choose a reason for hiding this comment

natemoo-re Feb 13, 2024

Choose a reason for hiding this comment

lilnasy Mar 8, 2024

Choose a reason for hiding this comment

lilnasy left a comment

Choose a reason for hiding this comment

natemoo-re left a comment

Choose a reason for hiding this comment

alexnguyennz commented Jan 25, 2024 •

edited

Loading

changeset-bot bot commented Jan 25, 2024 •

edited

Loading