fix(runtime): replace innerHTML with textContent for CSS injection (

#5207) * fix(runtime): replace `innerHTML` with `textContent` for CSS injection This commit addresses security and performance concerns associated with using `innerHTML` for injecting CSS into `<style>` elements in `bootstrap-lazy.ts`. By switching to `textContent`, the risk of executing malicious scripts is mitigated and performance is improved due to the avoidance of HTML parsing. This change enhances the security and efficiency of Stencil's component initialisation process, particularly in environments with strict security policies like browser extensions, without impacting functionality in standard web applications. fixes: #5206 Signed-off-by: Theodore GARSON <[email protected]> * Update bootstrap-lazy.ts --------- Signed-off-by: Theodore GARSON <[email protected]> Co-authored-by: Alice Pote <[email protected]> Co-authored-by: Alice Pote <[email protected]>
ionic-team · Feb 12, 2024 · 8de2ab5 · 8de2ab5
1 parent 0fa572f
commit 8de2ab5
Showing 1 changed file with 2 additions and 2 deletions.
diff --git a/src/runtime/bootstrap-lazy.ts b/src/runtime/bootstrap-lazy.ts
@@ -201,12 +201,12 @@ export const bootstrapLazy = (lazyBundles: d.LazyBundlesRuntimeData, options: d.
   if (cmpTags.length > 0) {
     // Add styles for `slot-fb` elements if any of our components are using slots outside the Shadow DOM
     if (hasSlotRelocation) {
-      dataStyles.innerHTML += SLOT_FB_CSS;
+      dataStyles.textContent += SLOT_FB_CSS;
     }
 
     // Add hydration styles
     if (BUILD.invisiblePrehydration && (BUILD.hydratedClass || BUILD.hydratedAttribute)) {
-      dataStyles.innerHTML += cmpTags + HYDRATED_CSS;
+      dataStyles.textContent += cmpTags + HYDRATED_CSS;
     }
 
     // If we have styles, add them to the DOM