Stripping client-side events from the HTML content of RadEditor

HOW-TO
Strip client-side events from the HTML content of RadEditor

DESCRIPTION
When the editor's AllowScripts property is set to "false" then the editor will strip only the <script> tags in the content area, but it will not strip the client-side event related attributes (onclick, onmousedown, onmouseover, etc) applied to the different HTML elements as well as href="javascript:doSomething();" attribute of the link tags.

SOLUTION
To strip all client-side event related attributes you can use a content filter as it is shown in the code below:

<telerik:radeditor runat="server" ID="RadEditor1" OnClientLoad="OnClientLoad">

<Content>

<a href="javascript:doSomething();" >Click here</a>

<div onclick="alert();">Click Here</div>

</Content>

</telerik:radeditor>

<script type="text/javascript">

function OnClientLoad(editor, args)

{

editor.get_FiltersManager().add(new MyFilter());

}

MyFilter = function()

{

MyFilter.initializeBase(this);

this.set_isDom(false);

this.set_enabled(true);

this.set_name("RadEditor filter");

this.set_description("RadEditor filter description");

}

MyFilter.prototype =

{

getHtmlContent : function(content)

{

var dom = document.createElement("DIV");

dom.innerHTML = content;

var elems = dom.getElementsByTagName("*");

for (var i=0; i < elems.length; i++)

{

//Remove all onmouseover, onmouseout, onclick eventhandlers from element

var elem = elems[i];

elem.removeAttribute("onmouseover");

elem.removeAttribute("onmouseout");

elem.removeAttribute("onclick");

//remove other eventhandlers that you do not want to be included in the content

if (elem.tagName == "A")

{

if(elem.href.indexOf("javascript:") == 0) //if the href values of the link tags start with javascript:  then set href="#""

{

elem.setAttribute("href", "#");

}

}

}

return dom.innerHTML;

}

}

MyFilter.registerClass('MyFilter', Telerik.Web.UI.Editor.Filter);

</script>