diff --git a/README.md b/README.md index 5d3005b..1d9519a 100644 --- a/README.md +++ b/README.md @@ -231,60 +231,6 @@ The resulting HTML data will look as follows: ```HTML

This is text.

``` -
-
- -#####

You can pass the option `skipURLSanitization` as true to bypass the validation checks and sanitization for the src URLs of JSON element types - social embed and embed.

-
By default, this option is set to false.
- -#### Examples: - - 1. For the following JSON, with src url containing script tags - ```JSON - { - "type": "doc", - "attrs": {}, - "children": [ - { - "type": "social-embeds", - "attrs": { - "src": "https://www.youtube.com/watch?v=Gw7EqoOYC9A\"> -``` - -2. For any JSON containing src urls violating expected protocols, the src attribute will be removed when converted to HTML - - ```JSON - { - "type": "doc", - "attrs": {}, - "children": [ - { - "type": "social-embeds", - "attrs": { - "src": "www.youtube.com/watch?v=Gw7EqoOYC9A\">", - "width": 560, - "height": 320 - }, - } - ] - } -``` -The resulting HTML: -```HTML - -``` - -
### Convert HTML to JSON @@ -411,6 +357,8 @@ The resulting JSON-formatted data will look as follows: ## Automatic Conversion +> **_Note_**: `src` url's provided for social-embeds and embed items will by default be uri encoded. + By default, the JSON Rich Text Editor field supports limited HTML tags within the editor. Due to this, the JSON RTE Serializer tool is not able to recognize each and every standard HTML tag. To help the JSON RTE Serializer recognize and process additional tags that are commonly used across HTML, you can use the automatic conversion option. When using this option, you need to pass the `allowNonStandardTags: true` parameter within the `jsonToHtml` or `htmlToJson` method to manipulate the working of the JSON RTE Serializer package as per your requirements. When you pass this parameter, it customizes your JSON RTE Serializer code to allow the support for all standard HTML-recognized tags or element types in the JSON Rich Text Editor field. diff --git a/package.json b/package.json index 717fc0e..53cd1a6 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@contentstack/json-rte-serializer", - "version": "2.1.0", + "version": "2.0.13", "description": "This Package converts Html Document to Json and vice-versa.", "main": "lib/index.js", "module": "lib/index.mjs", diff --git a/src/toRedactor.tsx b/src/toRedactor.tsx index 4519914..b7b1c8e 100644 --- a/src/toRedactor.tsx +++ b/src/toRedactor.tsx @@ -498,17 +498,9 @@ export const toRedactor = (jsonValue: any,options?:IJsonToHtmlOptions) : string figureStyles.fieldsEdited.push(figureStyles.caption) } - if (!options?.skipURLSanitization && (jsonValue['type'] === 'social-embeds' || jsonValue['type'] === 'embed')) { - const sanitizedHTML = DOMPurify.sanitize(allattrs['src']); - - const urlMatch = sanitizedHTML.match(/https?:\/\/[^\s"'<>()]+/); - - if (urlMatch) { - attrsJson['src'] = decodeURIComponent(urlMatch[0]); - } else { - delete attrsJson['src']; - } - } + if (jsonValue['type'] === 'social-embeds' || jsonValue['type'] === 'embed') { + attrsJson['src'] = encodeURI(allattrs['src']); + } if(!(options?.customElementTypes && !isEmpty(options.customElementTypes) && options.customElementTypes[jsonValue['type']])) { delete attrsJson['url'] diff --git a/src/types.ts b/src/types.ts index c531d28..adb3785 100644 --- a/src/types.ts +++ b/src/types.ts @@ -20,5 +20,4 @@ export interface IJsonToHtmlOptions { customElementTypes?: IJsonToHtmlElementTags, customTextWrapper?: IJsonToHtmlTextTags, allowNonStandardTypes?: boolean, - skipURLSanitization?:boolean } diff --git a/test/expectedJson.ts b/test/expectedJson.ts index 8202d8b..fa21d5a 100644 --- a/test/expectedJson.ts +++ b/test/expectedJson.ts @@ -2002,9 +2002,10 @@ export default { }, "RT-360":{ "html": [ - ``, + ``, ``, - '', + '', + `` ], "json": [ @@ -2057,7 +2058,7 @@ export default { "uid": "45a850acbeb949db86afe415625ad1ce", "type": "social-embeds", "attrs": { - "src": null, + "src": "", "width": 560, "height": 320 }, @@ -2077,7 +2078,7 @@ export default { "uid": "87fed1cc68ce435caa0f71d17788c618", "type": "embed", "attrs": { - "src": null, + "src": "", "redactor-attributes": { "allowfullscreen": true } @@ -2127,6 +2128,46 @@ export default { } ], "_version": 1 + }, + { + "type": "doc", + "attrs": {}, + "uid": "18396bf67f1f4b0a9da57643ac0542ca", + "children": [ + { + "uid": "45a850acbeb949db86afe415625ad1ce", + "type": "social-embeds", + "attrs": { + "src": "https://www.youtube.com/embed/Gw7EqoOYC9A?si=bWdnezma6qFAePQU", + "width": 560, + "height": 320 + }, + "children": [ + { + "text": "" + } + ] + }, + { + "uid": "d3c2ab78a5e547b082f95dc01123b0c1", + "type": "doc", + "_version": 11, + "attrs": {}, + "children": [ + { + "uid": "87fed1cc68ce435caa0f71d17788c618", + "type": "embed", + "attrs": { + "src": "https://www.youtube.com/embed/Gw7EqoOYC9A?si=bWdnezma6qFAePQU", + "redactor-attributes": { + "allowfullscreen": true + } + } + } + ] + } + ], + "_version": 1 } ] diff --git a/test/toRedactor.test.ts b/test/toRedactor.test.ts index f5d6b49..87e5471 100644 --- a/test/toRedactor.test.ts +++ b/test/toRedactor.test.ts @@ -250,7 +250,7 @@ describe("Testing json to html conversion", () => { }) describe("RT-360", () =>{ - it("should remove script and/or other tags from src links in HTML for social-embeds", () => { + it("should encode and not render invalid src urls", () => { const json = expectedValue["RT-360"].json[0] const html = toRedactor(json); expect(html).toBe(expectedValue["RT-360"].html[0]); @@ -262,11 +262,17 @@ describe("Testing json to html conversion", () => { expect(html).toBe(expectedValue["RT-360"].html[1]); }) - it("should handle src without protocol",()=>{ + it("should handle src urls without protocol",()=>{ const json = expectedValue["RT-360"].json[2] const html = toRedactor(json); expect(html).toBe(expectedValue["RT-360"].html[2]); }) + + it("should work only for valid embed urls",()=>{ + const json = expectedValue["RT-360"].json[3] + const html = toRedactor(json); + expect(html).toBe(expectedValue["RT-360"].html[3]); + }) }) test('should convert numeric width to string', () => {