allowing users to add html formatted notes

We want to allow the users of our web application, to leave notes formatted with html.

On client side we are providing them with ckeditor [http://ckeditor.com/] which is a wisywig editor that generates html, that is then submitted to the server via a form

We then want to display the notes created by the users, with exactly the same formatting as they submitted them

My concerns are:

1. Putting attacks and bad intentions aside, how can I encapsulate the note when displayed on the site, so that a. They don't inherit the design from the rest of the page b. They don't influence the rest of the page, for example by opening and not closing a tag accidentally, or closing without opening.

2. Malicious code injection attacks

At the moment, the first is much more important, as it's an in house product for our clients, and is not open to the wide public. But security comments are very wellcome as well

Possible solutions 开发者_开发问答that I consider are:

1. Ideally, I look for a way to encapsulate this pieces of user html, like : inside this area I show what you submitted (rendered, not source), you cannot influence and are not influenced by the code on other parts of the page

Specifically, we thought of displaying the notes inside iframes.

1. Other natural direction is dealing with parsing the inserted contents, and stripping out stuff.

Any inputs are welcome, and mainly:

• How can I "encapsulate" the inserted contents, if I can?

• Any comments on the iframe direction

• Do I have to parse the contents anyway? What do I absolutely have to strip out?

How can I "encapsulate" the inserted contents, if I can?

The truth is unless you 'fix' their code (via some kind of check) you will get issues (think broken divs, etc). I don't see how you can encapsulate HTML FROM HTML. I would however only let them put in content like bold, italicize, center, etc;

Any comments on the iframe direction

Personally I wouldn't go that route, new can of worms for security and not a 'clean' way of doing this.

Do I have to parse the contents anyway? What do I absolutely have to strip out?

Yes don't be lazy, some devs always say "well I dont need it, its internal" and then it becomes an external thing, and at that point its so big that ONLY a full re-write will set it right, and it keeps chugging along until something is broken, then shit hits the fan and the big boss cries out why hasn't this been done. Long story short.

Yes you have to parse / validate / check all your input, wether internal or external. Anything other than that is just lazy.

In closing I would do it by using an editor like here on SO, which only allows some types of selective formatting. After all a broken <b> will not kill your whole layout, a <div> will...

Markdown formatting

You could use exactly the same type of intermediary solution that this site (StackOverflow) uses in it's user-generated-content (questions, answers, comments).

It's not the complete solution that could replace WYSIWYG solutions like the code editor, but it's just what a usual user-generated-content woudl require. It even allows you to include images.

For a complete guide: https://www.markdownguide.org/cheat-sheet