CKEditor4 Cross-site scripting (XSS) vulnerability caused by incorrect CDATA detection

@@ -121,10 +121,7 @@ CKEDITOR.htmlParser = function() {
 				if ( tagIndex > nextIndex ) {
 					var text = html.substring( nextIndex, tagIndex );
 
-					if ( cdata )
-						cdata.push( text );
-					else
-						this.onText( text );
+					this.onText( text );
 				}
 
 				nextIndex = this._.htmlPartsRegex.lastIndex;
@@ -142,7 +139,7 @@ CKEDITOR.htmlParser = function() {
 
 					if ( cdata && CKEDITOR.dtd.$cdata[ tagName ] ) {
 						// Send the CDATA data.
-						this.onCDATA( cdata.join( '' ) );
+						this.onCDATA( cdata );
 						cdata = null;
 					}
 
@@ -152,20 +149,15 @@ CKEDITOR.htmlParser = function() {
 					}
 				}
 
-				// If CDATA is enabled, just save the raw match.
-				if ( cdata ) {
-					cdata.push( parts[ 0 ] );
-					continue;
-				}
-
 				// Opening tag
 				if ( ( tagName = parts[ 3 ] ) ) {
 					tagName = tagName.toLowerCase();
 
 					// There are some tag names that can break things, so let's
 					// simply ignore them when parsing. (https://dev.ckeditor.com/ticket/5224)
-					if ( /="/.test( tagName ) )
+					if ( /="/.test( tagName ) ) {
 						continue;
+					}
 
 					var attribs = {},
 						attribMatch,
@@ -186,9 +178,22 @@ CKEDITOR.htmlParser = function() {
 
 					this.onTagOpen( tagName, attribs, selfClosing );
 
-					// Open CDATA mode when finding the appropriate tags.
-					if ( !cdata && CKEDITOR.dtd.$cdata[ tagName ] )
-						cdata = [];
+					// CDATA
+					if ( CKEDITOR.dtd.$cdata[ tagName ] ) {
+						var closingTagRegex = new RegExp( '<\/' + tagName + '>', 'i' ),
+							htmlPart = html.substring( nextIndex ),
+							closingTagIndex = htmlPart.search( closingTagRegex );
+
+						// If closing tag was not found, treat all remaining text as CDATA.
+						if ( closingTagIndex === -1 ) {
+							closingTagIndex = htmlPart.length;
+						}
+
+						cdata = htmlPart.substring( 0, closingTagIndex );
+
+						this._.htmlPartsRegex.lastIndex = nextIndex + cdata.length;
+						nextIndex = this._.htmlPartsRegex.lastIndex;
+					}
 
 					continue;
 				}

@@ -64,6 +64,28 @@ <h1 class="samples">
 			<script>
 
 				CKEDITOR.replace( 'editor1', {
+					plugins: [
+						'wysiwygarea',
+						'sourcearea',
+						'clipboard',
+						'basicstyles',
+						'pastefromword',
+						'pastefromlibreoffice',
+						'pastefromgdocs',
+						'undo',
+						'stylescombo',
+						'format',
+						'font',
+						'colorbutton',
+						'removeformat',
+						'link',
+						'list',
+						'justify',
+						'blockquote',
+						'table',
+						'tabletools',
+						'image'
+					],
 					extraPlugins: 'autogrow',
 					removePlugins: 'resize'
 				});

@@ -64,6 +64,28 @@ <h1 class="samples">
 				// Replace the <textarea id="editor"> with an CKEditor
 				// instance, using default configurations.
 				CKEDITOR.replace( 'editor1', {
+					plugins: [
+						'wysiwygarea',
+						'sourcearea',
+						'clipboard',
+						'basicstyles',
+						'pastefromword',
+						'pastefromlibreoffice',
+						'pastefromgdocs',
+						'undo',
+						'stylescombo',
+						'format',
+						'font',
+						'colorbutton',
+						'removeformat',
+						'link',
+						'list',
+						'justify',
+						'blockquote',
+						'table',
+						'tabletools',
+						'image'
+					],
 					extraPlugins: 'devtools'
 				});
 

@@ -43,6 +43,27 @@ <h1 class="samples">
 			// Replace the <textarea id="editor"> with an CKEditor
 			// instance, using default configurations.
 			CKEDITOR.replace( 'editor1', {
+				plugins: [
+					'sourcearea',
+					'clipboard',
+					'basicstyles',
+					'pastefromword',
+					'pastefromlibreoffice',
+					'pastefromgdocs',
+					'undo',
+					'stylescombo',
+					'format',
+					'font',
+					'colorbutton',
+					'removeformat',
+					'link',
+					'list',
+					'justify',
+					'blockquote',
+					'table',
+					'tabletools',
+					'image'
+				],
 				extraPlugins: 'divarea'
 			});
 

@@ -34,18 +34,13 @@ <h1 class="samples">
 <pre class="samples">
 CKEDITOR.replace( '<em>textarea_id</em>', {
 	<strong>fullPage: true</strong>,
-	<strong>extraPlugins: 'docprops'</strong>,
-	<strong>allowedContent: true</strong>
-});
+	<strong>extraPlugins: 'docprops'</strong>
+} );
 </pre>
 		<p>
 			Note that <code><em>textarea_id</em></code> in the code above is the <code>id</code> attribute of
 			the <code>&lt;textarea&gt;</code> element to be replaced.
 		</p>
-		<p>
-			The <code><em>allowedContent</em></code> in the code above is set to <code>true</code> to disable content filtering.
-			Setting this option is not obligatory, but in full page mode there is a strong chance that one may want be able to freely enter any HTML content in source mode without any limitations.
-		</p>
 	</div>
 	<form action="../../../samples/sample_posteddata.php" method="post">
 		<label for="editor1">
@@ -59,9 +54,19 @@ <h1 class="samples">
 
 			CKEDITOR.replace( 'editor1', {
 				fullPage: true,
-				extraPlugins: 'docprops',
-				allowedContent: true
-			});
+				extraPlugins: 'docprops, wysiwygarea',
+				on: {
+					contentPreview: function( evt ) {
+						evt.data.dataValue = '<div style="padding: 1.5em;border: 3px #f00 solid">' +
+								'<h1>Content Preview was blocked</h1>' +
+								'<p>To ensure the highest security, the content preview in samples was blocked.</p>' +
+								'<p>Please refer to our ' +
+									'<a href="https://ckeditor.com/docs/ckeditor4/latest/guide/dev_best_practices.html#validate-preview-content">' +
+									'best practices on security</a> to learn more how to properly configure and secure the content preview.</p>' +
+							'</div>';
+					}
+				}
+			} );
 
 		</script>
 		<p>

