@descope-ui/descope-image 0.0.2 → 0.0.4

package/CHANGELOG.md

@@ -2,6 +2,17 @@
 
 This file was generated using [@jscutlery/semver](https://github.com/jscutlery/semver).
 
+## [0.0.4](https://github.com/descope/web-components-ui/compare/@descope-ui/descope-image-0.0.3...@descope-ui/descope-image-0.0.4) (2025-06-19)
+
+### Dependency Updates
+
+* `test-assets` updated to version `0.0.1`
+## [0.0.3](https://github.com/descope/web-components-ui/compare/@descope-ui/descope-image-0.0.2...@descope-ui/descope-image-0.0.3) (2025-06-09)
+
+### Dependency Updates
+
+* `@descope-ui/common` updated to version `0.0.13`
+* `@descope-ui/theme-globals` updated to version `0.0.13`
 ## [0.0.2](https://github.com/descope/web-components-ui/compare/@descope-ui/descope-image-0.0.1...@descope-ui/descope-image-0.0.2) (2025-06-03)
 
 ## 0.0.1 (2025-05-28)

package/e2e/descope-image.spec.ts

@@ -1,5 +1,6 @@
 import { test, expect } from '@playwright/test';
 import { getStoryUrl, loopConfig, loopPresets } from 'e2e-utils';
+import { Locator } from '@playwright/test';
 
 const storyName = 'descope-image';
 const componentName = 'descope-image';
@@ -45,6 +46,10 @@ test.describe('presets', () => {
         'st-width': '200px',
         'st-height': '50px',
       },
+      'from url': { src: 'fromUrlLight' },
+      svg64: { src: 'base64svg' },
+      png64: { src: 'base64png' },
+      'sanitized svg': { src: 'base64pngWithForbiddenTags' },
     },
     (preset, name) => {
       test(name, async ({ page }) => {
@@ -57,3 +62,27 @@ test.describe('presets', () => {
     },
   );
 });
+
+// Reusable function to check for an SVG with a specific tag inside a node
+async function hasSvgWithTag(component: Locator, tagName: string): Promise<boolean> {
+  return await component.evaluate((node, tag) => {
+    const svg = node.querySelector('svg');
+    if (!svg) return false;
+    return svg.querySelector(tag) !== null;
+  }, tagName);
+}
+
+test.describe('sanitation', () => {
+  test('sanitize svg', async({ page }) => {
+    await page.goto(getStoryUrl(storyName, { src: 'base64pngWithForbiddenTags' }), {
+      waitUntil: 'networkidle',
+    });
+    const component = page.locator(componentName);
+
+    const hasDefs = await hasSvgWithTag(component, 'defs');
+    expect(hasDefs).toBe(false);
+
+    const hasUse = await hasSvgWithTag(component, 'use');
+    expect(hasUse).toBe(false);
+  });
+});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@descope-ui/descope-image",
-  "version": "0.0.2",
+  "version": "0.0.4",
   "exports": {
     ".": {
       "import": "./src/component/index.js"
@@ -19,8 +19,8 @@
   },
   "dependencies": {
     "dompurify": "^3.1.6",
-    "@descope-ui/common": "0.0.12",
-    "@descope-ui/theme-globals": "0.0.12"
+    "@descope-ui/common": "0.0.13",
+    "@descope-ui/theme-globals": "0.0.13"
   },
   "publishConfig": {
     "link-workspace-packages": false

package/src/component/helpers.js

@@ -20,6 +20,10 @@ const createSvgEle = (text) => {
   // we want to purify the SVG to avoid XSS attacks
   const clean = DOMPurify.sanitize(text, {
     USE_PROFILES: { svg: true, svgFilters: true },
+    // allow image to render
+    ADD_TAGS: ['image'],
+    // forbid interactiviy via `use` tags (which are sanitized by default)
+    FORBID_TAGS: ['defs']
   });
 
   const parser = new DOMParser();

package/stories/descope-image.stories.js

@@ -7,14 +7,18 @@ import {
 
 import demoImageLight from './demo.jpg';
 import demoImageDark from './game.png';
-import fromUrlLight from './google.svg?no-inline';
-import fromUrlDark from './apple.svg?no-inline';
+import fromUrlLight from './google.svg';
+import fromUrlDark from './apple.svg';
+import { base64png, base64svg, base64pngWithForbiddenTags } from 'test-assets';
 
 const images = {
   fromUrlLight,
   fromUrlDark,
   demoImageLight,
   demoImageDark,
+  base64png,
+  base64svg,
+  base64pngWithForbiddenTags
 };
 
 const Template = ({