CODEWITHSUNDEEP
htmlumbracoumbraco8
Codebricks
Codebricks

Reputation: 1253

Umbraco 8 Macro Certain HTML Tags Not Rendered in Back Office

I am upgrading a project from Umbraco 7 to 8. I have noticed that in 8, only certain html tags will render from the macro html file. For example, if I use the following html in my macro partial view:-

<div>
    <button>send</button>
    <input type='text' placeholder='some field' style='border: solid 1px #000' />
    <a href="https://www.google.com">some link</a>
</div>

In the back office, the html in the DOM renders as follows:-

enter image description here

The A tag and div render fine, but the button and input are stripped. I have tried using HTML.Raw to no avail.

When I publish the content it renders fine:- enter image description here

Anybody come across this in Umbraco 8?

Upvotes: 0

Views: 464

Answers (1)

Codebricks
Codebricks

Reputation: 1253

Turns out the HTML tags and attributes are being stripped by the Umbraco/lib/angular-sanitize/angular-sanitize.js file.

There are a set of white-list variables that you add to add your html tags and attibutes to - the back office will then render them.

    // 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

  // Blocked Elements (will be stripped)
  var blockedElements = stringToMap('script'); //SG: Removed ,style

  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 read more about this umbraco 8 'feature' here - https://www.stephengarside.co.uk/blog/webdev/umbraco-8-removing-html-tags-and-attributes-from-macros-in-back-office/

Upvotes: 0

Related Questions