René's URL Explorer Experiment

{"@context":"https://schema.org","@type":"DiscussionForumPosting","headline":"\u0026lt;/script\u003e Malformed Script Tag After B2C Page Layout Version Upgrade Causes Loading Issues","articleBody":"**Describe the bug**\r\n\r\nAfter 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:\r\n\r\n**https://sampledomain/static/content/js/stage-2/unified.min.js?v=1728718798338\u003e\u0026lt;/script\u003e\u003c/script\u003e**\r\n\r\n**This results in a malformed tag with an extra \u003c/script\u003e, causing unexpected behavior.**\r\n\r\n**To Reproduce**\r\n\r\nSteps to reproduce the behavior:\r\n\r\nRun the commands: npm run build followed by npm run server to start the application.\r\nOnce the application is up and running, navigate to any page where the unified.min.js script should load.\r\nOpen the browser developer tools (right-click on the page and select \"Inspect\").\r\nIn the \"Network\" tab, check the script loading section, and we will observe a malformed script tag, as shown in the screenshots.\r\n\r\nInstead of loading properly, the script contains an extra closing tag (\u0026lt;/script\u003e), resulting in the following:\r\n\r\n\u003cscript src=\"https://sampledomain/static/content/js/stage-2/unified.min.js?v=1728718798338\"\u003e\u0026lt;/script\u003e\u003c/script\u003e\r\n\r\n\r\n**Expected behavior**\r\n\r\nThe script tag should load and close correctly without extra tags. Expected output:\r\nhttps://sampledomain/static/content/js/stage-2/unified.min.js?v=1728718798338\u003e\u003c/script\u003e\r\n\r\n\r\n**Screenshots**\r\n\r\n1) After B2C Page Layout Version Upgrade:\r\n\r\n\u003cimg width=\"610\" alt=\"image\" src=\"https://github.com/user-attachments/assets/939f52fd-d59d-44c0-b1a7-345630d8be89\"\u003e\r\n\r\n2) Working Screenshot (Older Version):\r\n\r\n\u003cimg width=\"575\" alt=\"image\" src=\"https://github.com/user-attachments/assets/46b15e93-c335-4ba9-8ce1-08c01cc5432b\"\u003e\r\n\r\n\r\n**Desktop (please complete the following information):**\r\n - Browser [e.g. chrome, safari]\r\n - Version [e.g. 22]\r\n\r\n\r\n\r\n**Additional context**\r\n\r\n**We've tried the following approaches to resolve the issue, but the problem persists:**\r\n\r\n**existing ::**\r\n\r\n**1. Webpack Configuration (HtmlWebpackPlugin):**\r\n    new HtmlWebpackPlugin({\r\n      filename: '../../../stage-2/unified.html',\r\n      template: path.resolve(__dirname, 'src/stage-2/unified.html'),\r\n      chunks: ['stage-2/unified.min'],\r\n      publicPath: '/static/content/js/',\r\n      inject: 'body'\r\n    }),\r\n\r\n**2) Content-Security-Policy (CSP) Headers**\r\n\r\n 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'\");\r\n\r\n**3. Unified.html: Moved the script tags to the \u003chead\u003e section as recommended here.**\r\n\r\n\r\n\u003chead\u003e\r\n  \u003cscript type=\"text/javascript\"\u003e\r\n    let correlationId = '\u003c%= correlationId || \"defaultCorrelationId\" %\u003e';\r\n    $(\"document\").prevObject[0].childNodes.forEach(element =\u003e {\r\n      if (element.nodeType === 8 \u0026\u0026 element.nodeValue.includes(\"CorrelationId\")) {\r\n        correlationId = element.nodeValue.split(\":\")[1].trim();\r\n      }\r\n    });\r\n  \u003c/script\u003e\r\n\u003c/head\u003e\r\n\r\n\r\nhttps://learn.microsoft.com/en-us/azure/active-directory-b2c/javascript-and-page-layout?pivots=b2c-user-flow \r\n\r\n\u003cimg width=\"643\" alt=\"image\" src=\"https://github.com/user-attachments/assets/363f30a3-dcc3-4fa0-b6e2-3273668fbbf7\"\u003e\r\n\r\n\r\n**Existing Unified.html code ::**\r\n\r\n\u003chead\u003e\r\n\u003c/head\u003e\r\n\r\n\u003cbody class=\"idam unified\"\u003e\r\n\u003c!-- journey object here --\u003e\r\n\u003cscript type=\"text/javascript\"\u003e\r\n  let correlationId = ''\r\n  $(\"document\").prevObject[0].childNodes.forEach(element =\u003e {\r\n    if (element.nodeType === 8) {\r\n      if (element.nodeValue.includes(\"CorrelationId\")) {\r\n        correlationId = element.nodeValue.split(\":\")[1].trim();\r\n      }\r\n    }\r\n  });\r\n\u003c/script\u003e\r\n\u003c/body\u003e\r\n\r\n\u003c/html\u003e\r\n\r\n**Updated Webpack Configuration (HtmlWebpackPlugin):**\r\n\r\nnew HtmlWebpackPlugin({\r\n      filename: '../../../stage-2/unified.html',\r\n      template: path.resolve(__dirname, 'src/stage-2/unified.html'),\r\n      chunks: ['stage-2/unified.min'],\r\n      publicPath: '/static/content/js/',\r\n      inject: 'body',\r\n      xhtml: false,  // Ensures self-closing tags like \u003cscript /\u003e are properly formatted\r\n      minify: false,\r\n      templateParameters: {\r\n        correlationId: process.env.CORRELATION_ID || 'defaultCorrelationId', // Pass correlationId\r\n      },\r\n    }),\r\n\r\n**Updated CSP Headers:**\r\n res.setHeader('Content-Security-Policy',\r\n    \"default-src 'none'; \" +\r\n    \"script-src 'self'; \" + // Removed 'unsafe-inline' for better security\r\n    \"connect-src 'self'; \" +\r\n    \"font-src 'self'; \" +\r\n    \"img-src 'self'; \" +\r\n    \"style-src 'self' 'unsafe-inline'; \" +\r\n    \"base-uri 'self'; \" +\r\n    \"form-action 'self'; \" +\r\n    \"frame-ancestors 'none'; \" +\r\n    \"report-uri /csp-violation-report-endpoint;\"\r\n  );\r\n\r\nDespite these adjustments, the issue remains unresolved, and the script tag still appears malformed\r\n","author":{"url":"https://github.com/vikramAkram","@type":"Person","name":"vikramAkram"},"datePublished":"2024-10-12T12:33:46.000Z","interactionStatistic":{"@type":"InteractionCounter","interactionType":"https://schema.org/CommentAction","userInteractionCount":0},"url":"https://github.com/493/github-script/issues/493"}