@@ -24,6 +24,28 @@
 
 			// Create the editor again, with the appropriate settings.
 			editor = CKEDITOR.replace( 'editor1', {
+				plugins: [
+					'wysiwygarea',
+					'sourcearea',
+					'clipboard',
+					'basicstyles',
+					'pastefromword',
+					'pastefromlibreoffice',
+					'pastefromgdocs',
+					'undo',
+					'stylescombo',
+					'format',
+					'font',
+					'colorbutton',
+					'removeformat',
+					'link',
+					'list',
+					'justify',
+					'blockquote',
+					'table',
+					'tabletools',
+					'image'
+				],
 				extraPlugins: 'enterkey',
 				enterMode: Number( document.getElementById( 'xEnter' ).value ),
 				shiftEnterMode: Number( document.getElementById( 'xShiftEnter' ).value )

@@ -147,7 +147,9 @@ <h1 class="samples">
 					on: {
 						pluginsLoaded: configureTransformations,
 						loaded: configureHtmlWriter
-					}
+					},
+
+					removePlugins: 'preview, print'
 				});
 
 				/*

@@ -49,6 +49,27 @@ <h1 class="samples">
 	<script>
 
 		CKEDITOR.replace( 'editor1', {
+			plugins: [
+				'wysiwygarea',
+				'sourcearea',
+				'clipboard',
+				'basicstyles',
+				'pastefromword',
+				'pastefromlibreoffice',
+				'pastefromgdocs',
+				'undo',
+				'stylescombo',
+				'format',
+				'font',
+				'colorbutton',
+				'removeformat',
+				'link',
+				'list',
+				'justify',
+				'blockquote',
+				'table',
+				'tabletools'
+			],
 			extraPlugins: 'image2',
 			height: 450
 		} );

@@ -106,9 +106,31 @@ <h1 class="samples">
 			// window.onload event handler.
 
 			CKEDITOR.replace( 'editor1', {
+				plugins: [
+					'wysiwygarea',
+					'sourcearea',
+					'clipboard',
+					'basicstyles',
+					'pastefromword',
+					'pastefromlibreoffice',
+					'pastefromgdocs',
+					'undo',
+					'stylescombo',
+					'format',
+					'font',
+					'colorbutton',
+					'removeformat',
+					'link',
+					'list',
+					'justify',
+					'blockquote',
+					'table',
+					'tabletools',
+					'image',
+					'horizontalrule'
+				],
 				extraPlugins: 'magicline',	// Ensure that magicline plugin, which is required for this sample, is loaded.
-				allowedContent: true		// Switch off the ACF, so very complex content created to
-											// show magicline's power isn't filtered.
+				extraAllowedContent: 'div{*}'
 			} );
 
 		</script>
@@ -188,10 +210,32 @@ <h1 class="samples">
 			// window.onload event handler.
 
 			CKEDITOR.replace( 'editor2', {
+				plugins: [
+					'wysiwygarea',
+					'sourcearea',
+					'clipboard',
+					'basicstyles',
+					'pastefromword',
+					'pastefromlibreoffice',
+					'pastefromgdocs',
+					'undo',
+					'stylescombo',
+					'format',
+					'font',
+					'colorbutton',
+					'removeformat',
+					'link',
+					'list',
+					'justify',
+					'blockquote',
+					'table',
+					'tabletools',
+					'image',
+					'horizontalrule'
+				],
 				extraPlugins: 'magicline',	// Ensure that magicline plugin, which is required for this sample, is loaded.
 				magicline_color: 'blue',	// Blue line
-				allowedContent: true		// Switch off the ACF, so very complex content created to
-											// show magicline's power isn't filtered.
+				extraAllowedContent: 'div{*}'
 			});
 
 		</script>

@@ -25,6 +25,47 @@ <h1 class="samples">
 	<div class="warning deprecated">
 		This sample is not maintained anymore. Check out its <a href="https://ckeditor.com/docs/ckeditor4/latest/examples/mathjax.html">brand new version in CKEditor Examples</a>.
 	</div>
+	<form action="../../../samples/sample_posteddata.php" method="post">
+		<div class="description">
+			<p>
+				This editor allows displaying mathematical formulas, enabled by the <strong>Mathjax</strong> plugin.
+			</p>
+<pre class="samples">
+CKEDITOR.replace( '<em>textarea_id</em>', {
+	extraPlugins: 'mathjax',
+	mathJaxLib: '<em>&lt;URL to the MathJax library&gt;</em>'
+} );</pre>
+		</div>
+		<div id="editor1">
+			<p>The following equations are represented in the HTML source code as LaTeX expressions.</p>
+			<h1>The Cauchy-Schwarz Inequality</h1>
+			<p><span class="math-tex">\( \left( \sum_{k=1}^n a_k b_k \right)^2 \leq \left( \sum_{k=1}^n a_k^2 \right) \left( \sum_{k=1}^n b_k^2 \right) \)</span></p>
+			<h1>The probability of getting <span class="math-tex">\(k\)</span> heads when flipping <span class="math-tex">\(n\)</span> coins is</h1>
+			<p><span class="math-tex">\(P(E) = {n \choose k} p^k (1-p)^{ n-k} \)</span></p>
+			<p>Finally, while displaying equations is useful for demonstration purposes, the ability to mix math and text in a paragraph is also important. This expression <span class="math-tex">\(\sqrt{3x-1}+(1+x)^2\)</span> is an example of an inline equation. As you see, MathJax equations can be used this way as well, without disturbing the spacing between the lines.</p>
+		</div>
+		<script>
+
+			// This call can be placed at any point after the
+			// <textarea>, or inside a <head><script> in a
+			// window.onload event handler.
+
+			// Replace the <textarea id="editor"> with an CKEditor
+			// instance, using default configurations.
+			CKEDITOR.replace( 'editor1', {
+				plugins: [
+					'wysiwygarea',
+					'sourcearea',
+					'clipboard',
+					'basicstyles',
+					'undo',
+					'format'
+				],
+				extraPlugins: 'mathjax',
+				mathJaxLib: 'https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.4/MathJax.js?config=TeX-AMS_HTML'
+			} );
+
+		</script>
 	<div id="footer">
 		<hr>
 		<p>

@@ -53,6 +53,28 @@ <h1 class="samples">
 			<script>
 
 				CKEDITOR.replace( 'editor1', {
+					plugins: [
+						'wysiwygarea',
+						'sourcearea',
+						'clipboard',
+						'basicstyles',
+						'pastefromword',
+						'pastefromlibreoffice',
+						'pastefromgdocs',
+						'undo',
+						'stylescombo',
+						'format',
+						'font',
+						'colorbutton',
+						'removeformat',
+						'link',
+						'list',
+						'justify',
+						'blockquote',
+						'table',
+						'tabletools',
+						'image'
+					],
 					extraPlugins: 'placeholder'
 				});
 

@@ -68,6 +68,28 @@ <h3>
 		CKEDITOR.disableAutoInline = true;
 
 		CKEDITOR.inline( 'inline1', {
+			plugins: [
+				'wysiwygarea',
+				'sourcearea',
+				'clipboard',
+				'basicstyles',
+				'pastefromword',
+				'pastefromlibreoffice',
+				'pastefromgdocs',
+				'undo',
+				'stylescombo',
+				'format',
+				'font',
+				'colorbutton',
+				'removeformat',
+				'link',
+				'list',
+				'justify',
+				'blockquote',
+				'table',
+				'tabletools',
+				'image'
+			],
 			extraPlugins: 'sharedspace',
 			removePlugins: 'floatingspace,resize',
 			sharedSpaces: {
@@ -77,6 +99,28 @@ <h3>
 		});
 
 		CKEDITOR.inline( 'inline2', {
+			plugins: [
+				'wysiwygarea',
+				'sourcearea',
+				'clipboard',
+				'basicstyles',
+				'pastefromword',
+				'pastefromlibreoffice',
+				'pastefromgdocs',
+				'undo',
+				'stylescombo',
+				'format',
+				'font',
+				'colorbutton',
+				'removeformat',
+				'link',
+				'list',
+				'justify',
+				'blockquote',
+				'table',
+				'tabletools',
+				'image'
+			],
 			extraPlugins: 'sharedspace',
 			removePlugins: 'floatingspace,resize',
 			sharedSpaces: {
@@ -86,6 +130,28 @@ <h3>
 		});
 
 		CKEDITOR.appendTo( 'framed1', {
+				plugins: [
+					'wysiwygarea',
+					'sourcearea',
+					'clipboard',
+					'basicstyles',
+					'pastefromword',
+					'pastefromlibreoffice',
+					'pastefromgdocs',
+					'undo',
+					'stylescombo',
+					'format',
+					'font',
+					'colorbutton',
+					'removeformat',
+					'link',
+					'list',
+					'justify',
+					'blockquote',
+					'table',
+					'tabletools',
+					'image'
+				],
 				extraPlugins: 'sharedspace',
 				removePlugins: 'maximize,resize',
 				sharedSpaces: {
@@ -97,6 +163,28 @@ <h3>
 		);
 
 		CKEDITOR.appendTo( 'framed2', {
+				plugins: [
+					'wysiwygarea',
+					'sourcearea',
+					'clipboard',
+					'basicstyles',
+					'pastefromword',
+					'pastefromlibreoffice',
+					'pastefromgdocs',
+					'undo',
+					'stylescombo',
+					'format',
+					'font',
+					'colorbutton',
+					'removeformat',
+					'link',
+					'list',
+					'justify',
+					'blockquote',
+					'table',
+					'tabletools',
+					'image'
+				],
 				extraPlugins: 'sharedspace',
 				removePlugins: 'maximize,resize',
 				sharedSpaces: {

@@ -57,6 +57,28 @@ <h1 class="samples">
 				// Replace the <textarea id="editor"> with an CKEditor
 				// instance, using default configurations.
 				CKEDITOR.replace( 'editor1' , {
+					plugins: [
+						'wysiwygarea',
+						'sourcearea',
+						'clipboard',
+						'basicstyles',
+						'pastefromword',
+						'pastefromlibreoffice',
+						'pastefromgdocs',
+						'undo',
+						'stylescombo',
+						'format',
+						'font',
+						'colorbutton',
+						'removeformat',
+						'link',
+						'list',
+						'justify',
+						'blockquote',
+						'table',
+						'tabletools',
+						'image'
+					],
 					extraPlugins: 'stylesheetparser',
 
 					// Stylesheet for the contents.

@@ -85,6 +85,28 @@ <h1 class="samples">
 				// Replace the <textarea id="editor"> with an CKEditor
 				// instance, using default configurations.
 				CKEDITOR.replace( 'editor1', {
+					plugins: [
+						'wysiwygarea',
+						'sourcearea',
+						'clipboard',
+						'basicstyles',
+						'pastefromword',
+						'pastefromlibreoffice',
+						'pastefromgdocs',
+						'undo',
+						'stylescombo',
+						'format',
+						'font',
+						'colorbutton',
+						'removeformat',
+						'link',
+						'list',
+						'justify',
+						'blockquote',
+						'table',
+						'tabletools',
+						'image'
+					],
 					extraPlugins: 'tableresize'
 				});
 

@@ -140,13 +140,37 @@ <h2 class="samples">Full toolbar configuration</h2>
 		CKEDITOR.dom.element.createFromHtml( preOutput ).replace( pre );
 	} );
 
-	CKEDITOR.replace( 'editorCurrent', { height: 100 } );
+	CKEDITOR.replace( 'editorCurrent', {
+		height: 100,
+		on: {
+			contentPreview: function( evt ) {
+				evt.data.dataValue = '<div style="padding: 1.5em;border: 3px #f00 solid">' +
+						'<h1>Content Preview was blocked</h1>' +
+						'<p>To ensure the highest security, the content preview in samples was blocked.</p>' +
+						'<p>Please refer to our ' +
+							'<a href="https://ckeditor.com/docs/ckeditor4/latest/guide/dev_best_practices.html#validate-preview-content">' +
+							'best practices on security</a> to learn more how to properly configure and secure the content preview.</p>' +
+					'</div>';
+			}
+		}
+	} );
 	CKEDITOR.replace( 'editorFull', {
 		// Reset toolbar settings, so full toolbar will be generated automatically.
 		toolbar: null,
 		toolbarGroups: null,
 		removeButtons: null,
-		height: 100
+		height: 100,
+		on: {
+			contentPreview: function( evt ) {
+				evt.data.dataValue = '<div style="padding: 1.5em;border: 3px #f00 solid">' +
+						'<h1>Content Preview was blocked</h1>' +
+						'<p>To ensure the highest security, the content preview in samples was blocked.</p>' +
+						'<p>Please refer to our ' +
+							'<a href="https://ckeditor.com/docs/ckeditor4/latest/guide/dev_best_practices.html#validate-preview-content">' +
+							'best practices on security</a> to learn more how to properly configure and secure the content preview.</p>' +
+					'</div>';
+			}
+		}
 	} );
 
 	function dumpToolbarConfiguration( editor, printGroups ) {

@@ -33,18 +33,13 @@ <h1 class="samples">
 		</p>
 <pre class="samples">
 CKEDITOR.replace( '<em>textarea_id</em>', {
-	<strong>fullPage: true</strong>,
-	<strong>allowedContent: true</strong>
+	<strong>fullPage: true</strong>
 });
 </pre>
 		<p>
 			Note that <code><em>textarea_id</em></code> in the code above is the <code>id</code> attribute of
 			the <code>&lt;textarea&gt;</code> element to be replaced.
 		</p>
-		<p>
-			The <code><em>allowedContent</em></code> in the code above is set to <code>true</code> to disable content filtering.
-			Setting this option is not obligatory, but in full page mode there is a strong chance that one may want be able to freely enter any HTML content in source mode without any limitations.
-		</p>
 	</div>
 	<form action="../../../samples/sample_posteddata.php" method="post">
 		<label for="editor1">
@@ -58,9 +53,19 @@ <h1 class="samples">
 
 			CKEDITOR.replace( 'editor1', {
 				fullPage: true,
-				allowedContent: true,
-				extraPlugins: 'wysiwygarea'
-			});
+				extraPlugins: 'wysiwygarea',
+				on: {
+					contentPreview: function( evt ) {
+						evt.data.dataValue = '<div style="padding: 1.5em;border: 3px #f00 solid">' +
+								'<h1>Content Preview was blocked</h1>' +
+								'<p>To ensure the highest security, the content preview in samples was blocked.</p>' +
+								'<p>Please refer to our ' +
+									'<a href="https://ckeditor.com/docs/ckeditor4/latest/guide/dev_best_practices.html#validate-preview-content">' +
+									'best practices on security</a> to learn more how to properly configure and secure the content preview.</p>' +
+							'</div>';
+					}
+				}
+			} );
 
 		</script>
 		<p>

@@ -30,10 +30,34 @@ var initSample = ( function() {
 
 		// Depending on the wysiwygarea plugin availability initialize classic or inline editor.
 		if ( wysiwygareaAvailable ) {
-			CKEDITOR.replace( 'editor' );
+			CKEDITOR.replace( 'editor', {
+				on: {
+					contentPreview: function( evt ) {
+						evt.data.dataValue = '<div style="padding: 1.5em;border: 3px #f00 solid">' +
+								'<h1>Content Preview was blocked</h1>' +
+								'<p>To ensure the highest security, the content preview in samples was blocked.</p>' +
+								'<p>Please refer to our ' +
+									'<a href="https://ckeditor.com/docs/ckeditor4/latest/guide/dev_best_practices.html#validate-preview-content">' +
+									'best practices on security</a> to learn more how to properly configure and secure the content preview.</p>' +
+							'</div>';
+					}
+				}
+			} );
 		} else {
 			editorElement.setAttribute( 'contenteditable', 'true' );
-			CKEDITOR.inline( 'editor' );
+			CKEDITOR.inline( 'editor', {
+				on: {
+					contentPreview: function( evt ) {
+						evt.data.dataValue = '<div style="padding: 1.5em;border: 3px #f00 solid">' +
+								'<h1>Content Preview was blocked</h1>' +
+								'<p>To ensure the highest security, the content preview in samples was blocked.</p>' +
+								'<p>Please refer to our ' +
+									'<a href="https://ckeditor.com/docs/ckeditor4/latest/guide/dev_best_practices.html#validate-preview-content">' +
+									'best practices on security</a> to learn more how to properly configure and secure the content preview.</p>' +
+							'</div>';
+					}
+				}
+			} );
 
 			// TODO we can consider displaying some info box that
 			// without wysiwygarea the classic editor may not work.

@@ -19,7 +19,19 @@
 				return;
 
 			// Create a new editor inside the <div id="editor">, setting its value to html
-			var config = {};
+			var config = {
+				on: {
+					contentPreview: function( evt ) {
+						evt.data.dataValue = '<div style="padding: 1.5em;border: 3px #f00 solid">' +
+								'<h1>Content Preview was blocked</h1>' +
+								'<p>To ensure the highest security, the content preview in samples was blocked.</p>' +
+								'<p>Please refer to our ' +
+									'<a href="https://ckeditor.com/docs/ckeditor4/latest/guide/dev_best_practices.html#validate-preview-content">' +
+									'best practices on security</a> to learn more how to properly configure and secure the content preview.</p>' +
+							'</div>';
+					}
+				}
+			};
 			editor = CKEDITOR.appendTo( 'editor', config, html );
 		}
 
@@ -29,7 +41,7 @@
 
 			// Retrieve the editor contents. In an Ajax application, this data would be
 			// sent to the server or used in any other way.
-			document.getElementById( 'editorcontents' ).innerHTML = html = editor.getData();
+			document.getElementById( 'editorcontents' ).value = html = editor.getData();
 			document.getElementById( 'contents' ).style.display = '';
 
 			// Destroy the editor.
@@ -69,8 +81,7 @@ <h1 class="samples">
 			Edited Contents:
 		</p>
 		<!-- This div will be used to display the editor contents. -->
-		<div id="editorcontents">
-		</div>
+		<textarea id="editorcontents" style="width: 100%;min-height: 2em;"></textarea>
 	</div>
 	<div id="footer">
 		<hr>

@@ -166,6 +166,16 @@ <h1 class="samples">
 							doc.getById( 'exec-bold' ).hide();
 						if ( !ed.getCommand( 'link' ) )
 							doc.getById( 'exec-link' ).hide();
+					},
+
+					contentPreview: function( evt ) {
+						evt.data.dataValue = '<div style="padding: 1.5em;border: 3px #f00 solid">' +
+								'<h1>Content Preview was blocked</h1>' +
+								'<p>To ensure the highest security, the content preview in samples was blocked.</p>' +
+								'<p>Please refer to our ' +
+									'<a href="https://ckeditor.com/docs/ckeditor4/latest/guide/dev_best_practices.html#validate-preview-content">' +
+									'best practices on security</a> to learn more how to properly configure and secure the content preview.</p>' +
+							'</div>';
 					}
 				}
 			});

@@ -39,7 +39,19 @@ <h1 class="samples">
 			// Append a CKEditor instance using the default configuration and the
 			// provided content to the <div> element of ID "section1".
 			CKEDITOR.appendTo( 'section1',
-				null,
+				{
+					on: {
+						contentPreview: function( evt ) {
+							evt.data.dataValue = '<div style="padding: 1.5em;border: 3px #f00 solid">' +
+									'<h1>Content Preview was blocked</h1>' +
+									'<p>To ensure the highest security, the content preview in samples was blocked.</p>' +
+									'<p>Please refer to our ' +
+										'<a href="https://ckeditor.com/docs/ckeditor4/latest/guide/dev_best_practices.html#validate-preview-content">' +
+										'best practices on security</a> to learn more how to properly configure and secure the content preview.</p>' +
+								'</div>';
+						}
+					}
+				},
 				'<p>This is some <strong>sample text</strong>. You are using <a href="https://ckeditor.com/">CKEditor</a>.</p>'
 			);
 

@@ -13,6 +13,18 @@
 	<script>
 		// Remove advanced tabs for all editors.
 		CKEDITOR.config.removeDialogTabs = 'image:advanced;link:advanced;creatediv:advanced;editdiv:advanced';
+
+		CKEDITOR.on( 'instanceCreated', function( evt ) {
+			evt.editor.on( 'contentPreview',function( evt ) {
+				evt.data.dataValue = '<div style="padding: 1.5em;border: 3px #f00 solid">' +
+						'<h1>Content Preview was blocked</h1>' +
+						'<p>To ensure the highest security, the content preview in samples was blocked.</p>' +
+						'<p>Please refer to our ' +
+							'<a href="https://ckeditor.com/docs/ckeditor4/latest/guide/dev_best_practices.html#validate-preview-content">' +
+							'best practices on security</a> to learn more how to properly configure and secure the content preview.</p>' +
+					'</div>';
+			} );
+		} );
 	</script>
 </head>
 <body>
@@ -119,6 +131,13 @@ <h3>How to configure or disable ACF?</h3>
 	<strong>allowedContent: true</strong>
 } );
 </pre>
+		<p>
+			Please not that disabling filtering is not recommended
+			as <strong>it can result in XSS vulnerabilities</strong>.
+			It is recommended to <a
+			href="https://ckeditor.com/docs/ckeditor4/latest/guide/dev_best_practices.html#use-acf-in-default-automatic-mode">
+			rely on the automatic configuration</a>.
+		</p>
 
 		<h2>Beyond data flow: Features activation</h2>
 		<p>
@@ -446,55 +465,6 @@ <h1 id="editor5" contenteditable="true">
 		</script>
 	</div>
 
-	<br>
-
-	<div>
-		<label for="editor7">
-			Editor 7:
-		</label>
-		<div class="description">
-			<p>
-				This editor is using a custom configuration for <abbr title="Advanced Content Filter">ACF</abbr>.
-				It's using the <a href="https://ckeditor.com/docs/ckeditor4/latest/guide/dev_disallowed_content.html" rel="noopener noreferrer" target="_blank">
-				Disallowed Content</a> property of the filter to eliminate all <code>a</code> and <code>img</code> tags,
-				while allowing all other tags.
-			</p>
-<pre class="samples">
-CKEDITOR.replace( 'editor7', {
-	allowedContent: {
-		// Allow all content.
-		$1: {
-			elements: CKEDITOR.dtd,
-			attributes: true,
-			styles: true,
-			classes: true
-		}
-	},
-	disallowedContent: 'img a'
-} );
-</pre>
-		</div>
-		<textarea cols="80" id="editor7" name="editor7" rows="10">
-			&lt;h1&gt;&lt;img alt=&quot;Saturn V carrying Apollo 11&quot; class=&quot;right&quot; src=&quot;assets/sample.jpg&quot;/&gt; Apollo 11&lt;/h1&gt; &lt;p&gt;&lt;b&gt;Apollo 11&lt;/b&gt; was the spaceflight that landed the first humans, Americans &lt;a href=&quot;http://en.wikipedia.org/wiki/Neil_Armstrong&quot; title=&quot;Neil Armstrong&quot;&gt;Neil Armstrong&lt;/a&gt; and &lt;a href=&quot;http://en.wikipedia.org/wiki/Buzz_Aldrin&quot; title=&quot;Buzz Aldrin&quot;&gt;Buzz Aldrin&lt;/a&gt;, on the Moon on July 20, 1969, at 20:18 UTC. Armstrong became the first to step onto the lunar surface 6 hours later on July 21 at 02:56 UTC.&lt;/p&gt; &lt;p&gt;Armstrong spent about &lt;s&gt;three and a half&lt;/s&gt; two and a half hours outside the spacecraft, Aldrin slightly less; and together they collected 47.5 pounds (21.5&amp;nbsp;kg) of lunar material for return to Earth. A third member of the mission, &lt;a href=&quot;http://en.wikipedia.org/wiki/Michael_Collins_(astronaut)&quot; title=&quot;Michael Collins (astronaut)&quot;&gt;Michael Collins&lt;/a&gt;, piloted the &lt;a href=&quot;http://en.wikipedia.org/wiki/Apollo_Command/Service_Module&quot; title=&quot;Apollo Command/Service Module&quot;&gt;command&lt;/a&gt; spacecraft alone in lunar orbit until Armstrong and Aldrin returned to it for the trip back to Earth.&lt;/p&gt; &lt;h2&gt;Broadcasting and &lt;em&gt;quotes&lt;/em&gt; &lt;a id=&quot;quotes&quot; name=&quot;quotes&quot;&gt;&lt;/a&gt;&lt;/h2&gt; &lt;p&gt;Broadcast on live TV to a world-wide audience, Armstrong stepped onto the lunar surface and described the event as:&lt;/p&gt; &lt;blockquote&gt;&lt;p&gt;One small step for [a] man, one giant leap for mankind.&lt;/p&gt;&lt;/blockquote&gt; &lt;p&gt;Apollo 11 effectively ended the &lt;a href=&quot;http://en.wikipedia.org/wiki/Space_Race&quot; title=&quot;Space Race&quot;&gt;Space Race&lt;/a&gt; and fulfilled a national goal proposed in 1961 by the late U.S. President &lt;a href=&quot;http://en.wikipedia.org/wiki/John_F._Kennedy&quot; title=&quot;John F. Kennedy&quot;&gt;John F. Kennedy&lt;/a&gt; in a speech before the United States Congress:&lt;/p&gt; &lt;blockquote&gt;&lt;p&gt;[...] before this decade is out, of landing a man on the Moon and returning him safely to the Earth.&lt;/p&gt;&lt;/blockquote&gt; &lt;h2&gt;Technical details &lt;a id=&quot;tech-details&quot; name=&quot;tech-details&quot;&gt;&lt;/a&gt;&lt;/h2&gt; &lt;table align=&quot;right&quot; border=&quot;1&quot; bordercolor=&quot;#ccc&quot; cellpadding=&quot;5&quot; cellspacing=&quot;0&quot; style=&quot;border-collapse:collapse;margin:10px 0 10px 15px;&quot;&gt; &lt;caption&gt;&lt;strong&gt;Mission crew&lt;/strong&gt;&lt;/caption&gt; &lt;thead&gt; &lt;tr&gt; &lt;th scope=&quot;col&quot;&gt;Position&lt;/th&gt; &lt;th scope=&quot;col&quot;&gt;Astronaut&lt;/th&gt; &lt;/tr&gt; &lt;/thead&gt; &lt;tbody&gt; &lt;tr&gt; &lt;td&gt;Commander&lt;/td&gt; &lt;td&gt;Neil A. Armstrong&lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td&gt;Command Module Pilot&lt;/td&gt; &lt;td&gt;Michael Collins&lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td&gt;Lunar Module Pilot&lt;/td&gt; &lt;td&gt;Edwin &amp;quot;Buzz&amp;quot; E. Aldrin, Jr.&lt;/td&gt; &lt;/tr&gt; &lt;/tbody&gt; &lt;/table&gt; &lt;p&gt;Launched by a &lt;strong&gt;Saturn V&lt;/strong&gt; rocket from &lt;a href=&quot;http://en.wikipedia.org/wiki/Kennedy_Space_Center&quot; title=&quot;Kennedy Space Center&quot;&gt;Kennedy Space Center&lt;/a&gt; in Merritt Island, Florida on July 16, Apollo 11 was the fifth manned mission of &lt;a href=&quot;http://en.wikipedia.org/wiki/NASA&quot; title=&quot;NASA&quot;&gt;NASA&lt;/a&gt;&amp;#39;s Apollo program. The Apollo spacecraft had three parts:&lt;/p&gt; &lt;ol&gt; &lt;li&gt;&lt;strong&gt;Command Module&lt;/strong&gt; with a cabin for the three astronauts which was the only part which landed back on Earth&lt;/li&gt; &lt;li&gt;&lt;strong&gt;Service Module&lt;/strong&gt; which supported the Command Module with propulsion, electrical power, oxygen and water&lt;/li&gt; &lt;li&gt;&lt;strong&gt;Lunar Module&lt;/strong&gt; for landing on the Moon.&lt;/li&gt; &lt;/ol&gt; &lt;p&gt;After being sent to the Moon by the Saturn V&amp;#39;s upper stage, the astronauts separated the spacecraft from it and travelled for three days until they entered into lunar orbit. Armstrong and Aldrin then moved into the Lunar Module and landed in the &lt;a href=&quot;http://en.wikipedia.org/wiki/Mare_Tranquillitatis&quot; title=&quot;Mare Tranquillitatis&quot;&gt;Sea of Tranquility&lt;/a&gt;. They stayed a total of about 21 and a half hours on the lunar surface. After lifting off in the upper part of the Lunar Module and rejoining Collins in the Command Module, they returned to Earth and landed in the &lt;a href=&quot;http://en.wikipedia.org/wiki/Pacific_Ocean&quot; title=&quot;Pacific Ocean&quot;&gt;Pacific Ocean&lt;/a&gt; on July 24.&lt;/p&gt; &lt;hr/&gt; &lt;p style=&quot;text-align: right;&quot;&gt;&lt;small&gt;Source: &lt;a href=&quot;http://en.wikipedia.org/wiki/Apollo_11&quot;&gt;Wikipedia.org&lt;/a&gt;&lt;/small&gt;&lt;/p&gt;
-		</textarea>
-		<script>
-
-			CKEDITOR.replace( 'editor7', {
-				allowedContent: {
-					// allow all content
-					$1: {
-						elements: CKEDITOR.dtd,
-						attributes: true,
-						styles: true,
-						classes: true
-					}
-				},
-				disallowedContent: 'img a'
-			} );
-
-		</script>
-	</div>
-
 	<div id="footer">
 		<hr>
 		<p>

@@ -26,7 +26,6 @@
 
 	</style>
 	<script>
-
 		// Uncomment the following code to test the "Timeout Loading Method".
 		// CKEDITOR.loadFullCoreTimeout = 5;
 
@@ -66,6 +65,18 @@
 			editor = CKEDITOR.replace( div );
 		}
 
+
+		CKEDITOR.on( 'instanceCreated', function( evt ) {
+			evt.editor.on( 'contentPreview', function( evt ) {
+				evt.data.dataValue = '<div style="padding: 1.5em;border: 3px #f00 solid">' +
+						'<h1>Content Preview was blocked</h1>' +
+						'<p>To ensure the highest security, the content preview in samples was blocked.</p>' +
+						'<p>Please refer to our ' +
+							'<a href="https://ckeditor.com/docs/ckeditor4/latest/guide/dev_best_practices.html#validate-preview-content">' +
+							'best practices on security</a> to learn more how to properly configure and secure the content preview.</p>' +
+					'</div>';
+			} );
+		} );
 	</script>
 </head>
 <body>

@@ -21,6 +21,16 @@
 			var editor = event.editor,
 				element = editor.element;
 
+			editor.on( 'contentPreview', function( evt ) {
+				evt.data.dataValue = '<div style="padding: 1.5em;border: 3px #f00 solid">' +
+						'<h1>Content Preview was blocked</h1>' +
+						'<p>To ensure the highest security, the content preview in samples was blocked.</p>' +
+						'<p>Please refer to our ' +
+							'<a href="https://ckeditor.com/docs/ckeditor4/latest/guide/dev_best_practices.html#validate-preview-content">' +
+							'best practices on security</a> to learn more how to properly configure and secure the content preview.</p>' +
+					'</div>';
+			} );
+
 			// Customize editors for headers and tag list.
 			// These editors don't need features like smileys, templates, iframes etc.
 			if ( element.is( 'h1', 'h2', 'h3' ) || element.getAttribute( 'id' ) == 'taglist' ) {
@@ -44,7 +54,7 @@
 					];
 				});
 			}
-		});
+		} );
 
 	</script>
 	<link href="sample.css" rel="stylesheet">

@@ -108,7 +108,19 @@ <h2>Technical details <a id="tech-details" name="tech-details"></a></h2>
 		// We need to turn off the automatic editor creation first.
 		CKEDITOR.disableAutoInline = true;
 
-		var editor = CKEDITOR.inline( 'editable' );
+		var editor = CKEDITOR.inline( 'editable', {
+			on: {
+				contentPreview: function( evt ) {
+					evt.data.dataValue = '<div style="padding: 1.5em;border: 3px #f00 solid">' +
+							'<h1>Content Preview was blocked</h1>' +
+							'<p>To ensure the highest security, the content preview in samples was blocked.</p>' +
+							'<p>Please refer to our ' +
+								'<a href="https://ckeditor.com/docs/ckeditor4/latest/guide/dev_best_practices.html#validate-preview-content">' +
+								'best practices on security</a> to learn more how to properly configure and secure the content preview.</p>' +
+						'</div>';
+				}
+			}
+		} );
 	</script>
 	<div id="footer">
 		<hr>

@@ -97,7 +97,19 @@ <h2>This is a sample form with some fields</h2>
 	</form>
 
 	<script>
-		CKEDITOR.inline( 'article-body' );
+		CKEDITOR.inline( 'article-body', {
+			on: {
+				contentPreview: function( evt ) {
+					evt.data.dataValue = '<div style="padding: 1.5em;border: 3px #f00 solid">' +
+							'<h1>Content Preview was blocked</h1>' +
+							'<p>To ensure the highest security, the content preview in samples was blocked.</p>' +
+							'<p>Please refer to our ' +
+								'<a href="https://ckeditor.com/docs/ckeditor4/latest/guide/dev_best_practices.html#validate-preview-content">' +
+								'best practices on security</a> to learn more how to properly configure and secure the content preview.</p>' +
+						'</div>';
+				}
+			}
+		} );
 	</script>
 	<div id="footer">
 		<hr>

@@ -26,8 +26,32 @@
 		CKEDITOR.disableAutoInline = true;
 
 		$( document ).ready( function() {
-			$( '#editor1' ).ckeditor(); // Use CKEDITOR.replace() if element is <textarea>.
-			$( '#editable' ).ckeditor(); // Use CKEDITOR.inline().
+			$( '#editor1' ).ckeditor( {
+				on: {
+					contentPreview: function( evt ) {
+						evt.data.dataValue = '<div style="padding: 1.5em;border: 3px #f00 solid">' +
+								'<h1>Content Preview was blocked</h1>' +
+								'<p>To ensure the highest security, the content preview in samples was blocked.</p>' +
+								'<p>Please refer to our ' +
+									'<a href="https://ckeditor.com/docs/ckeditor4/latest/guide/dev_best_practices.html#validate-preview-content">' +
+									'best practices on security</a> to learn more how to properly configure and secure the content preview.</p>' +
+							'</div>';
+					}
+				}
+			} ); // Use CKEDITOR.replace() if element is <textarea>.
+			$( '#editable' ).ckeditor( {
+				on: {
+					contentPreview: function( evt ) {
+						evt.data.dataValue = '<div style="padding: 1.5em;border: 3px #f00 solid">' +
+								'<h1>Content Preview was blocked</h1>' +
+								'<p>To ensure the highest security, the content preview in samples was blocked.</p>' +
+								'<p>Please refer to our ' +
+									'<a href="https://ckeditor.com/docs/ckeditor4/latest/guide/dev_best_practices.html#validate-preview-content">' +
+									'best practices on security</a> to learn more how to properly configure and secure the content preview.</p>' +
+							'</div>';
+					}
+				}
+			} ); // Use CKEDITOR.inline().
 		} );
 
 		function setValue() {

@@ -26,8 +26,18 @@
 			editor.on( 'readOnly', function() {
 				document.getElementById( 'readOnlyOn' ).style.display = this.readOnly ? 'none' : '';
 				document.getElementById( 'readOnlyOff' ).style.display = this.readOnly ? '' : 'none';
-			});
-		});
+			} );
+
+			editor.on( 'contentPreview', function( evt ) {
+				evt.data.dataValue = '<div style="padding: 1.5em;border: 3px #f00 solid">' +
+						'<h1>Content Preview was blocked</h1>' +
+						'<p>To ensure the highest security, the content preview in samples was blocked.</p>' +
+						'<p>Please refer to our ' +
+							'<a href="https://ckeditor.com/docs/ckeditor4/latest/guide/dev_best_practices.html#validate-preview-content">' +
+							'best practices on security</a> to learn more how to properly configure and secure the content preview.</p>' +
+					'</div>';
+			} );
+		} );
 
 		function toggleReadOnly( isReadOnly ) {
 			// Change the read-only state of the editor.

@@ -8,6 +8,19 @@
 	<meta charset="utf-8">
 	<title>Replace Textareas by Class Name &mdash; CKEditor Sample</title>
 	<script src="../../ckeditor.js"></script>
+	<script>
+		CKEDITOR.on( 'instanceCreated', function( evt ) {
+			evt.editor.on( 'contentPreview',function( evt ) {
+				evt.data.dataValue = '<div style="padding: 1.5em;border: 3px #f00 solid">' +
+						'<h1>Content Preview was blocked</h1>' +
+						'<p>To ensure the highest security, the content preview in samples was blocked.</p>' +
+						'<p>Please refer to our ' +
+							'<a href="https://ckeditor.com/docs/ckeditor4/latest/guide/dev_best_practices.html#validate-preview-content">' +
+							'best practices on security</a> to learn more how to properly configure and secure the content preview.</p>' +
+					'</div>';
+			} );
+		} );
+	</script>
 	<link rel="stylesheet" href="sample.css">
 	<meta name="description" content="Try the latest sample of CKEditor 4 and learn more about customizing your WYSIWYG editor with endless possibilities.">
 </head>

@@ -39,7 +39,19 @@ <h1 class="samples">
 			// Replace the <textarea id="editor"> with an CKEditor
 			// instance, using default configurations.
 
-			CKEDITOR.replace( 'editor1' );
+			CKEDITOR.replace( 'editor1', {
+				on: {
+					contentPreview: function( evt ) {
+						evt.data.dataValue = '<div style="padding: 1.5em;border: 3px #f00 solid">' +
+								'<h1>Content Preview was blocked</h1>' +
+								'<p>To ensure the highest security, the content preview in samples was blocked.</p>' +
+								'<p>Please refer to our ' +
+									'<a href="https://ckeditor.com/docs/ckeditor4/latest/guide/dev_best_practices.html#validate-preview-content">' +
+									'best practices on security</a> to learn more how to properly configure and secure the content preview.</p>' +
+							'</div>';
+					}
+				}
+			} );
 
 		</script>
 		<p>

@@ -29,15 +29,25 @@
 			// Apply focus class name.
 			editor.on( 'focus', function() {
 				editor.container.addClass( 'cke_focused' );
-			});
+			} );
 			editor.on( 'blur', function() {
 				editor.container.removeClass( 'cke_focused' );
-			});
+			} );
 
 			// Put startup focus on the first editor in tab order.
 			if ( editor.tabIndex == 1 )
 				editor.focus();
-		});
+
+			editor.on( 'contentPreview', function( evt ) {
+				evt.data.dataValue = '<div style="padding: 1.5em;border: 3px #f00 solid">' +
+						'<h1>Content Preview was blocked</h1>' +
+						'<p>To ensure the highest security, the content preview in samples was blocked.</p>' +
+						'<p>Please refer to our ' +
+							'<a href="https://ckeditor.com/docs/ckeditor4/latest/guide/dev_best_practices.html#validate-preview-content">' +
+							'best practices on security</a> to learn more how to properly configure and secure the content preview.</p>' +
+					'</div>';
+			} );
+		} );
 
 	</script>
 </head>

@@ -98,9 +98,18 @@ <h1 class="samples">
 								var languages = document.getElementById( 'languages' );
 								languages.value = this.langCode;
 								languages.disabled = false;
+							},
+							contentPreview: function( evt ) {
+								evt.data.dataValue = '<div style="padding: 1.5em;border: 3px #f00 solid">' +
+										'<h1>Content Preview was blocked</h1>' +
+										'<p>To ensure the highest security, the content preview in samples was blocked.</p>' +
+										'<p>Please refer to our ' +
+											'<a href="https://ckeditor.com/docs/ckeditor4/latest/guide/dev_best_practices.html#validate-preview-content">' +
+											'best practices on security</a> to learn more how to properly configure and secure the content preview.</p>' +
+									'</div>';
 							}
 						}
-					});
+					} );
 				}
 
 				// At page startup, load the default language:

@@ -212,8 +212,20 @@ <h1 class="samples">
 
 						{ name: 'Cited Work', element: 'cite' },
 						{ name: 'Inline Quotation', element: 'q' }
-					]
-				});
+					],
+
+					on: {
+						contentPreview: function( evt ) {
+							evt.data.dataValue = '<div style="padding: 1.5em;border: 3px #f00 solid">' +
+									'<h1>Content Preview was blocked</h1>' +
+									'<p>To ensure the highest security, the content preview in samples was blocked.</p>' +
+									'<p>Please refer to our ' +
+										'<a href="https://ckeditor.com/docs/ckeditor4/latest/guide/dev_best_practices.html#validate-preview-content">' +
+										'best practices on security</a> to learn more how to properly configure and secure the content preview.</p>' +
+								'</div>';
+						}
+					}
+				} );
 
 			</script>
 		</p>