</script> Malformed Script Tag After B2C Page Layout Version Upgrade Causes Loading Issues

[vikramAkram]

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>&lt;/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

1. After B2C Page Layout Version Upgrade:

2. 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>

https://learn.microsoft.com/en-us/azure/active-directory-b2c/javascript-and-page-layout?pivots=b2c-user-flow

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