Skip to content

HTML contained in strings in textareas is half treated as actual HTML by the base URL validator  #5664

@hedgehog125

Description

@hedgehog125

Describe the bug

Hopefully this isn't too confusing as the issue is a bit weird. The issue is that the HTML code for anchor tags can't be written in textarea elements when using a base URL. This seems to be because the anchor checks that make sure the href starts with the base path are applying to the content of the textarea. This doesn't seem to be an issue with most other elements as you can and have to escape them using HTML escape codes, which are often automatically used. Interestingly, it doesn't matter if the escaped HTML code to display starts with the base path hard coded into it, or resolves to a valid path using JavaScript (it's invalid either way).

The workaround I've found is to either not use a textarea, add a space in the code you want to display to make it an invalid link or to set the content of the textarea a bit later, using an onMount event.

Reproduction

Follow the instructions in the readme file to run the examples and test the different combinations. Also make sure you build each time so the base URL is used. I've included explanations in the index page, along with the results of my own testing.

Repository: https://github.com/hedgehog125/SvelteKit-string-html-bug

Logs

== I originally tested this with html-minify configured, but removed it to simplify things a bit more.
However, marginally different errors were produced which is somewhat noteworthy.
This is the error produced when one of the failing lines is uncommented: ==

[vite-plugin-svelte-kit] 404 /{linkPage("foo")} does not begin with `base`, which is configured in `paths.base` and can be imported from `$app/paths` (linked from /build)
error during build:
Error: 404 /{linkPage("foo")} does not begin with `base`, which is configured in `paths.base` and can be imported from `$app/paths` (linked from /build)
    at file:///Users/nico/Documents/JS/SvelteKit-string-html-bug/static/node_modules/@sveltejs/kit/dist/vite.js:1144:11
    at visit (file:///Users/nico/Documents/JS/SvelteKit-string-html-bug/static/node_modules/@sveltejs/kit/dist/vite.js:1290:4)
    at Object.fn (file:///Users/nico/Documents/JS/SvelteKit-string-html-bug/static/node_modules/@sveltejs/kit/dist/vite.js:1280:22)
    at dequeue (file:///Users/nico/Documents/JS/SvelteKit-string-html-bug/static/node_modules/@sveltejs/kit/dist/vite.js:800:42)
    at file:///Users/nico/Documents/JS/SvelteKit-string-html-bug/static/node_modules/@sveltejs/kit/dist/vite.js:809:7


== Otherwise a slightly different error appears when using html-minify for some reason: ==

[vite-plugin-svelte-kit] 404 /{linkPage("foo")} does not begin with `base`, which is configured in `paths.base` and can be imported from `$app/paths` (linked from /build)
error during build:
Error: 404 /{linkPage("foo")} does not begin with `base`, which is configured in `paths.base` and can be imported from `$app/paths` (linked from /build)
    at file:///Users/nico/Documents/JS/SvelteKit-string-html-bug/static/node_modules/@sveltejs/kit/dist/vite.js:1144:11
    at visit (file:///Users/nico/Documents/JS/SvelteKit-string-html-bug/static/node_modules/@sveltejs/kit/dist/vite.js:1290:4)
    at Object.fn (file:///Users/nico/Documents/JS/SvelteKit-string-html-bug/static/node_modules/@sveltejs/kit/dist/vite.js:1280:22)
    at dequeue (file:///Users/nico/Documents/JS/SvelteKit-string-html-bug/static/node_modules/@sveltejs/kit/dist/vite.js:800:42)
    at file:///Users/nico/Documents/JS/SvelteKit-string-html-bug/static/node_modules/@sveltejs/kit/dist/vite.js:809:7


== I think there was a different error on a different combination of versions.
But I\'m not sure how I would replicate that again and I don\'t think it would be that useful as it had the same result. ==

System Info

System:
    OS: macOS 11.6
    CPU: (8) x64 Intel(R) Core(TM) i7-7700 CPU @ 3.60GHz
    Memory: 859.57 MB / 16.00 GB
    Shell: 5.8 - /bin/zsh
  Binaries:
    Node: 16.14.2 - /usr/local/bin/node
    Yarn: 1.22.17 - /usr/local/bin/yarn
    npm: 8.14.0 - /usr/local/bin/npm
  Browsers:
    Chrome: 103.0.5060.114
    Edge: 103.0.1264.62
    Firefox: 101.0.1
    Safari: 14.1.2
  npmPackages:
    @sveltejs/adapter-static: next => 1.0.0-next.38 
    @sveltejs/kit: next => 1.0.0-next.386 
    svelte: next => 3.49.0 
    vite: ^3.0.0 => 3.0.2

Severity

not serious, but I can work around it (I picked that option but it put serious here originally for some reason)

Additional Information

No response

Metadata

Metadata

Assignees

No one assigned

    Labels

    bugSomething isn't working

    Type

    No type

    Projects

    No projects

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions