fix SVG Injection problem

2026-07-17 13:35:55 +02:00
parent 8fb05b3f5b
commit b7c6c5df7b
3 changed files with 60 additions and 22 deletions
@@ -1,5 +1,6 @@
 const router = require('express').Router();
 const axios = require('axios');
+const { escapeSvg, safeColor } = require('../lib/sanitize');

 router.get('/badge', async (req, res) => {
  const {
@@ -16,7 +17,8 @@ router.get('/badge', async (req, res) => {

  try {
    // download icon SVG from SimpleIcons CDN
-    const iconUrl = `https://cdn.simpleicons.org/${icon}?viewbox=auto&size=${size}`;
+    const safeIcon = escapeSvg(icon);
+    const iconUrl = `https://cdn.simpleicons.org/${safeIcon}?viewbox=auto&size=${size}`;
    const iconResponse = await axios.get(iconUrl, { responseType: 'text' });
    if (iconResponse.status !== 200) {
      return res.status(404).send('Icon not found');
@@ -33,6 +35,11 @@ router.get('/badge', async (req, res) => {
    }

    // Badge size
+    const safeLabel = escapeSvg(effectiveLabel);
+    const safeBgIcon = safeColor(bgicon, 'none');
+    const safeBgLabel = safeColor(bglabel, 'none');
+    const safeFontWeight = escapeSvg(fontweight);
+
    const padding = 10;
    const iconSize = parseInt(size);
    const fontSize = Math.round(iconSize * 0.6); 
@@ -63,6 +70,7 @@ router.get('/badge', async (req, res) => {
        effectiveColor = "#222"; // fallback
      }
    }
+    effectiveColor = safeColor(effectiveColor, '#222');

    // doboz magasság 5 pixellel nagyobb legyen az ikon méreténél
    const iconSizeAndPadding = iconSize + 5;
@@ -71,14 +79,14 @@ router.get('/badge', async (req, res) => {
    let width, height, iconGroup, textElem;

    const fontFamily = "Verdana,Geneva,DejaVu Sans,sans-serif";
-    const fontWeight = fontweight; // paraméterből
+    const fontWeight = safeFontWeight; // paraméterből

    if (labelpos === 'left') {
      // Külön dobozok: padding csak a széleken kell, a dobozokon belül nem!
-      textElem = `<rect x="0" y="0" width="${textWidth}" height="${iconBoxHeight}" rx="${radius}" fill="${bglabel}"/>
-        <text x="${textWidth / 2}" y="${iconBoxHeight / 2}" font-size="${fontSize}" font-family="${fontFamily}" font-weight="${fontWeight}" fill="${effectiveColor}" text-anchor="middle" dominant-baseline="middle">${effectiveLabel}</text>`;
+      textElem = `<rect x="0" y="0" width="${textWidth}" height="${iconBoxHeight}" rx="${radius}" fill="${safeBgLabel}"/>
+        <text x="${textWidth / 2}" y="${iconBoxHeight / 2}" font-size="${fontSize}" font-family="${fontFamily}" font-weight="${fontWeight}" fill="${effectiveColor}" text-anchor="middle" dominant-baseline="middle">${safeLabel}</text>`;
      iconGroup = `
-        <rect x="${textWidth}" y="0" width="${iconBoxWidth + 5}" height="${iconBoxHeight}" rx="${radius}" fill="${bgicon}"/>
+        <rect x="${textWidth}" y="0" width="${iconBoxWidth + 5}" height="${iconBoxHeight}" rx="${radius}" fill="${safeBgIcon}"/>
        <g transform="translate(${textWidth + (5 / 2)}, ${(iconBoxHeight - iconSize) / 2})">${iconSVG}</g>
      `;
    } else if (labelpos === 'above' || labelpos === 'below') {
@@ -94,9 +102,9 @@ router.get('/badge', async (req, res) => {
      height = iconSizeAndPadding + textPadding + labelRectHeight;

      // Label háttér
-      const labelRect = `<rect x="0" y="${labelRectY}" width="${width}" height="${labelRectHeight}" rx="${radius}" fill="${bglabel}"/>`;
+      const labelRect = `<rect x="0" y="${labelRectY}" width="${width}" height="${labelRectHeight}" rx="${radius}" fill="${safeBgLabel}"/>`;
      // Ikon háttér
-      const iconRect = `<rect x="0" y="${iconRectY}" width="${width}" height="${iconSize + 5}" rx="${radius}" fill="${bgicon}"/>`;
+      const iconRect = `<rect x="0" y="${iconRectY}" width="${width}" height="${iconSize + 5}" rx="${radius}" fill="${safeBgIcon}"/>`;

      // Szöveg
      const textY = labelpos === 'above'
@@ -104,7 +112,7 @@ router.get('/badge', async (req, res) => {
        : labelRectY + 5 + labelRectHeight / 2;
      textElem = `
        ${labelRect}
-        <text x="${width / 2}" y="${textY}" font-size="${fontSize}" font-family="${fontFamily}" font-weight="${fontWeight}" fill="${effectiveColor}" text-anchor="middle" dominant-baseline="middle">${effectiveLabel}</text>
+        <text x="${width / 2}" y="${textY}" font-size="${fontSize}" font-family="${fontFamily}" font-weight="${fontWeight}" fill="${effectiveColor}" text-anchor="middle" dominant-baseline="middle">${safeLabel}</text>
      `;

      // Ikon
@@ -115,11 +123,11 @@ router.get('/badge', async (req, res) => {
    } else {
      // Alapértelmezett: ikon balra, szöveg jobbra (függőleges közép)
      iconGroup = `
-        <rect x="0" y="0" width="${iconBoxWidth}" height="${iconBoxHeight}" rx="${radius}" fill="${bgicon}"/>
+        <rect x="0" y="0" width="${iconBoxWidth}" height="${iconBoxHeight}" rx="${radius}" fill="${safeBgIcon}"/>
        <g transform="translate(${(iconBoxWidth - iconViewBoxWidth) / 2}, ${(iconBoxHeight - iconViewBoxHeight) / 2})">${iconSVG}</g>
      `;
-      textElem = `<rect x="${iconBoxWidth}" y="0" width="${textWidth}" height="${iconBoxHeight}" rx="${radius}" fill="${bglabel}"/>
-        <text x="${iconBoxWidth + textWidth / 2}" y="${iconBoxHeight / 2}" font-size="${fontSize}" font-family="${fontFamily}" font-weight="${fontWeight}" fill="${effectiveColor}" text-anchor="middle" dominant-baseline="middle">${effectiveLabel}</text>`;
+      textElem = `<rect x="${iconBoxWidth}" y="0" width="${textWidth}" height="${iconBoxHeight}" rx="${radius}" fill="${safeBgLabel}"/>
+        <text x="${iconBoxWidth + textWidth / 2}" y="${iconBoxHeight / 2}" font-size="${fontSize}" font-family="${fontFamily}" font-weight="${fontWeight}" fill="${effectiveColor}" text-anchor="middle" dominant-baseline="middle">${safeLabel}</text>`;
    } 

    // SVG badge string összefűzéssel, szöveg árnyékkal
@@ -1,4 +1,5 @@
 const router = require('express').Router();
+const { escapeSvg, safeColor } = require('../lib/sanitize');


 router.get('/tag', (req, res) => {
@@ -15,7 +16,12 @@ router.get('/tag', (req, res) => {
 	} = req.query;

 	const fontFamily = "Verdana,Geneva,DejaVu Sans,sans-serif";
-	const fontWeight = fontweight;
+	const fontWeight = escapeSvg(fontweight);
+	const safeTag = escapeSvg(tag);
+	const safeLabel = escapeSvg(label);
+	const safeColorVal = safeColor(color, '#000000');
+	const safeBgTag = safeColor(bgtag, 'none');
+	const safeBgLabel = safeColor(bglabel, 'none');

 	// A flat badge esetén a szöveg középre igazítása miatt a szöveg pozícióját módosítjuk
 	//const labelX = labelpos === 'left' ? 165 : 455;
@@ -33,12 +39,12 @@ router.get('/tag', (req, res) => {

 	const rect = `
 <g shape-rendering="crispEdges">
-	<rect width="${tagTextLength+textPadding}" height="${badgeSize}" fill="${bgtag}"/>
-	<rect x="${tagTextLength}" width="${labelTextLength+(textPadding*2)}" height="${badgeSize}" fill="${bglabel}"/>
+	<rect width="${tagTextLength+textPadding}" height="${badgeSize}" fill="${safeBgTag}"/>
+	<rect x="${tagTextLength}" width="${labelTextLength+(textPadding*2)}" height="${badgeSize}" fill="${safeBgLabel}"/>
 </g>
 <g fill="#fff" text-anchor="start" font-family="${fontFamily}" text-rendering="geometricPrecision" font-size="${badgeFontSize}">
-	<text x="${tagTextX}" y="${badgeFontSize + textPadding}"  fill="${color}">${tag.toLowerCase()}</text>
-	<text x="${labelTextX}" y="${badgeFontSize + textPadding}" fill="${color}" font-weight="${fontWeight}">${label.toUpperCase()}</text>
+	<text x="${tagTextX}" y="${badgeFontSize + textPadding}"  fill="${safeColorVal}">${safeTag.toLowerCase()}</text>
+	<text x="${labelTextX}" y="${badgeFontSize + textPadding}" fill="${safeColorVal}" font-weight="${fontWeight}">${safeLabel.toUpperCase()}</text>
 </g>`.trim();

 	
@@ -56,15 +62,15 @@ router.get('/tag', (req, res) => {
 	<rect width="62" height="20" fill="url(#s)"/>
 </g>
 <g fill="#fff" text-anchor="middle" font-family="${fontFamily}" text-rendering="geometricPrecision" font-size="110" font-weight="${fontWeight}">
-	<text aria-hidden="true" x="165" y="150" fill="#010101" fill-opacity=".3" transform="scale(.1)" textLength="210">${tag}</text>
-	<text x="165" y="140" transform="scale(.1)" fill="#fff" textLength="210">${tag}</text>
-	<text aria-hidden="true" x="455" y="150" fill="#010101" fill-opacity=".3" transform="scale(.1)" textLength="210">${label}</text>
-	<text x="455" y="140" transform="scale(.1)" fill="#fff" textLength="210">${label}</text>
+	<text aria-hidden="true" x="165" y="150" fill="#010101" fill-opacity=".3" transform="scale(.1)" textLength="210">${safeTag}</text>
+	<text x="165" y="140" transform="scale(.1)" fill="#fff" textLength="210">${safeTag}</text>
+	<text aria-hidden="true" x="455" y="150" fill="#010101" fill-opacity=".3" transform="scale(.1)" textLength="210">${safeLabel}</text>
+	<text x="455" y="140" transform="scale(.1)" fill="#fff" textLength="210">${safeLabel}</text>
 </g>`.trim();

 const svg = `
-<svg xmlns="http://www.w3.org/2000/svg" width="${badgeWidth}" height="${badgeSize}" role="img" aria-label="${tag}: ${label}">
-	<title>${tag}: ${label}</title>
+<svg xmlns="http://www.w3.org/2000/svg" width="${badgeWidth}" height="${badgeSize}" role="img" aria-label="${safeTag}: ${safeLabel}">
+	<title>${safeTag}: ${safeLabel}</title>
 	${style === 'rect' ? rect : flat}
 </svg>`.trim();
 	
@@ -0,0 +1,24 @@
+'use strict';
+
+const COLOR_RE = /^(#[0-9a-fA-F]{3,8}|[a-zA-Z]+)$/;
+
+/**
+ * Escape special XML/HTML characters to prevent SVG injection / XSS.
+ *   < → &lt;    > → &gt;    & → &amp;    " → &quot;    ' → &#x27;
+ */
+const escapeSvg = (value) =>
+  String(value)
+    .replace(/&/g, '&amp;')
+    .replace(/</g, '&lt;')
+    .replace(/>/g, '&gt;')
+    .replace(/"/g, '&quot;')
+    .replace(/'/g, '&#x27;');
+
+/**
+ * Return a safe CSS colour string or the fallback.
+ * Only simple colour names and hex values (#rgb, #rrggbb, #rrggbbaa) pass.
+ */
+const safeColor = (value, fallback = '#000000') =>
+  COLOR_RE.test(value) ? value : fallback;
+
+module.exports = { escapeSvg, safeColor };