From e135080e4be8230fff6ddc8339ad5a63f6a8916c Mon Sep 17 00:00:00 2001 From: Aaron Shim <5382864+aaronshim@users.noreply.github.com> Date: Fri, 9 Jul 2021 15:18:45 -0400 Subject: [PATCH] Avoid `.innerHTML` sink for Trusted Types compatibility. `.innerHTML` is considered a [HTML injection sink sink](https://w3c.github.io/webappsec-trusted-types/dist/spec/#html-injection-sinks) in Trusted Types. Replacing `.innerHTML` with the functionally equivalent `.textContent` for style elements should avoid Trusted Types violations. --- src/ElementQueries.js | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/src/ElementQueries.js b/src/ElementQueries.js index 4fe4298..f6a007e 100755 --- a/src/ElementQueries.js +++ b/src/ElementQueries.js @@ -192,8 +192,8 @@ // add animation to trigger animationstart event, so we know exactly when a element appears in the DOM var id = idToSelectorMapping.length; - cssStyleElement.innerHTML += '\n' + selector + ' {animation: 0.1s element-queries;}'; - cssStyleElement.innerHTML += '\n' + selector + ' > .resize-sensor {min-width: '+id+'px;}'; + cssStyleElement.textContent += '\n' + selector + ' {animation: 0.1s element-queries;}'; + cssStyleElement.textContent += '\n' + selector + ' > .resize-sensor {min-width: '+id+'px;}'; idToSelectorMapping.push(selector); } @@ -429,10 +429,10 @@ if (!defaultCssInjected) { cssStyleElement = document.createElement('style'); cssStyleElement.type = 'text/css'; - cssStyleElement.innerHTML = '[responsive-image] > img, [data-responsive-image] {overflow: hidden; padding: 0; } [responsive-image] > img, [data-responsive-image] > img {width: 100%;}'; + cssStyleElement.textContent = '[responsive-image] > img, [data-responsive-image] {overflow: hidden; padding: 0; } [responsive-image] > img, [data-responsive-image] > img {width: 100%;}'; //safari wants at least one rule in keyframes to start working - cssStyleElement.innerHTML += '\n@keyframes element-queries { 0% { visibility: inherit; } }'; + cssStyleElement.textContent += '\n@keyframes element-queries { 0% { visibility: inherit; } }'; document.getElementsByTagName('head')[0].appendChild(cssStyleElement); defaultCssInjected = true; }