From ccc05d54014e24c492ca5fddd4862f318aac8172 Mon Sep 17 00:00:00 2001 From: Steven Benner <141884+stevenbenner@users.noreply.github.com> Date: Tue, 23 Jan 2024 15:16:56 -0800 Subject: [PATCH] Fix build failure when image file name includes special characters (#9781) The latest version of `vite-plugin-markdown` uses a regular expression that includes the file path via string concatenation. However the file path is not escaped for use in a regular expressions. So if a markdown document includes a reference to an image file name which includes certain special characters it will cause the build to fail. This patch escapes regex special characters in the file path string being injected into the regular expression. While I found that not all special characters will cause this problem, it seems safer to simply escape all regex specials. I also added test to verify this. Related to: Commit 165cfc154be477337037185c32b308616d1ed6fa Co-authored-by: Erika <3019731+Princesseuh@users.noreply.github.com> --- .changeset/weak-plums-sip.md | 5 +++++ packages/astro/src/vite-plugin-markdown/images.ts | 2 +- packages/astro/test/core-image.test.js | 9 +++++++++ .../test/fixtures/core-image/src/assets/c++.png | Bin 0 -> 677 bytes .../fixtures/core-image/src/pages/specialChars.md | 3 +++ 5 files changed, 18 insertions(+), 1 deletion(-) create mode 100644 .changeset/weak-plums-sip.md create mode 100644 packages/astro/test/fixtures/core-image/src/assets/c++.png create mode 100644 packages/astro/test/fixtures/core-image/src/pages/specialChars.md diff --git a/.changeset/weak-plums-sip.md b/.changeset/weak-plums-sip.md new file mode 100644 index 000000000000..9f206ca97f51 --- /dev/null +++ b/.changeset/weak-plums-sip.md @@ -0,0 +1,5 @@ +--- +"astro": patch +--- + +Fix build failure when image file name includes special characters diff --git a/packages/astro/src/vite-plugin-markdown/images.ts b/packages/astro/src/vite-plugin-markdown/images.ts index 1123c28784aa..66ec141067e9 100644 --- a/packages/astro/src/vite-plugin-markdown/images.ts +++ b/packages/astro/src/vite-plugin-markdown/images.ts @@ -13,7 +13,7 @@ export function getMarkdownCodeForImages(imagePaths: MarkdownImagePath[], html: .map((entry) => { const rawUrl = JSON.stringify(entry.raw); return `{ - const regex = new RegExp('__ASTRO_IMAGE_="([^"]*' + ${rawUrl} + '[^"]*)"', 'g'); + const regex = new RegExp('__ASTRO_IMAGE_="([^"]*' + ${rawUrl.replace(/[.*+?^${}()|[\]\\]/g, '\\\\$&')} + '[^"]*)"', 'g'); let match; let occurrenceCounter = 0; while ((match = regex.exec(html)) !== null) { diff --git a/packages/astro/test/core-image.test.js b/packages/astro/test/core-image.test.js index 67a76ba8803c..fbaedd9a1e16 100644 --- a/packages/astro/test/core-image.test.js +++ b/packages/astro/test/core-image.test.js @@ -427,6 +427,15 @@ describe('astro:image', () => { expect($img.attr('src').startsWith('/_image')).to.equal(true); }); + it('Supports special characters in file name', async () => { + let res = await fixture.fetch('/specialChars'); + let html = await res.text(); + $ = cheerio.load(html); + + let $img = $('img'); + expect($img.attr('src').startsWith('/_image')).to.equal(true); + }); + it('properly handles remote images', async () => { let res = await fixture.fetch('/httpImage'); let html = await res.text(); diff --git a/packages/astro/test/fixtures/core-image/src/assets/c++.png b/packages/astro/test/fixtures/core-image/src/assets/c++.png new file mode 100644 index 0000000000000000000000000000000000000000..25c97b7cb5f9d65220d6fd5e2ad9c9ed589ad7d7 GIT binary patch literal 677 zcmeAS@N?(olHy`uVBq!ia0vp^DL|~x!3-po7SBHkq^1Sj(=+^NqPxTimA>)rqVpU;{g+s~TAf~>I*G^XaCzCcibhG5Et8~85~f5**am3)JoaSe6raNPTB?0hL_YL% z{%9>+-^bt6;&n2nE}Vo%^TtsyS7qDM61`pXpRn zX|&=zTf8vfQESkq)#3Sdn=ZeL5$dXm(O(v-c_(Iu%CreJL2p}*YtK~K+1S7LcGax& zK93h!1id&eqM~>5f`E|v`gKmrbq_wEwYG zsim3R2BR;x`zjgEJn?f*T%z}3^Nj1FewqrB(m{XYzj;`dmRCw@H! Pj8z6tS3j3^P6