@storyblok/richtext - npm Package Compare versions

Comparing version 0.4.1 to 1.0.0

package.json

 {
   "name": "@storyblok/richtext",
   "type": "module",
-  "version": "0.4.1",
+  "version": "1.0.0",
   "packageManager": "pnpm@9.1.4",
@@ -57,4 +57,4 @@ "description": "Storyblok RichText Resolver",
     "@vitejs/plugin-basic-ssl": "^1.1.0",
-    "@vitest/coverage-v8": "^2.0.3",
-    "@vitest/ui": "^2.0.3",
+    "@vitest/coverage-v8": "^2.0.4",
+    "@vitest/ui": "^2.0.4",
     "eslint-config-prettier": "^9.1.0",
@@ -67,10 +67,10 @@ "eslint-plugin-vue": "^9.27.0",
     "release-it": "^17.6.0",
-    "typescript": "^5.5.3",
-    "vite": "^5.3.4",
+    "typescript": "^5.5.4",
+    "vite": "^5.3.5",
     "vite-plugin-banner": "^0.7.1",
-    "vite-plugin-dts": "4.0.0-beta.1",
+    "vite-plugin-dts": "4.0.0-beta.2",
     "vite-plugin-inspect": "^0.8.5",
     "vite-plugin-qrcode": "^0.2.3",
-    "vitest": "^2.0.3",
-    "vue": "^3.4.32"
+    "vitest": "^2.0.4",
+    "vue": "^3.4.34"
   },
@@ -77,0 +77,0 @@ "lint-staged": {

README.md

@@ -119,2 +119,73 @@ ![](/.github/repo-banner.png)
 
+## Optimize Images
+
+To optimize images in the richtext, you can use the `optimizeImages` property on the `richTextResolver` options. For the full list of available options, check the [Image Optimization](https://github.com/storyblok/storyblok-js-client?tab=readme-ov-file#method-storyblokrichtextresolverrender) documentation.
+
+```ts
+import { richTextResolver } from '@storyblok/richtext'
+
+const html = richTextResolver({
+  optimizeImages: {
+    class: 'my-peformant-image',
+    loading: 'lazy',
+    width: 800,
+    height: 600,
+    srcset: [400, 800, 1200, 1600],
+    sizes: ['(max-width: 400px) 100vw', '50vw'],
+    filters: {
+      format: 'webp',
+      blur: 120
+      quality: 10,
+      grayscale: true,
+      blur: 10,
+      brightness: 10,
+    },
+  },
+}).render(doc)
+```
+
+## Security: HTML Output Sanitization
+
+> [!WARNING]  
+> This package does not provide proper HTML sanitization by default
+
+The `@storyblok/richtext` package primarly converts rich text content into HTML strings, which can then be rendered into the DOM of a web page. This means that any HTML output generated by the rich text resolver includes the raw content as it is defined in Storyblok, which may potentially include harmful or malicious scripts.
+
+### Why is Sanitization Important?
+
+Injecting unsanitized HTML into your web application can expose it to cross-site scripting (XSS) attacks. XSS attacks can allow attackers to execute malicious scripts in the context of your website, potentially leading to data theft, session hijacking, and other security breaches.
+
+### Your Responsibility
+
+As a developer using `@storyblok/richtext`, you are responsible for sanitizing the HTML output from the rich text resolver before injecting it into the DOM. This precaution helps prevent XSS attacks and ensures a safer web environment for your users.
+
+### Recommended Sanitization Libraries
+
+To assist you in sanitizing HTML content, we recommend using the following library:
+
+- **sanitize-html**: A simple HTML sanitizer with a flexible API that can adjust to a wide range of applications.
+  
+  GitHub: [sanitize-html](https://github.com/apostrophecms/sanitize-html) 
+
+### Example Usage
+
+Here is an example of how you might sanitize HTML output using `sanitize-html` before rendering it to the DOM:
+
+```javascript
+import sanitizeHtml from 'sanitize-html';
+import { richTextResolver } from '@storyblok/richtext';
+
+const html = richTextResolver().render(yourRichTextContent);
+const sanitizedHTML = sanitizeHtml(html, {
+    allowedTags: sanitizeHtml.defaults.allowedTags.concat(['img', 'figure', 'figcaption']),
+    allowedAttributes: {
+        ...sanitizeHtml.defaults.allowedAttributes,
+        'img': ['src', 'alt', 'title']
+    }
+});
+
+document.getElementById('your-element-id').innerHTML = sanitizedHTML;
+```
+
+
 ## Setup
@@ -121,0 +192,0 @@

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

35141

increased by8.62%

Number of low quality alerts

1

decreased by-50%

Number of lines in readme file

284

increased by33.33%

No dependency changes