Umbraco 8 Removing HTML Tags and Attributes From Macros in Back Office

Whilst upgrading a website from Umbraco 7 to 8, I hit on an issue whereby my macros would not render correctly in the back office. One of the key elements of a CMS is the ability for users to see their content faithfully re-created in a back office environment before publishing. My macros rendered correctly on the actual website (once published), but in the Umbraco 8 back office, html tags such as form, button, input, and attributes such as inline style were being removed from the DOM.

After copious amounts of research and postings on stackoverflow, I eventually stumbled upon the issue.

Tucked away in the umbraco/lib/angular-sanitize folder is an angular file called angular-sanitize. This class is responsible for 'sanitizing' html content displayed in the back office. The class contains the following variables that act as a white-list for html tags and attributes that are allowed to be rendered in the Umbraco 8 back-office:-

 // Safe Block Elements - HTML5
 var blockElements = extend({}, optionalEndTagBlockElements, stringToMap('address,article,' +
 'aside,blockquote,caption,center,del,dir,div,dl,figure,figcaption,footer,h1,h2,h3,h4,h5,' +
 'h6,header,hgroup,hr,ins,map,menu,nav,ol,pre,section,table,ul,form')); //SG: added form

 // Inline Elements - HTML5
 var inlineElements = extend({}, optionalEndTagInlineElements, stringToMap('a,abbr,acronym,b,' +
 'bdi,bdo,big,br,cite,code,del,dfn,em,font,i,img,ins,kbd,label,map,mark,q,ruby,rp,rt,s,' +
 'samp,small,span,strike,strong,sub,sup,time,tt,u,var,input,button')); //SG: added input, button

 var htmlAttrs = stringToMap('abbr,align,alt,axis,bgcolor,border,cellpadding,cellspacing,class,clear,' +
 'color,cols,colspan,compact,coords,dir,face,headers,height,hreflang,hspace,' +
 'ismap,lang,language,nohref,nowrap,rel,rev,rows,rowspan,rules,' +
 'scope,scrolling,shape,size,span,start,summary,tabindex,target,title,type,' +
 'valign,value,vspace,width,action,method,autocomplete,enctype,style'); //SG: Added action,method,autocomplete,enctype,style

You can see from the above that I have added form, input, button and various form attributes. The reason these have been stripped out of the Umbraco back office is for security, so allowing them could pose a minor risk, but its one I am prepared to live with so my users can see their content rendered correctly.

Hopefully this advice will help you when trying to fix your missing html content for macros in the Umbraco 8 back office.