Merge pull request #9706 from ckeditor/ck/8326

Fix (html-embed): Allows rendering the `<script>` element inside the HTML preview. Closes #8326.
ckeditor · May 14, 2021 · 17cbd38 · 17cbd38
2 parents 7d3e098 + 5c9efa4
commit 17cbd38
Show file tree

Hide file tree

Showing 4 changed files with 39 additions and 3 deletions.
diff --git a/packages/ckeditor5-html-embed/src/htmlembedediting.js b/packages/ckeditor5-html-embed/src/htmlembedediting.js
@@ -267,6 +267,7 @@ export default class HtmlEmbedEditing extends Plugin {
 				},
 				onCancelClick: props.onCancelClick
 			};
+
 			domElement.prepend( createDomButtonsWrapper( { editor, domDocument, state, props: buttonsWrapperProps } ) );
 		}
 
@@ -336,7 +337,12 @@ export default class HtmlEmbedEditing extends Plugin {
 				dir: editor.locale.contentLanguageDirection
 			} );
 
-			domPreviewContent.innerHTML = sanitizedOutput.html;
+			// Creating a contextual document fragment allows executing scripts when inserting into the preview element.
+			// See: #8326.
+			const domRange = domDocument.createRange();
+			const domDocumentFragment = domRange.createContextualFragment( sanitizedOutput.html );
+
+			domPreviewContent.appendChild( domDocumentFragment );
 
 			const domPreviewContainer = createElement( domDocument, 'div', {
 				class: 'raw-html-embed__preview'

diff --git a/packages/ckeditor5-html-embed/tests/htmlembedediting.js b/packages/ckeditor5-html-embed/tests/htmlembedediting.js
@@ -749,6 +749,23 @@ describe( 'HtmlEmbedEditing', () => {
 
 					expect( placeholder.innerHTML ).to.equal( 'No preview available' );
 				} );
+
+				// #8326.
+				it( 'should execute vulnerable scripts inside the <script> element', () => {
+					const logWarn = sinon.stub( console, 'warn' );
+
+					setModelData( model, '[<rawHtml value=""></rawHtml>]' );
+					editor.execute( 'updateHtmlEmbed', '<script>console.warn( \'Should be called.\' )</script>' );
+
+					logWarn.restore();
+
+					expect( logWarn.callCount ).to.equal( 1 );
+					expect( logWarn.firstCall.args[ 0 ] ).to.equal( 'Should be called.' );
+
+					expect( editor.getData() ).to.equal(
+						'<div class="raw-html-embed"><script>console.warn( \'Should be called.\' )</script></div>'
+					);
+				} );
 			} );
 
 			describe( 'different setting of ui and content language', () => {

diff --git a/packages/ckeditor5-html-embed/tests/manual/htmlembed.html b/packages/ckeditor5-html-embed/tests/manual/htmlembed.html
@@ -1,5 +1,13 @@
 <head>
-	<meta http-equiv="Content-Security-Policy" content="default-src 'none'; media-src 'self'; connect-src 'self' https://cksource.com http://*.cke-cs.com; script-src 'self' https://cksource.com; img-src * data:; style-src 'self' 'unsafe-inline'; frame-src *">
+	<meta http-equiv="Content-Security-Policy" content="
+		default-src 'none';
+		media-src 'self';
+		connect-src 'self' https://cksource.com http://*.cke-cs.com;
+		script-src 'self' 'unsafe-inline' https://cksource.com;
+		img-src * data:;
+		style-src 'self' 'unsafe-inline';
+		frame-src *
+	">
 </head>
 
 <p>

diff --git a/packages/ckeditor5-html-embed/tests/manual/htmlembed.js b/packages/ckeditor5-html-embed/tests/manual/htmlembed.js
@@ -101,11 +101,16 @@ function getSanitizeHtmlConfig( defaultConfig ) {
 		'video',
 		'picture',
 		'source',
-		'img'
+		'img',
+
+		// Allows embedding scripts.
+		'script'
 	);
 
 	config.selfClosing.push( 'source' );
 
+	config.allowVulnerableTags = true;
+
 	// Remove duplicates.
 	config.allowedTags = [ ...new Set( config.allowedTags ) ];