Apply the ViewSource plugin's filter on the editor's content.

dojo · May 1, 2019 · b25bc68 · b25bc68
1 parent 9eb5b8e
commit b25bc68
Show file tree

Hide file tree

Showing 2 changed files with 58 additions and 5 deletions.
diff --git a/_editor/plugins/ViewSource.js b/_editor/plugins/ViewSource.js
@@ -86,6 +86,15 @@ dojo.declare("dijit._editor.plugins.ViewSource",dijit._editor._Plugin,{
 		this.editor = editor;
 		this._initButton();
 
+		// Filter the html content when it is set and retrieved in the editor.
+		this.removeValueFilterHandles();
+		this._setValueFilterHandle = dojo.aspect.before(this.editor, "setValue", dojo.hitch(this, function (html) {
+			return [this._filter(html)];
+		}));
+		this._getValueFilterHandle = dojo.aspect.after(this.editor, "getValue", dojo.hitch(this, function (html) {
+			return this._filter(html);
+		}));
+
 		this.editor.addKeyHandler(dojo.keys.F12, true, true, dojo.hitch(this, function(e){
 			// Move the focus before switching
 			// It'll focus back.  Hiding a focused
@@ -132,9 +141,6 @@ dojo.declare("dijit._editor.plugins.ViewSource",dijit._editor._Plugin,{
 					}
 				};
 				this.editor.onDisplayChanged();
-				html = ed.get("value");
-				html = this._filter(html);
-				ed.set("value", html);
 				this._pluginList = [];
 				dojo.forEach(edPlugins, function(p){
 					// Turn off any plugins not controlled by queryCommandenabled.
@@ -151,7 +157,8 @@ dojo.declare("dijit._editor.plugins.ViewSource",dijit._editor._Plugin,{
 					};
 				}
 
-				this.sourceArea.value = html;
+				this.sourceArea.value = ed.get("value");
+
 				var is = dojo._getMarginSize(ed.iframe.parentNode);
 
 				dojo.marginBox(this.sourceArea, {
@@ -226,8 +233,8 @@ dojo.declare("dijit._editor.plugins.ViewSource",dijit._editor._Plugin,{
 				ed.queryCommandEnabled = ed._sourceQueryCommandEnabled;
 				if(!this._readOnly){
 					html = this.sourceArea.value;
-					html = this._filter(html);
 					ed.beginEditing();
+					// html will be filtered in setValue aspect.
 					ed.set("value", html);
 					ed.endEditing();
 				}
@@ -479,6 +486,17 @@ dojo.declare("dijit._editor.plugins.ViewSource",dijit._editor._Plugin,{
 		return html;
 	},
 
+	removeValueFilterHandles: function () {
+		if (this._setValueFilterHandle) {
+			dojo.disconnect(this._setValueFilterHandle);
+			delete this._setValueFilterHandle;
+		}
+		if (this._getValueFilterHandle) {
+			dojo.disconnect(this._getValueFilterHandle);
+			delete this._getValueFilterHandle;
+		}
+	},
+
 	setSourceAreaCaret: function(){
 		// summary:
 		//		Internal function to set the caret in the sourceArea
@@ -519,6 +537,7 @@ dojo.declare("dijit._editor.plugins.ViewSource",dijit._editor._Plugin,{
 			dojo.disconnect(this._resizeHandle);
 			delete this._resizeHandle;
 		}
+		this.removeValueFilterHandles();
 		this.inherited(arguments);
 	}
 });

diff --git a/tests/editor/test_ViewSource.html b/tests/editor/test_ViewSource.html
@@ -20,6 +20,16 @@
 		dojo.require("dijit._editor.plugins.ViewSource");
 		dojo.require("dijit._editor.plugins.FullScreen");
 		dojo.require("dojo.parser");	// scan page for widgets and instantiate them
+
+		dojo.ready(function () {
+			var editor = dijit.byId("editor7");
+			editor.set("value", "<h1>ViewSource Plugin with script tags in content set via setValue.</h1>" +
+					"<iframe srcdoc=\"<div>Hello from iFrame!</div>\"></iframe>" +
+					"<h2>Things to test:</h2>\n" +
+					"<ol>" +
+					"<li>An iframe should not be displayed.</li>" +
+					"</ol>");
+		});
 	</script>
 </head>
 <body class="claro">
@@ -109,6 +119,30 @@ <h2>Things to test:</h2>
 	</div>
 	<br>
 	<br>
+	<div>
+		<div id="editor6" data-dojo-type="dijit.Editor"
+			 data-dojo-props='extraPlugins:["fullscreen", "viewsource"],
+			style:"background-color: white; width: 800px;", height:"300px" '>
+			<h1>ViewSource Plugin with script tags in content.</h1>
+
+			<iframe srcdoc="<div>Hello from iFrame!</div>"></iframe>
+
+			<h2>Things to test:</h2>
+			<ol>
+				<li>An iframe should not be displayed.</li>
+			</ol>
+		</div>
+	</div>
+	<br>
+	<br>
+	<div>
+		<div id="editor7" data-dojo-type="dijit.Editor"
+			 data-dojo-props='extraPlugins:["fullscreen", "viewsource"],
+			style:"background-color: white; width: 800px;", height:"300px" '>
+		</div>
+	</div>
+	<br>
+	<br>
 	<div>Content after the editors.</div>
 </body>
 </html>