michael/astro
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Escape closing script tag when using define:vars (#7044)

Browse source
This commit is contained in:
Steffan 2023-05-15 00:35:54 -06:00 committed by GitHub
parent c6b0a6982a
commit 914c439bcc
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
4 changed files with 15 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
.changeset/fresh-baboons-switch.md Normal file
View file

@ -0,0 +1,5 @@
---
'astro': patch
---
Escape closing script tag with `define:vars`

2
packages/astro/src/runtime/server/render/util.ts
View file

@ -43,7 +43,7 @@ export function defineScriptVars(vars: Record<any, any>) {
for (const [key, value] of Object.entries(vars)) {
// Use const instead of let as let global unsupported with Safari
// https://stackoverflow.com/questions/29194024/cant-use-let-keyword-in-safari-javascript
output += `const ${toIdent(key)} = ${JSON.stringify(value)};\n`;
output += `const ${toIdent(key)} = ${JSON.stringify(value).replace(/<\/script>/g, "\\x3C/script>")};\n`;
}
return markHTMLString(output);
}

7
packages/astro/test/astro-directives.test.js
View file

@ -14,7 +14,7 @@ describe('Directives', async () => {
const html = await fixture.readFile('/define-vars/index.html');
const $ = cheerio.load(html);
expect($('script')).to.have.lengthOf(3);
expect($('script')).to.have.lengthOf(4);
let i = 0;
for (const script of $('script').toArray()) {
@ -24,9 +24,12 @@ describe('Directives', async () => {
if (i < 2) {
// Inline defined variables
expect($(script).toString()).to.include('const foo = "bar"');
} else {
} else if (i < 3) {
// Convert invalid keys to valid identifiers
expect($(script).toString()).to.include('const dashCase = "bar"');
} else {
// Closing script tags in strings are escaped
expect($(script).toString()).to.include('const bar = "<script>bar\\x3C/script>"');
}
i++;
}

4
packages/astro/test/fixtures/astro-directives/src/pages/define-vars.astro vendored
View file

@ -3,6 +3,7 @@ import Title from "../components/Title.astro"
let foo = 'bar'
let bg = 'white'
let fg = 'black'
let bar = '<script>bar</script>'
---
<html>
@ -28,6 +29,9 @@ let fg = 'black'
<script id="inline-3" define:vars={{ 'dash-case': foo }}>
console.log(foo);
</script>
<script id="inline-4" define:vars={{ bar }}>
console.log(bar);
</script>
<Title />
</body>