vite 6 breaks ability to using special chars in html tags attrs #18811
Comments
brokenmass
changed the title
|
Hello @brokenmass. Please provide a minimal reproduction using a GitHub repository or StackBlitz. Issues marked with |
|
The use case seems legitimate, but it would be nice to have a reproduction. I'm not sure what you mean by the last one about "URLS that contains multiple query strings". |
|
@hi-ogawa I'm also encountering this problem. Here's an excerpt of the plugin we're using: const entrypointPlugin: Plugin = {
name: 'entrypoint-plugin',
apply: 'build',
enforce: 'pre',
config(config): UserConfig {
return {
experimental: {
renderBuiltUrl: (filename, { hostType }) => {
if (hostType === 'html') {
return `<%= cdn.baseUrl %>/${filename}`;
}
return undefined;
},
},
};
},
};Vite 5: <script type="module" crossorigin src="<%= cdn.baseUrl %>/assets/index-yAKNFxux.js"></script>Vite 6: <script type="module" crossorigin src="<%= cdn.baseUrl %>/assets/index-yAKNFxux.js"></script> |
Link : https://stackblitz.com/edit/vitejs-vite-taxulw
import { defineConfig } from 'vite';
export default defineConfig({
html: {
cspNonce: '<%= cspNonce %>',
},
experimental: {
renderBuiltUrl: (filename, { hostType }) => {
if (hostType === 'html') {
return `<%= cdn.baseUrl %>/${filename}`;
}
return undefined;
},
},
plugins: [
{
name: 'inject-tag',
enforce: 'post',
transformIndexHtml: () => {
return [
{
tag: 'image',
injectTo: 'body',
attrs: {
src: 'https://placehold.co/600x400?text=Hello+World&font=Oswald',
},
},
];
},
},
],
});run the command with vite 5 <!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Vite App</title>
<meta property="csp-nonce" nonce="<%= cspNonce %>">
<script type="module" crossorigin src="<%= cdn.baseUrl %>/assets/index-MQ_MSdzi.js" nonce="<%= cspNonce %>"></script>
<link rel="stylesheet" crossorigin href="<%= cdn.baseUrl %>/assets/index-DRNMkqs8.css" nonce="<%= cspNonce %>">
</head>
<body>
<div id="app"></div>
<image src="https://placehold.co/600x400?text=Hello+World&font=Oswald"></image>
</body>
</html>with vite 6 <!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Vite App</title>
<meta property="csp-nonce" nonce="<%= cspNonce %>">
<script type="module" crossorigin src="<%= cdn.baseUrl %>/assets/index-MQ_MSdzi.js" nonce="<%= cspNonce %>"></script>
<link rel="stylesheet" crossorigin href="<%= cdn.baseUrl %>/assets/index-DRNMkqs8.css" nonce="<%= cspNonce %>">
</head>
<body>
<div id="app"></div>
<image src="https://placehold.co/600x400?text=Hello+World&font=Oswald"></image>
</body>
</html>notice how in the second output the special characters the Seems like this should be quite a relevant issue, no ? |
|
For me, this feels more of an intentional breaking change (that we didn't intend to be very breaking but should've mentioned in the migration guide anyways) than a bug. Vite couldn't tell that you're specifying a string as a placeholder that shouldn't be escaped. And escaping would've been the safer default. I think it should be possible to migrate / adapt by using URL-safe characters instead? Or is using the specific |
Yes i get your point, but HTML-Escaping attributes in a build tools does not seem the standard behaviour, and is definitely an unexpected one.
Sure i think it's possible to use custom delimiter or move to a different template engine, like pug. but would avoid it if possible. As a solution, if you do not want to revert the pr, you could allow an option to opt out of this defensive behaviour |
|
While we escape |
|
Maybe we should consider letting {
rawUrl: `<%= cdn.baseUrl %>/${filename}`,
} |
Yes, just html-escaping the double quotes should be enough. Why also the & ? |
Describe the bug
when using ejs tags (like
html: {cspNonce: '<%= nonce _%>'},orexperimental: { renderBuiltUrl(filename) {return<%= somePath %>/${filename};}})) , or URLS that contains multiple query strings parametershttp:host.com/url?query=123&limit=100, in any html tag attribute, the", ', &, <, and >. are escaped and so the output html is no longer correct.(the typical use case for the ejs approach is to have express render the built html page and populate those template variables at runtime).
The bug is not present in vite 5 and was introduced by #18067 , to fix issue #18040.
The issue seems to me to have no actual foundation (cause if some malicious function is able to inject a tag, escaping attrs is pretty much useless as code can be injected in much easier ways anyway) and the fix mangle every attrs that use the above special character.
Reverting the PR resolves the problem.
Reproduction
n/a
Steps to reproduce
No response
System Info
Used Package Manager
npm
Logs
No response
Validations
The text was updated successfully, but these errors were encountered: