Development #254

flipvh · 2024-11-08T08:31:23Z

No description provided.

frontend/src/modules/common/attachments/audio-preview.tsx

+export const AudioPreview = ({ src }: { src: string }) => (
+  <MediaThemeSutroAudio className="w-[70%] p-2 max-h-10">
+    {/* biome-ignore lint/a11y/useMediaCaption: by author */}
+    <audio slot="media" src={src} playsInline crossOrigin="anonymous" />


To fix the problem, we need to ensure that the src value is properly sanitized before being used in the audio element. One effective way to do this is by using a library like DOMPurify to sanitize the src value. This will help prevent any malicious content from being executed.

Import the DOMPurify library.

Sanitize the src value before using it in the audio element.

Ensure that the sanitized value is used consistently throughout the code.

frontend/src/modules/common/attachments/index.tsx

+        (imagePanZoom ? (
+          <ReactPanZoom image={source} alt={altName} imageClass={itemClassName} showButtons={showButtons} />
+        ) : (
+          <img src={source} alt={altName} className={`${itemClassName} w-full h-full`} />


To fix the problem, we need to ensure that the source variable is properly sanitized before being used in the src attribute of the img tag. One way to achieve this is by using a library like DOMPurify to sanitize the URL. This will help prevent any malicious content from being executed.

Install the DOMPurify library.

Import DOMPurify in the relevant file.

Use DOMPurify to sanitize the source variable before using it in the src attribute.

frontend/src/modules/common/attachments/video-preview.tsx

+export const VideoPreview = ({ src }: { src: string }) => (
+  <MediaThemeSutro className="w-full p-4">
+    {/* biome-ignore lint/a11y/useMediaCaption: by author */}
+    <video slot="media" src={src} playsInline crossOrigin="anonymous" />


To fix the problem, we need to ensure that the src attribute is properly sanitized before being used in the video element. This can be achieved by using a library like DOMPurify to sanitize the URL. This will prevent any malicious content from being executed.

Import the DOMPurify library.

Sanitize the src value before using it in the video element.

Ensure that the sanitization is applied consistently wherever the src value is used.

frontend/src/modules/common/blocknote/helpers.ts

+        const imageElement = element.querySelector('img');
+        if (imageElement) {
+          imageElement.onclick = onElClick;
+          imageElement.setAttribute('src', url);


frontend/src/modules/common/blocknote/helpers.ts

+        const videoElement = element.querySelector('video');
+        if (videoElement) {
+          videoElement.onclick = onElClick;
+          videoElement.setAttribute('src', url);


To fix the problem, we need to ensure that the url obtained from the data-url attribute is properly sanitized before being used as the src attribute of the video element. One way to achieve this is by using a library like DOMPurify to sanitize the URL. This will help prevent any malicious content from being executed.

Install the DOMPurify library.

Import DOMPurify in the file.

Use DOMPurify to sanitize the url before setting it as the src attribute.

frontend/src/modules/common/blocknote/helpers.ts

+        const audioElement = element.querySelector('audio');
+        if (audioElement) {
+          audioElement.onclick = onElClick;
+          audioElement.setAttribute('src', url);


To fix the problem, we need to ensure that the url value is properly sanitized before it is used. One way to do this is to use a library like DOMPurify to sanitize the URL. This will ensure that any potentially malicious content is removed before the URL is used in the setAttribute method.

Import the DOMPurify library.

Sanitize the url value before using it in the setAttribute method.

Ensure that the sanitized URL is used consistently across all relevant elements.

frontend/src/modules/common/blocknote/helpers.ts

+
+      case 'file': {
+        const fileLinkElement = document.createElement('a');
+        fileLinkElement.setAttribute('href', url);


To fix the problem, we need to ensure that the url value is properly sanitized or encoded before being used in the setAttribute method. One way to achieve this is by using a library like DOMPurify to sanitize the url value. This will ensure that any potentially malicious content is removed before the url is used.

Install the DOMPurify library.

Import DOMPurify in the file.

Use DOMPurify.sanitize to sanitize the url value before using it in the setAttribute method.

…le el

Pr branch 1731080247722

* feat: Electric proxy * + * fix: Fix electric proxy

RomanNabukhotnyi and others added 18 commits November 4, 2024 11:55

feat: Add update functionality for attachments realtime

6abbf41

add: pragmatic DnD auto-scroll

ff1fb61

feat: Add offline prefetch throttle

559c29f

feat: Wait 1 second after init load before prefetch

0559656

feat: Close sentry to avoid sending errors when offline

5ec24f5

auth helpers refactor

20a6629

only set aspect ratio for cover or avatars

602902f

implement: AttachmentsTable thumbnail click open carousel

46499dd

refactor: Optional names for columns

f0d6675

improve: attachment carousel & attachment item preview

7bbee20

improve: AttachmentPreview

bab3d80

add: support for multiple attachment

454f516

imado fix

8226c17

refactor: Refactor schemas

54dab03

small text fix

b4b9422

refactor: Refactor attachments sync

16d382d

improve: newsletter blocknote

e67e3e2

fix: drizzle generate and update migrations

2d34e78

github-advanced-security bot found potential problems Nov 8, 2024

View reviewed changes

LemonardoD and others added 11 commits November 8, 2024 10:42

update blocknote dep

b2225a6

fixes: blocknote upload panel

7bdfae2

align blocknote with raak

7defd22

naming fix

ac81e1d

update common types

faf3e97

implement: blocknote attachments preview on alt and mouse click on fi…

b544b13

…le el

fix

e374214

cella config name fork

450addc

raak

4aad669

be util cleanup

1c170d6

Merge pull request #255 from cellajs/pr-branch-1731080247722

45462d9

Pr branch 1731080247722

flipvh and others added 8 commits November 11, 2024 10:13

text fix

68a99a1

fix: blocknote slash & format menu usage in sheet

a79f6d4

fix: org newsletter form

96c2e9d

align carousel refactor from raak

fe3ef28

feat: Electric proxy (#253)

6a2d06e

* feat: Electric proxy * + * fix: Fix electric proxy

fix: query offset on search

fcd2bda

fix: offset of a new query on filter by role

a06c389

styling tweak

3af7c18

flipvh merged commit e5a7f02 into main Nov 11, 2024
3 checks passed

@@ -1,8 +1,12 @@
             import MediaThemeSutroAudio from 'player.style/sutro-audio/react';
+            import DOMPurify from 'dompurify';
-            export const AudioPreview = ({ src }: { src: string }) => (
-              <MediaThemeSutroAudio className="w-[70%] p-2 max-h-10">
-                {/* biome-ignore lint/a11y/useMediaCaption: by author */}
-                <audio slot="media" src={src} playsInline crossOrigin="anonymous" />
-              </MediaThemeSutroAudio>
-            );
+            export const AudioPreview = ({ src }: { src: string }) => {
+              const sanitizedSrc = DOMPurify.sanitize(src);
+              return (
+                <MediaThemeSutroAudio className="w-[70%] p-2 max-h-10">
+                  {/* biome-ignore lint/a11y/useMediaCaption: by author */}
+                  <audio slot="media" src={sanitizedSrc} playsInline crossOrigin="anonymous" />
+                </MediaThemeSutroAudio>
+              );
+            };

@@ -4,2 +4,3 @@
             import ReactPanZoom from '~/modules/common/image-viewer';
+            import DOMPurify from 'dompurify';
@@ -24,2 +25,3 @@
             }: AttachmentItemProps) => {
+              const sanitizedSource = DOMPurify.sanitize(source);
               return (
@@ -28,9 +30,9 @@
                     (imagePanZoom ? (
-                      <ReactPanZoom image={source} alt={altName} imageClass={itemClassName} showButtons={showButtons} />
+                      <ReactPanZoom image={sanitizedSource} alt={altName} imageClass={itemClassName} showButtons={showButtons} />
                     ) : (
-                      <img src={source} alt={altName} className={`${itemClassName} w-full h-full`} />
+                      <img src={sanitizedSource} alt={altName} className={`${itemClassName} w-full h-full`} />
                     ))}
-                  {type.includes('audio') && <AudioPreview src={source} />}
-                  {type.includes('video') && <VideoPreview src={source} />}
-                  {type.includes('pdf') && <PreviewPDF file={source} />}
+                  {type.includes('audio') && <AudioPreview src={sanitizedSource} />}
+                  {type.includes('video') && <VideoPreview src={sanitizedSource} />}
+                  {type.includes('pdf') && <PreviewPDF file={sanitizedSource} />}
                 </div>

@@ -1,8 +1,12 @@
             import MediaThemeSutro from 'player.style/sutro/react';
+            import DOMPurify from 'dompurify';
-            export const VideoPreview = ({ src }: { src: string }) => (
-              <MediaThemeSutro className="w-full p-4">
-                {/* biome-ignore lint/a11y/useMediaCaption: by author */}
-                <video slot="media" src={src} playsInline crossOrigin="anonymous" />
-              </MediaThemeSutro>
-            );
+            export const VideoPreview = ({ src }: { src: string }) => {
+              const sanitizedSrc = DOMPurify.sanitize(src);
+              return (
+                <MediaThemeSutro className="w-full p-4">
+                  {/* biome-ignore lint/a11y/useMediaCaption: by author */}
+                  <video slot="media" src={sanitizedSrc} playsInline crossOrigin="anonymous" />
+                </MediaThemeSutro>
+              );
+            };

@@ -3,3 +3,3 @@
             import { type Slides, openCarouselDialog } from '~/modules/common/carousel/carousel-dialog';
+            import DOMPurify from 'dompurify';
             export const getContentAsString = (blocks: Block[]) => {
@@ -55,3 +55,3 @@
               for (const element of elementsWithDataUrl) {
-                const url = element.getAttribute('data-url');
+                const url = DOMPurify.sanitize(element.getAttribute('data-url'));
                 const contentType = element.getAttribute('data-content-type') || 'file';

@@ -3,2 +3,3 @@
             import { type Slides, openCarouselDialog } from '~/modules/common/carousel/carousel-dialog';
+            import DOMPurify from 'dompurify';
@@ -55,3 +56,3 @@
               for (const element of elementsWithDataUrl) {
-                const url = element.getAttribute('data-url');
+                const url = DOMPurify.sanitize(element.getAttribute('data-url'));
                 const contentType = element.getAttribute('data-content-type') || 'file';

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Development #254

Development #254

flipvh commented Nov 8, 2024

Provide additional feedback

Please help us improve GitHub Copilot by sharing more details about this comment.

Provide additional feedback

Please help us improve GitHub Copilot by sharing more details about this comment.

Provide additional feedback

Please help us improve GitHub Copilot by sharing more details about this comment.

Provide additional feedback

Please help us improve GitHub Copilot by sharing more details about this comment.

Provide additional feedback

Please help us improve GitHub Copilot by sharing more details about this comment.

Provide additional feedback

Please help us improve GitHub Copilot by sharing more details about this comment.

Development #254

Development #254

Conversation

flipvh commented Nov 8, 2024