✨ Add dangerous html content to rss (#885)

package.json

@@ -70,6 +70,7 @@
     "sabnzbd-api": "^1.5.0",
     "uuid": "^9.0.0",
     "xml-js": "^1.6.11",
+    "xss": "^1.0.14",
     "yarn": "^1.22.19",
     "zod": "^3.21.4",
     "zustand": "^4.3.7"

public/locales/en/modules/rss.json

@@ -10,6 +10,12 @@
       },
       "refreshInterval": {
         "label": "Refresh interval (in minutes)"
+      },
+      "dangerousAllowSanitizedItemContent": {
+        "label": "Dangerous: Allow sanitized item content"
+      },
+      "settings.textLinesClamp": {
+        "label": "Text lines clamp"
       }
     },
     "card": {

src/pages/api/modules/rss/index.ts

@@ -1,7 +1,8 @@
+import xss from 'xss';
 import { NextApiRequest, NextApiResponse } from 'next';
 import Consola from 'consola';
 import { getCookie } from 'cookies-next';
-import { decode } from 'html-entities';
+import { decode, encode } from 'html-entities';
 import Parser from 'rss-parser';
 import { z } from 'zod';
 
@@ -58,10 +59,13 @@ export const Get = async (request: NextApiRequest, response: NextApiResponse) =>
   const orderedFeed = {
     ...feed,
     items: feed.items
-      .map((item: { title: any; content: any }) => ({
+      .map((item: { title: string; content: string; 'content:encoded': string }) => ({
         ...item,
         title: item.title ? decode(item.title) : undefined,
-        content: decode(item.content),
+        content: processItemContent(
+          item['content:encoded'] ?? item.content,
+          rssWidget.properties.dangerousAllowSanitizedItemContent
+        ),
         enclosure: createEnclosure(item),
         link: createLink(item),
       }))
@@ -81,6 +85,40 @@ export const Get = async (request: NextApiRequest, response: NextApiResponse) =>
   });
 };
 
+const processItemContent = (content: string, dangerousAllowSanitizedItemContent: boolean) => {
+  if (dangerousAllowSanitizedItemContent) {
+    return xss(content, {
+      allowList: {
+        p: [],
+        h1: [],
+        h2: [],
+        h3: [],
+        h4: [],
+        h5: [],
+        h6: [],
+        a: ['href'],
+        b: [],
+        strong: [],
+        i: [],
+        em: [],
+        img: ['src', 'width', 'height'],
+        br: [],
+        small: [],
+        ul: [],
+        li: [],
+        ol: [],
+        figure: [],
+        svg: [],
+        code: [],
+        mark: [],
+        blockquote: [],
+      },
+    });
+  }
+
+  return encode(content);
+};
+
 const createLink = (item: any) => {
   if (item.link) {
     return item.link;

src/widgets/rss/RssWidgetTile.tsx

@@ -1,4 +1,3 @@
-import Link from 'next/link';
 import {
   ActionIcon,
   Badge,
@@ -19,6 +18,7 @@ import { IconClock, IconRefresh, IconRss } from '@tabler/icons-react';
 import { useQuery } from '@tanstack/react-query';
 import dayjs from 'dayjs';
 import { useTranslation } from 'next-i18next';
+import Link from 'next/link';
 
 import { defineWidget } from '../helper';
 import { IWidget } from '../widgets';
@@ -38,6 +38,17 @@ const definition = defineWidget({
       max: 300,
       step: 15,
     },
+    dangerousAllowSanitizedItemContent: {
+      type: 'switch',
+      defaultValue: false,
+    },
+    textLinesClamp: {
+      type: 'slider',
+      defaultValue: 5,
+      min: 1,
+      max: 50,
+      step: 1,
+    },
   },
   gridstack: {
     minWidth: 2,
@@ -141,10 +152,10 @@ function RssTile({ widget }: RssTileProps) {
                   )}
 
                   <Flex gap="xs">
-                    {item.enclosure && (
+                    {item.enclosure && item.enclosure.url && (
                       <MediaQuery query="(max-width: 1200px)" styles={{ display: 'none' }}>
                         <Image
-                          src={item.enclosure?.url ?? undefined}
+                          src={item.enclosure.url ?? undefined}
                           width={140}
                           height={140}
                           radius="md"
@@ -162,9 +173,13 @@ function RssTile({ widget }: RssTileProps) {
                       )}
 
                       <Text lineClamp={2}>{item.title}</Text>
-                      <Text color="dimmed" size="xs" lineClamp={3}>
-                        {item.content}
-                      </Text>
+                      <Text
+                        className={classes.itemContent}
+                        color="dimmed"
+                        size="xs"
+                        lineClamp={widget.properties.textLinesClamp}
+                        dangerouslySetInnerHTML={{ __html: item.content }}
+                      />
 
                       {item.pubDate && (
                         <InfoDisplay title={feed.feed.title} date={formatDate(item.pubDate)} />
@@ -210,7 +225,7 @@ const InfoDisplay = ({ date, title }: { date: string; title: string | undefined
   </Group>
 );
 
-const useStyles = createStyles(({ colorScheme }) => ({
+const useStyles = createStyles(({ colorScheme, colors, radius, spacing }) => ({
   backgroundImage: {
     position: 'absolute',
     width: '100%',
@@ -225,6 +240,26 @@ const useStyles = createStyles(({ colorScheme }) => ({
       filter: 'blur(40px) brightness(0.7)',
     },
   },
+  itemContent: {
+    img: {
+      height: 100,
+      width: 'auto',
+      borderRadius: radius.sm,
+    },
+    blockquote: {
+      marginLeft: 10,
+      marginRight: 10,
+      paddingLeft: spacing.xs,
+      paddingRight: spacing.xs,
+      paddingTop: 1,
+      paddingBottom: 1,
+      borderLeftWidth: 4,
+      borderLeftStyle: 'solid',
+      borderLeftColor: colors.red[5],
+      borderRadius: radius.sm,
+      backgroundColor: colorScheme === 'dark' ? colors.dark[4] : '',
+    },
+  },
 }));
 
 export default definition;