Sanitize HTML

composer.json

@@ -27,6 +27,7 @@
         "league/commonmark": "^2.4",
         "masterminds/html5": "^2.8",
         "spatie/image-optimizer": "^1.6",
+        "symfony/html-sanitizer": "^7.3",
         "tightenco/ziggy": "^2.0"
     },
     "require-dev": {

demo/composer.json

@@ -17,6 +17,7 @@
         "pragmarx/google2fa": "^8.0",
         "spatie/image-optimizer": "^1.6",
         "spatie/laravel-translatable": "^6.0",
+        "symfony/html-sanitizer": "^7.3",
         "technikermathe/blade-lucide-icons": "^3.98",
         "tightenco/ziggy": "^1.8"
     },

docs/guide/building-entity-list.md

@@ -53,6 +53,10 @@ Setting the label, allowing the column to be sortable and to display html is opt
 The optional `->setWidth()` method accepts either an integer (eg: `20` for 20%), a float (eg: `.2` for 20%) or a string (eg: `'20'` or `'20%'`); if missing, it will be deduced (you can use `->setWidthFill()` to force this last behavior).
 To hide the column on small screens, use `->hideOnSmallScreens()`.
 
+::: warning
+HTML sanitization is enabled by default for list fields (to prevent XSS attacks when displaying the list). You can disable it by using `->setSanitizeHtml(false)` field method.
+:::
+
 Sorting columns must be handled in the `getListData()` method, see below.
 
 #### Add a badge field

docs/guide/form-fields/editor.md

@@ -55,6 +55,10 @@ SharpFormEditorField::make("description")
      ]);
 ```
 
+::: warning
+HTML included using RAW_HTML button is not sanitized.
+:::
+
 If you have editor embeds you can add them to the toolbar alongside other buttons (instead of the embeds dropdown) :
 
 ```php
@@ -91,6 +95,10 @@ Unset the max character count.
 
 Display a character count in the status bar. Default is false.
 
