feat(sanitize-html): integrate sanitize-html for product descriptions

- Add sanitize-html package to sanitize product descriptions, ensuring safe rendering of HTML content.
- Update PrerenderProduct and ProductDetailPage components to utilize sanitize-html for improved security and content integrity.
- Enhance error handling in ProductDetailPage to fallback to plain text if HTML parsing fails.

src/PrerenderProduct.js

@@ -9,6 +9,7 @@ import {
   Toolbar,
   Button
 } from '@mui/material';
+import sanitizeHtml from 'sanitize-html';
 import Footer from './components/Footer.js';
 import { Logo } from './components/header/index.js';
 import ProductImage from './components/ProductImage.js';
@@ -539,7 +540,17 @@ class PrerenderProduct extends React.Component {
             React.createElement(
               'div',
               { 
-                dangerouslySetInnerHTML: { __html: product.description },
+                dangerouslySetInnerHTML: { 
+                  __html: sanitizeHtml(product.description, {
+                    allowedTags: sanitizeHtml.defaults.allowedTags.concat(['img']),
+                    allowedAttributes: {
+                      '*': ['class', 'style'],
+                      'a': ['href', 'title'],
+                      'img': ['src', 'alt', 'width', 'height']
+                    },
+                    disallowedTagsMode: 'discard'
+                  })
+                },
                 style: { 
                   fontFamily: '"Roboto","Helvetica","Arial",sans-serif',
                   fontSize: '1rem',

src/components/ProductDetailPage.js

@@ -9,6 +9,7 @@ import LinkIcon from "@mui/icons-material/Link";
 import CodeIcon from "@mui/icons-material/Code";
 import { Link } from "react-router-dom";
 import parse from "html-react-parser";
+import sanitizeHtml from "sanitize-html";
 import AddToCartButton from "./AddToCartButton.js";
 import ProductImage from "./ProductImage.js";
 import Product from "./Product.js";
@@ -1314,9 +1315,16 @@ class ProductDetailPage extends Component {
                 "& strong": { fontWeight: 600 },
               }}
             >
-              {product.description ? (
-                parse(product.description)
-              ) : upgrading ? (
+              {product.description ? (() => {
+                try {
+                  // Sanitize HTML to remove invalid tags
+                  return parse(sanitizeHtml(product.description));
+                } catch (error) {
+                  console.warn('Failed to parse product description HTML:', error);
+                  // Fallback to rendering as plain text if HTML parsing fails
+                  return <span>{product.description}</span>;
+                }
+              })() : upgrading ? (
                 <Box sx={{ textAlign: "center", py: 2 }}>
                   <Typography variant="body1" color="text.secondary">
                     {this.props.t ? this.props.t('product.loadingDescription') : 'Produktbeschreibung wird geladen...'}