mirror of
https://github.com/withastro/astro.git
synced 2025-02-17 22:44:24 -05:00
Prevent errant HTML from crashing server islands (#11692)
This commit is contained in:
parent
44453146cd
commit
35af73aace
5 changed files with 30 additions and 3 deletions
7
.changeset/hot-dodos-whisper.md
Normal file
7
.changeset/hot-dodos-whisper.md
Normal file
|
@ -0,0 +1,7 @@
|
|||
---
|
||||
'astro': patch
|
||||
---
|
||||
|
||||
Prevent errant HTML from crashing server islands
|
||||
|
||||
When an HTML minifier strips away the server island comment, the script can't correctly know where the end of the fallback content is. This makes it so that it simply doesn't remove any DOM in that scenario. This means the fallback isn't removed, but it also doesn't crash the browser.
|
|
@ -0,0 +1 @@
|
|||
<div id="first"></div>
|
|
@ -1,6 +1,7 @@
|
|||
---
|
||||
import Island from '../components/Island.astro';
|
||||
import Self from '../components/Self.astro';
|
||||
import HTMLError from '../components/HTMLError.astro';
|
||||
---
|
||||
|
||||
<html>
|
||||
|
@ -12,5 +13,16 @@ import Self from '../components/Self.astro';
|
|||
<h3 id="children">children</h3>
|
||||
</Island>
|
||||
<Self server:defer />
|
||||
|
||||
<div id="error-test">
|
||||
<HTMLError server:defer>
|
||||
<script is:inline slot="fallback">
|
||||
// Delete the previous element, the island comment
|
||||
document.currentScript.previousSibling.remove();
|
||||
|
||||
// This simulates a host which has minified the HTML, destroying the comment
|
||||
</script>
|
||||
</HTMLError>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
@ -50,6 +50,12 @@ test.describe('Server islands', () => {
|
|||
|
||||
await expect(el).toHaveCount(2);
|
||||
});
|
||||
|
||||
test('Missing server island start comment doesn\'t cause browser to lock up', async ({ page, astro }) => {
|
||||
await page.goto(astro.resolveUrl('/base/'));
|
||||
let el = page.locator('#first');
|
||||
await expect(el).toHaveCount(1);
|
||||
});
|
||||
});
|
||||
|
||||
test.describe('Development - trailingSlash: ignore', () => {
|
||||
|
|
|
@ -86,9 +86,10 @@ if(response.status === 200 && response.headers.get('content-type') === 'text/htm
|
|||
let html = await response.text();
|
||||
|
||||
// Swap!
|
||||
while(script.previousSibling?.nodeType !== 8 &&
|
||||
script.previousSibling?.data !== 'server-island-start') {
|
||||
script.previousSibling?.remove();
|
||||
while(script.previousSibling &&
|
||||
script.previousSibling.nodeType !== 8 &&
|
||||
script.previousSibling.data !== 'server-island-start') {
|
||||
script.previousSibling.remove();
|
||||
}
|
||||
script.previousSibling?.remove();
|
||||
|
||||
|
|
Loading…
Add table
Reference in a new issue