+### `setSanitizeHtml(bool $sanitizeHtml = true)`
+
+Toggle HTML sanitization (enabled by default). See [security](#security).
+
 ## Embed images and files in content
 
 The Editor field can embed images or regular files. To use this feature, you must first allow the field to handle uploads:
@@ -245,6 +253,10 @@ This method expects an array of embeds that could be inserted in the content, de
 
 The [documentation on how to write an Embed class is available here](../form-editor-embeds.md).
 
+## Security
+
+Editor content is sanitized by default before storing the data (to prevent XSS attack when displaying HTML content). To disable sanitizing you can call `->setSanitizeHtml(false)`.
+
 ## Formatter
 
 - `toFront`: expects a string; will extract embedded files for the front.

docs/guide/form-fields/text.md

@@ -32,6 +32,9 @@ Set a max character count.
 
 Unset the max character count.
 
+### `setSanitizeHtml()`
+
+Enable HTML sanitization (to prevent XSS attacks if this field data is used as raw HTML).
 
 ## Formatter
 

docs/guide/form-fields/textarea.md

@@ -16,8 +16,11 @@ Set a max character count.
 
 Unset the max character count.
 
+### `setSanitizeHtml()`
+
+Enable HTML sanitization (to prevent XSS attacks if this field data is used as raw HTML).
 
 ## Formatter
 
 - `toFront`: expect a string.
-- `fromFront`: returns a string.
+- `fromFront`: returns a string.

docs/guide/show-fields/text.md

@@ -20,12 +20,18 @@ Reset the collapse configuration.
 
 By default, the text is escaped. If you want to display HTML, set this to true.
 
+### `setSanitizeHtml(bool $sanitizeHtml = true)`
+
+HTML sanitization is enabled by default for text fields (to prevent XSS attacks when displaying the show). To disable it, call `->setSanitizeHtml(false)`.
+
+
 ### `allowEmbeds(array $embeds)`
 
 This method expects an array of embeds that could be inserted in the content, declared as full class names. An embed class must extend `Code16\Sharp\Form\Fields\Embeds\SharpFormEditorEmbed`.
 
 The [documentation on how to write an Embed class is available here](../form-editor-embeds.md).
 
+
 ## Transformer
 
 For markdown-formatted texts, be sure to use the built-in `MarkdownAttributeTransformer`:

package.json

@@ -68,6 +68,7 @@
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.1",
     "cropperjs": "^1.5.12",
+    "dompurify": "^3.2.6",
     "filesize": "^10.1.0",
     "flexsearch": "^0.7.43",
     "leaflet": "^1.9.4",

resources/js/Pages/Show/Show.vue

@@ -44,6 +44,7 @@
     import { useEntityListHighlightedItem } from "@/composables/useEntityListHighlightedItem";
     import RootCardHeader from "@/components/ui/RootCardHeader.vue";
     import StateBadge from "@/components/ui/StateBadge.vue";
+    import { sanitize } from "@/utils/sanitize";
 
     const props = defineProps<{
         show: ShowData,
@@ -179,7 +180,11 @@
                                                 <div class="flex flex-wrap gap-4">
                                                     <div class="flex gap-4">
                                                         <template v-if="section.title || (i == 0 && show.getTitle(locale))">
-                                                            <CardTitle :id="`section-${i}-title`" class="py-1 -my-1" v-html="section.title || (i == 0 && show.getTitle(locale))">
+                                                            <CardTitle
+                                                                :id="`section-${i}-title`"
+                                                                class="py-1 -my-1"
+                                                                v-html="section.title || (i == 0 && sanitize(show.getTitle(locale)))"
+                                                            >
                                                             </CardTitle>
                                                         </template>
                                                         <template v-if="section.collapsable">

resources/js/entity-list/components/EntityList.vue

@@ -69,6 +69,7 @@
     import { useElementVisibility } from "@vueuse/core";
     import StateBadge from "@/components/ui/StateBadge.vue";
     import Icon from "@/components/ui/Icon.vue";
+    import { sanitize } from "@/utils/sanitize";
     // import StateBadgeTest from "@/components/dev/StateBadgeTest.vue";
 
     const props = withDefaults(defineProps<{
@@ -782,7 +783,7 @@
                                                             <template v-if="field.html && typeof item[field.key] === 'string'">
                                                                 <Content class="break-words [&_a]:relative [&_a]:z-10"
                                                                     :class="{ '[&_a]:pointer-events-none': selecting || reordering }"
-                                                                    :html="item[field.key]"
+                                                                    :html="field.sanitize ? sanitize(item[field.key]) : item[field.key]"
                                                                 />
                                                             </template>
                                                             <template v-else>

resources/js/show/components/fields/text/Text.vue

@@ -10,6 +10,7 @@
     import { useParentShow } from "@/show/useParentShow";
     import { ContentUploadManager } from "@/content/ContentUploadManager";
     import { Button } from "@/components/ui/button";
+    import { sanitize } from "@/utils/sanitize";
 
     const props = defineProps<ShowFieldProps<ShowTextFieldData>>();
 
@@ -74,7 +75,7 @@
         <template v-if="currentContent && field.html">
             <TextRenderer
                 class="content content-sm text-sm [:where(&)_:where(h1,h2,h3)]:text-foreground/75"
-                :content="currentContent"
+                :content="field.sanitize ? sanitize(currentContent) : currentContent"
                 :field="field"
             />
         </template>

resources/js/types/generated.d.ts

@@ -184,6 +184,7 @@ export type EntityListFieldData = {
   width: string | null;
   hideOnXS: boolean;
   html: boolean | null;
+  sanitize: boolean | null;
   tooltip: string | null;
 };
 export type EntityListItemMeta = {
@@ -881,6 +882,7 @@ export type ShowTextFieldData = {
   type: "text";
   emptyVisible: boolean;
   html: boolean;
+  sanitize: boolean;
   localized: boolean | null;
   collapseToWordCount: number | null;
   embeds: { [key: string]: EmbedData } | null;

resources/js/utils/sanitize.ts

@@ -0,0 +1,12 @@
+import DOMPurify from 'dompurify';
+
+export function sanitize(html: string | null) {
+    return html
+        ? DOMPurify.sanitize(html, {
+            CUSTOM_ELEMENT_HANDLING: {
+                tagNameCheck: () => true,
+                attributeNameCheck: () => true,
+            }
+        })
+        : html;
+}

src/Data/EntityList/EntityListFieldData.php

@@ -19,6 +19,7 @@ public function __construct(
         public ?string $width,
         public bool $hideOnXS,
         public ?bool $html = null,
+        public ?bool $sanitize = null,
         public ?string $tooltip = null,
     ) {}
 }

src/Data/Show/Fields/ShowTextFieldData.php

@@ -24,6 +24,7 @@ public function __construct(
         public ShowFieldType $type,
         public bool $emptyVisible,
         public bool $html,
+        public bool $sanitize,
         public ?bool $localized = null,
         public ?int $collapseToWordCount = null,
         /** @var array<string, EmbedData> */

src/EntityList/Fields/EntityListField.php

@@ -2,17 +2,21 @@
 
 namespace Code16\Sharp\EntityList\Fields;
 
+use Code16\Sharp\Utils\Sanitization\IsSharpFieldWithHtmlSanitization;
+use Code16\Sharp\Utils\Sanitization\SharpFieldWithHtmlSanitization;
 use Illuminate\Contracts\Support\Arrayable;
 
-class EntityListField implements Arrayable, IsEntityListField
+class EntityListField implements Arrayable, IsEntityListField, IsSharpFieldWithHtmlSanitization
 {
     use HasCommonEntityListFieldAttributes;
+    use SharpFieldWithHtmlSanitization;
 
     protected bool $html = true;
 
     private function __construct(string $key)
     {
         $this->key = $key;
+        $this->sanitizeHtml = true;
     }
 
     public static function make(string $key): self
@@ -51,6 +55,7 @@ public function toArray(): array
             'label' => $this->label,
             'sortable' => $this->sortable,
             'html' => $this->html,
+            'sanitize' => $this->sanitizeHtml,
             'width' => $this->width,
             'hideOnXS' => $this->hideOnXs,
         ];

src/Form/Fields/Formatters/EditorFormatter.php

@@ -5,10 +5,13 @@
 use Code16\Sharp\Exceptions\Form\SharpFormFieldDataException;
 use Code16\Sharp\Form\Fields\SharpFormEditorField;
 use Code16\Sharp\Form\Fields\SharpFormField;
+use Code16\Sharp\Utils\Sanitization\FormatsSanitizedValue;
 use Illuminate\Support\Collection;
 
 class EditorFormatter extends SharpFieldFormatter implements FormatsAfterUpdate
 {
+    use FormatsSanitizedValue;
+
     /**
      * @param  SharpFormEditorField  $field
      *
@@ -48,7 +51,10 @@ public function fromFront(SharpFormField $field, string $attribute, $value)
         $text = $this->maybeLocalized(
             $field,
             $value['text'] ?? null,
-            fn (string $content) => preg_replace('/\R/u', "\n", $content)
+            fn (string $content) => $this->sanitizeHtmlIfNeeded(
+                $field,
+                preg_replace('/\R/u', "\n", $content)
+            )
         );
         $text = $this->editorUploadsFormatter()->fromFront($field, $attribute, [...$value, 'text' => $text]);
         $text = $this->editorEmbedsFormatter()->fromFront($field, $attribute, [...$value, 'text' => $text]);

src/Form/Fields/Formatters/TextFormatter.php

@@ -5,9 +5,12 @@
 use Code16\Sharp\Exceptions\Form\SharpFormFieldDataException;
 use Code16\Sharp\Form\Fields\SharpFormField;
 use Code16\Sharp\Form\Fields\SharpFormTextField;
+use Code16\Sharp\Utils\Sanitization\FormatsSanitizedValue;
 
 class TextFormatter extends AbstractSimpleFormatter
 {
+    use FormatsSanitizedValue;
+
     /**
      * @param  SharpFormTextField  $field
      *
@@ -25,6 +28,10 @@ public function toFront(SharpFormField $field, $value)
      */
     public function fromFront(SharpFormField $field, string $attribute, $value)
     {
-        return $this->maybeLocalized($field, $value);
+        return $this->maybeLocalized(
+            $field,
+            $value,
+            fn (string $content) => $this->sanitizeHtmlIfNeeded($field, $content)
+        );
     }
 }