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 & ? |
|
bump |
Because otherwise the output will be partially escaped. For example,
To generate a valid HTML when a user returned an array from transformIndexHtml: () => {
return [
{
tag: 'div',
injectTo: 'body',
attrs: {
"data-foo": '"foo',
},
},
];
}, |
sure but why should that be vite responsibility, why should it be vite requirement ? Actually this change break the build for everyone already escaping their injected attrs. Remember this is not an externally defined input that can be hijacked, it’s a build instruction. And, I mean, it has been like this for years in vite and in every other tools before vite, like webpack. Escaping just the double quote to avoid escaping the attr by mistake seems the most reasonable approach to me.if the contents already contains & those should not be escaped (cause maybe the user already escaped the value) and leaving it unescaped does not break anything. who’s going to take the final decision if this escaping is going to be reverted or not ? Any ETA ? |
|
@hi-ogawa would be nice to know what's the decision on this, as if the mentioned pr is not going to be reverted we need to find an alternative fix. |
|
Any movement on this? Just to add another use case which is mentioned above. Inserting a Content Security Policy via
If this is the goal, the second example below is more valid than the first id argue Why are we escaping these tags? I agree with @brokenmass here, I think this is Vite is overstepping here Run |
|
@hi-ogawa any update ? |
Uh oh!
There was an error while loading. Please reload this page.
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: