if you know the content inside the CMS is safe, sure u can use that

I tend to work with CMS where the editor can type richtext / markdown and is served over JSON

Alright, thanks. Will check that out as well

if, however, the cms content could contain XSS, please ensure you take appropriate measures to remove the dangerous html

Hmmm

basically

who is editing the content in cms

I suppose, can use both depending on the circumstance right

i mean it wont hurt for sure.

Can't trust people you hire either that could sabotage things or leak their password - say they are moderators

yes all depends who they are.

usually my sites are client owned, so they only edit the content etc

Yeah, that's the same case here

but sounds like ur case might need some tighter security.

but

it can expand overtime

yeah implement the logic now

rather than 2months down the line 😛

Hmmmm. I wonder with this, would you use this in an WSWYGI editor, and when rendering the article content itself, use DOM Purify - or, if you going to make the edits to the html, its going to be text anyway, so its not lik eyou will conver the string/text to a dom node either when showing that in an editor right

This is one thing I always mislooked, so just want to do it properly and think over 😄

well react render markup converts string html WYSIWYG to normal html markup

so before you pass the json into the render function

strip dangerous tags

So its pretty much the same as the other lib right

this sanitizes it

https://www.npmjs.com/package/react-render-markup this can render string html -> html

so sanitise -> render

Ahhhhhhh, for the render part I do it like that

 <div className="prose mx-autoprose mx-auto" dangerouslySetInnerHTML={{ __html: DOMPurify.sanitize(data?.body, { sanitize: true }) }} />`

with the DOMPurify

is that any different than just using react-render-markup that displays it as well

that will probably work

well

the beauty of package i sent

so it has some built in level of stripping.

Interesting

but u can really extend it.

e,g if u need a tags to render next Link

or perhaps table element to render responsive table.js

you can easily do it instead of writing crazy selector/replace logic

Oh

I see

that seems useful

it is very useless

Is it?

supports SSR too

You mean useful right xD

sorry

lmao

yes

useful!

😄

long day

I think I'll use that

You sold it

That seems like it

gonna need to replace some of these a to Link

I think

actually

yeah well the package will help, just make sure to sanitize it as per the guide

to be extra safe.

So you do DOMPurify and then use that there

I'm half dead myself today xD

didn't sleep a day, and now just recovering 😛

the npm package recommended to use any html sanitzier

Which one is it? 😄

i have never heard of dom purify tbh

well, there's lots haha, i guess you can read a few and decide what has best feature/size and support (last update?)

Do you use anything like that?

There is this https://www.npmjs.com/package/sanitize-html

yeah should work

Alright, awesome! Thanks you very much for that.

I'll go and peace these two things together! 🧑‍🍳

gl, hf 🙂

Ty ^^ 🏎️

@Reddish carpenter ant please mark the solution to this thread

Quick question, but how do you add TypeScript to this?

Could not find a declaration file for module 'react-render-markup'. 'c:/Users/aurel/Desktop/WebDev/ziti.io/node_modules/react-render-markup/dist/react-render-markup.js' implicitly has an 'any' type.
  Try `npm i --save-dev @types/react-render-markup` if it exists or add a new declaration (.d.ts) file containing `declare module 'react-render-markup';`

And that doesn't exist

you need to declare the type yourself. something like

declare module "react-render-markup" {
  export function Markup(...): ...;
  export function renderMarkup(...): ...;
}

Where would you do this?

Not familliar with this. I would just need to define the types of the props being passed right?

so from the documentation of the package, you figure out the type of Markup and/or renderMarkup. just need to figure out the type of the function you use so if you don't need renderMarkup then ignore it.

then write the declare module statement like above, and put it in any typescript files (or any .dts files). for example i'd put it in src/types/fix/react-render-markup.ts. you don't even need to import this file anywhere, just create the file and add this content in

this is also how you can fix the types of packages if the typing they provide is incorrect or inadequate

for example, if Markup is a react component that takes one prop name as a string, and you don't use renderMarkup, then

declare module "react-render-markup" {
  export function Markup({ name }: { name: string }): JSX.Element;
}

ofc the real Markup's props is not this, i leave this as an exercise for you to complete

Ah, I see! That, fair enough - thank you! Basically just normal TS but wrapped around declare module

yup