Description
Describe the bug
After a B2C page layout version upgrade, the script tag for unified.min.js is not properly formatted when the page loads. Instead of closing correctly, the script tag appears as follows:
https://sampledomain/static/content/js/stage-2/unified.min.js?v=1728718798338></script></script>
This results in a malformed tag with an extra </script>, causing unexpected behavior.
To Reproduce
Steps to reproduce the behavior:
Run the commands: npm run build followed by npm run server to start the application.
Once the application is up and running, navigate to any page where the unified.min.js script should load.
Open the browser developer tools (right-click on the page and select "Inspect").
In the "Network" tab, check the script loading section, and we will observe a malformed script tag, as shown in the screenshots.
Instead of loading properly, the script contains an extra closing tag (</script>), resulting in the following:
<script src="https://sampledomain/static/content/js/stage-2/unified.min.js?v=1728718798338"></script></script>Expected behavior
The script tag should load and close correctly without extra tags. Expected output:
https://sampledomain/static/content/js/stage-2/unified.min.js?v=1728718798338></script>
Screenshots
- After B2C Page Layout Version Upgrade:
- Working Screenshot (Older Version):
Desktop (please complete the following information):
- Browser [e.g. chrome, safari]
- Version [e.g. 22]
Additional context
We've tried the following approaches to resolve the issue, but the problem persists:
existing ::
1. Webpack Configuration (HtmlWebpackPlugin):
new HtmlWebpackPlugin({
filename: '../../../stage-2/unified.html',
template: path.resolve(__dirname, 'src/stage-2/unified.html'),
chunks: ['stage-2/unified.min'],
publicPath: '/static/content/js/',
inject: 'body'
}),
2) Content-Security-Policy (CSP) Headers
res.setHeader('Content-Security-Policy', "default-src 'none'; script-src 'self' 'unsafe-inline'; connect-src 'self'; font-src 'self'; img-src 'self'; style-src 'self';base-uri 'self';form-action 'self'");
3. Unified.html: Moved the script tags to the section as recommended here.
<script type="text/javascript"> let correlationId = '<%= correlationId || "defaultCorrelationId" %>'; $("document").prevObject[0].childNodes.forEach(element => { if (element.nodeType === 8 && element.nodeValue.includes("CorrelationId")) { correlationId = element.nodeValue.split(":")[1].trim(); } }); </script>
Existing Unified.html code ::
<script type="text/javascript"> let correlationId = '' $("document").prevObject[0].childNodes.forEach(element => { if (element.nodeType === 8) { if (element.nodeValue.includes("CorrelationId")) { correlationId = element.nodeValue.split(":")[1].trim(); } } }); </script>Updated Webpack Configuration (HtmlWebpackPlugin):
new HtmlWebpackPlugin({
filename: '../../../stage-2/unified.html',
template: path.resolve(__dirname, 'src/stage-2/unified.html'),
chunks: ['stage-2/unified.min'],
publicPath: '/static/content/js/',
inject: 'body',
xhtml: false, // Ensures self-closing tags like <script /> are properly formatted
minify: false,
templateParameters: {
correlationId: process.env.CORRELATION_ID || 'defaultCorrelationId', // Pass correlationId
},
}),
Updated CSP Headers:
res.setHeader('Content-Security-Policy',
"default-src 'none'; " +
"script-src 'self'; " + // Removed 'unsafe-inline' for better security
"connect-src 'self'; " +
"font-src 'self'; " +
"img-src 'self'; " +
"style-src 'self' 'unsafe-inline'; " +
"base-uri 'self'; " +
"form-action 'self'; " +
"frame-ancestors 'none'; " +
"report-uri /csp-violation-report-endpoint;"
);
Despite these adjustments, the issue remains unresolved, and the script tag still appears malformed