@ecency/render-helper 2.3.11 → 2.3.13

package/lib/types/xss-white-list.interface.d.ts

@@ -2,4 +2,5 @@ import { IWhiteList } from 'xss';
 export interface XSSWhiteList extends IWhiteList {
     iframe?: string[];
     strike?: string[];
+    video?: string[];
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ecency/render-helper",
-  "version": "2.3.11",
+  "version": "2.3.13",
   "description": "Markdown+Html Render helper",
   "main": "lib/index.js",
   "types": "lib/index.d.ts",

package/src/consts/allowed-attributes.const.ts

@@ -33,6 +33,7 @@ export const ALLOWED_ATTRIBUTES: XSSWhiteList = {
   ],
   'span': ['class', 'id'],
   'iframe': ['src', 'class', 'frameborder', 'allowfullscreen', 'webkitallowfullscreen', 'mozallowfullscreen', 'sandbox'],
+  'video': ['src', 'controls', 'poster'],
   'div': ['class', 'id'],
   'strong': [],
   'b': [],

package/src/methods/a.method.ts

@@ -34,7 +34,10 @@ import { extractYtStartTime, isValidPermlink, isValidUsername } from '../helper'
 import { createImageHTML } from "./img.method";
 
 
-export function a(el: HTMLElement, forApp: boolean, webp: boolean): void {
+export function a(el: HTMLElement | null, forApp: boolean, webp: boolean): void {
+  if (!el || !el.parentNode) {
+    return
+  }
   let href = el.getAttribute('href')
 
   // Continue if href has no value

package/src/methods/iframe.method.ts

@@ -1,6 +1,9 @@
 import { ARCH_REGEX, DAPPLR_REGEX, LBRY_REGEX, TRUVVL_REGEX, ODYSEE_REGEX, SKATEHIVE_IPFS_REGEX, BITCHUTE_REGEX, RUMBLE_REGEX, BRIGHTEON_REGEX, VIMEO_EMBED_REGEX, SPEAK_EMBED_REGEX, VIMM_EMBED_REGEX, D_TUBE_EMBED_REGEX, SPOTIFY_EMBED_REGEX, SOUNDCLOUD_EMBED_REGEX, TWITCH_EMBED_REGEX, YOUTUBE_EMBED_REGEX, BRAND_NEW_TUBE_REGEX, LOOM_EMBED_REGEX, AUREAL_EMBED_REGEX } from '../consts'
 
-export function iframe(el: HTMLElement): void {
+export function iframe(el: HTMLElement | null): void {
+  if (!el || !el.parentNode) {
+    return;
+  }
   const src = el.getAttribute('src');
   if (!src) {
     el.parentNode.removeChild(el);
@@ -18,7 +21,7 @@ export function iframe(el: HTMLElement): void {
   if (src.match(BITCHUTE_REGEX)) {
     return;
   }
-  
+
   // Vimeo
   const m = src.match(VIMEO_EMBED_REGEX);
   if (m && m.length === 2) {
@@ -86,7 +89,7 @@ export function iframe(el: HTMLElement): void {
     el.setAttribute('allowfullscreen', 'true');
     return;
   }
-  
+
   // Truvvl
   if (src.match(TRUVVL_REGEX)) {
     el.setAttribute('src', src);
@@ -162,6 +165,8 @@ export function iframe(el: HTMLElement): void {
   const replaceNode = el.ownerDocument.createElement('div');
   replaceNode.setAttribute('class', 'unsupported-iframe');
   replaceNode.textContent = `(Unsupported ${src})`;
-  el.parentNode.insertBefore(replaceNode, el);
-  el.parentNode.removeChild(el);
+  if (el.parentNode) {
+    el.parentNode.insertBefore(replaceNode, el);
+    el.parentNode.removeChild(el);
+  }
 }

package/src/methods/sanitize-html.method.ts

@@ -17,6 +17,10 @@ export function sanitizeHtml(html: string): string {
 
       if (name.startsWith('on')) return ''; // 🛡 event handlers
       if (tag === 'img' && name === 'src' && (!/^https?:\/\//.test(decoded) || decoded.startsWith('javascript:'))) return '';
+      if (
+        tag === 'video' && ['src', 'poster'].includes(name) &&
+        (!/^https?:\/\//.test(decoded) || decoded.startsWith('javascript:'))
+      ) return '';
       if (tag === 'img' && ['dynsrc', 'lowsrc'].includes(name)) return '';
       if (tag === 'span' && name === 'class' && value === 'wr') return '';
       if (name === 'id') {

package/src/methods/text.method.ts

@@ -4,13 +4,18 @@ import { proxifyImageSrc } from '../proxify-image-src'
 import { linkify } from './linkify.method'
 import {createImageHTML} from "./img.method";
 
-export function text(node: HTMLElement, forApp: boolean, webp: boolean): void {
+export function text(node: HTMLElement | null, forApp: boolean, webp: boolean): void {
+  if (!node || !node.parentNode) {
+    return
+  }
+
   if (['a', 'code'].includes(node.parentNode.nodeName)) {
     return
   }
 
-  const linkified = linkify(node.nodeValue, forApp, webp)
-  if (linkified !== node.nodeValue) {
+  const nodeValue = node.nodeValue || ''
+  const linkified = linkify(nodeValue, forApp, webp)
+  if (linkified !== nodeValue) {
     const replaceNode = DOMParser.parseFromString(
       `<span class="wr">${linkified}</span>`
     )
@@ -20,15 +25,15 @@ export function text(node: HTMLElement, forApp: boolean, webp: boolean): void {
     return
   }
 
-  if (node.nodeValue.match(IMG_REGEX)) {
+  if (nodeValue.match(IMG_REGEX)) {
     const isLCP = false; // Traverse handles LCP; no need to double-count
-    const imageHTML = createImageHTML(node.nodeValue, isLCP, webp);
+    const imageHTML = createImageHTML(nodeValue, isLCP, webp);
     const replaceNode = DOMParser.parseFromString(imageHTML);
     node.parentNode.replaceChild(replaceNode, node);
   }
   // If a youtube video
-  if (node.nodeValue.match(YOUTUBE_REGEX)) {
-    const e = YOUTUBE_REGEX.exec(node.nodeValue)
+  if (nodeValue.match(YOUTUBE_REGEX)) {
+    const e = YOUTUBE_REGEX.exec(nodeValue)
     if (e[1]) {
       const vid = e[1]
       const thumbnail = proxifyImageSrc(`https://img.youtube.com/vi/${vid.split('?')[0]}/hqdefault.jpg`, 0, 0, webp ? 'webp' : 'match')
@@ -36,7 +41,7 @@ export function text(node: HTMLElement, forApp: boolean, webp: boolean): void {
 
       let attrs = `class="markdown-video-link markdown-video-link-youtube" data-embed-src="${embedSrc}" data-youtube="${vid}"`
       //extract start time if available
-      const startTime = extractYtStartTime(node.nodeValue);
+      const startTime = extractYtStartTime(nodeValue);
       if(startTime){
         attrs = attrs.concat(` data-start-time="${startTime}"`);
       }
@@ -52,8 +57,8 @@ export function text(node: HTMLElement, forApp: boolean, webp: boolean): void {
       node.parentNode.replaceChild(replaceNode, node)
     }
   }
-  if (node.nodeValue && typeof node.nodeValue === 'string') {
-    const postMatch = node.nodeValue.trim().match(POST_REGEX)
+  if (nodeValue && typeof nodeValue === 'string') {
+    const postMatch = nodeValue.trim().match(POST_REGEX)
     if (postMatch && WHITE_LIST.includes(postMatch[1].replace(/www./,''))) {
       const tag = postMatch[2]
       const author = postMatch[3].replace('@', '')

package/src/sanitize-html.spec.ts

@@ -0,0 +1,15 @@
+import { sanitizeHtml } from './methods/sanitize-html.method'
+
+describe('sanitizeHtml', () => {
+  it('1- should allow video tag with src and controls', () => {
+    const input = '<video src="https://example.com/video.mp4" controls></video>'
+    const expected = '<video src="https://example.com/video.mp4" controls></video>'
+    expect(sanitizeHtml(input)).toBe(expected)
+  })
+
+  it('2- should strip dangerous video src', () => {
+    const input = "<video src=\"javascript:alert('XSS')\" controls></video>"
+    const expected = '<video controls></video>'
+    expect(sanitizeHtml(input)).toBe(expected)
+  })
+})

package/src/types/xss-white-list.interface.ts

@@ -3,4 +3,5 @@ import { IWhiteList } from 'xss'
 export interface XSSWhiteList extends IWhiteList {
   iframe?: string[]
   strike?: string[]
+  video?: string[]
 }