feat: svg as a background image does not execute JS code

adobe · Oct 18, 2023 · 8313fb4 · 8313fb4
1 parent 10eddd0
commit 8313fb4
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 3 deletions.
diff --git a/css/inspect/inspect.css b/css/inspect/inspect.css
@@ -8,6 +8,9 @@ section sp-tabs sp-tab-panel {
   margin-bottom: 30px;
 }
 
-.inspect sp-asset svg {
+.inspect sp-asset .svg-placeholder {
   width: 300px;
+  height: 300px;
+  margin-bottom: 40px;
+  background-repeat: no-repeat;
 }
diff --git a/inspect.html b/inspect.html
@@ -68,6 +68,9 @@ <h3>Page preview</h3>
                                 <sp-action-button for="inspect-select-logo" data-picker="img" disabled>
                                   <sp-icon-anchor-select></sp-icon-anchor-select>
                                 </sp-action-button>
+                                <sp-help-text variant="negative" icon class="hidden" id="svg-security-risk">
+                                    Security risk: the logo you have selected is an SVG. It may contain malicious code (like Javascript code). You can download it but you should inspect it before using it.
+                                </sp-help-text>
                                 <sp-asset id="inspect-select-logo" class="hidden">
                                     <div></div>
                                 </sp-asset>

diff --git a/js/inspect/inspect.ui.js b/js/inspect/inspect.ui.js
@@ -20,6 +20,7 @@ const VARS_FIELDS = document.querySelectorAll(`${VARS_PARENT_SELECTOR} sp-textfi
 const PICKERS = document.querySelectorAll(`${VARS_PARENT_SELECTOR} sp-action-button`);
 const LOGO_FIELD = document.querySelector(`${PARENT_SELECTOR} #inspect-select-logo`);
 const LOGO_IMG_PLACEHOLDER = document.querySelector(`${PARENT_SELECTOR} #inspect-select-logo div`);
+const LOGO_SVG_SECURITY_MSG = document.querySelector(`${PARENT_SELECTOR} #svg-security-risk`);
 
 const config = {
   vars: {},
@@ -127,7 +128,7 @@ const saveCapture = (event) => {
       pickerField.handleChange();
     } catch (e) {
       // eslint-disable-next-line no-console
-      console.warning(`Error while trying to capture style: ${e.message}`);
+      console.warn(`Error while trying to capture style: ${e.message}`);
     }
   }
   event.preventDefault();
@@ -244,8 +245,13 @@ const attachListeners = () => {
     if (value && value !== 'none') {
       LOGO_IMG_PLACEHOLDER.innerHTML = '';
       if (value.startsWith('<svg')) {
-        LOGO_IMG_PLACEHOLDER.innerHTML = value;
+        LOGO_SVG_SECURITY_MSG.classList.remove('hidden');
+        const div = document.createElement('div');
+        div.style['background-image'] = `url('data:image/svg+xml;base64,${btoa(value)}')`;
+        div.classList.add('svg-placeholder');
+        LOGO_IMG_PLACEHOLDER.appendChild(div);
       } else {
+        LOGO_SVG_SECURITY_MSG.classList.add('hidden');
         const img = document.createElement('img');
         img.src = value;
         LOGO_IMG_PLACEHOLDER.appendChild(img);