Does tiptap sanitize input/output by default?

[shyakadavis]

Hi;

This is sort of a naive question, and it's been a while since I used tiptap. I remember last time around being some warnings/discussions about how it [tiptap] doesn't sanitize input, and it's up to the dev to fix that.

If it doesn't sanitize by default, what are your recommendations on validating/sanitizing user input?

I know this question is better asked over there, but was hoping to gather your thoughts.

Thanks again for the lib. 🙂

[sibiraj-s]

Nope. Tiptap doesn't include sanitization by default.

But in most cases, you don't need it.

Sure, Yeah, as said, this library is just to make Tiptap work with svelte smoothly; it doesn't take any other overheads. And the question might be a better fit on the tiptap repo.

My thoughts on sanitization would be that it doesn't matter whether the client sanitzes the content or not; one has to validate/sanitize user inputs on the server before processing them. Even if the client implements sanitization, sometimes it is hard or complex to get exactly the same output that the client library and server library produce.

And to implement sanitization, you may be able to do these things:

1. Verify your schema to make sure only elements that are expected are present; this negates the purpose of having a sanitizer to the maximum extent. because Prosemirror (which powers tiptap) either removes unexpected elements that don't match the schema or doesn't process them at all.
2. You could use libraries like santize-html or DomPurify right before its sent to server

There is also a vague mention on security in Titptap docs https://tiptap.dev/docs/editor/guide/output#security

[shyakadavis]

Hi, @sibiraj-s;

On the matter of validation, I was curious about this;

How can I check against whitespace/empty <p> tags? Right now, I have this editor whereby simple pressing enter a bunch of time effectively registers empty <p></p> tags in the output/content that I send to my DB.

Is there anyway that you know of to validate/enforce a min & max length of valid text, not just p tags?

Btw, I mentioned this last time, but this lib is so awesome. Integration with Svelte/Kit is the simplest I've seen. It works splendidly with other libs like shadcn-svelte, & formsnap. Thanks a bunch. 🙂

[shyakadavis]

Hmm... got around to this, not confident in it, but it works, for now. If you know of a tiptap built-in solution, that would be great.

// path_to_zod_schema

import { any, coerce, literal, object, preprocess, string, type infer as z_infer } from 'zod';

const trim_string = (u: unknown) => {
	if (typeof u === 'string') {
		// Remove empty <p></p> tags
		const without_empty_p_tags = u.replace(/<p>\s*<\/p>/gi, '');
		// Trim and normalize spaces
		const trimmed = without_empty_p_tags.trim().replace(/\s\s+/g, ' ');
		return trimmed;
	} else {
		return u;
	}
};

export const project_schema = object({
	name: string()
		.min(2, { message: 'Name must be at least 2 characters!' })
		.max(64, { message: 'Name must be at most 64 characters!' }),
	tagline: string()
		.min(2, { message: 'Tagline must be at least 2 characters!' })
		.max(64, { message: 'Tagline must be at most 64 characters!' }),
	description: preprocess(
		trim_string,
		string()
			.min(100, { message: 'Description must be at least 100 characters!' })
			.max(1000, { message: 'Description must be at most 1000 characters!' })
	),
	url: string().url({ message: 'Please provide a valid URL!' }),
	stage: string().min(2, { message: 'Please select a valid stage!' }),
	category: string().min(2, { message: 'Please add at least 1 category!' }),
	twitter: string().url().optional().or(literal('')),
	github: string().url().optional().or(literal('')),
	mrr: coerce
		.number({ invalid_type_error: 'Please provide a valid number!' })
		.gte(0, { message: 'MRR must at least 0!' })
		.lt(1000000000, { message: "Wait, you're making more than $1 billion a month?!🤡" })
		.optional(),
	thumbnail: any().optional()
});

export const edit_project_schema = project_schema.partial();

Leaving it here just in case it helps inform a different solution and not a hack like this (if you can even call it a hack)

[sibiraj-s]

Thank you for the kind words.

Not sure if tiptap has something built in. But, I have this other project which is directly built with prosemirror, the same one that powers Tiptap. May be it can give some directions in addition to your solution?

ngx-editor/validators

There is also a characterCount extension. https://tiptap.dev/docs/editor/api/extensions/character-count. Haven't used it yet. may be that would be of some help in addition to validation