Welcome! » Log In » Create A New Profile

Allow dynamically generated base64 encoded SVG image

Posted by scorpion8182 
Allow dynamically generated base64 encoded SVG image
November 03, 2016 05:49AM


i have been struggling for some time to let an img (which i generated with javascript inside the Summernote html editor widget) like

<img src="data:image/svg+xml;charset=utf-8;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMjMuNzUiIGhlaWdodD0iMjIuMTI1Ij48c3dpdGNoPjxmb3JlaWduT2JqZWN0IHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIHJlcXVpcmVkRXh0ZW5zaW9ucz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94aHRtbCI+PGRpdiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94aHRtbCI+PHNwYW4gY2xhc3M9ImNsYXp6IiBzdHlsZT0iZm9udC1mYW1pbHk6IEhlbHZldGljYSBOZXVlLEhlbHZldGljYSxBcmlhbCxzYW5zLXNlcmlmO2JhY2tncm91bmQtY29sb3I6ICM1Y2I4NWM7Ym9yZGVyLXJhZGl1czogMC4yNWVtO2NvbG9yOiAjZmZmO2Rpc3BsYXk6IGlubGluZTtmb250LXNpemU6IDc1JTtmb250LXdlaWdodDogNzAwO2xpbmUtaGVpZ2h0OiAxO3BhZGRpbmc6IDAuMmVtIDAuNmVtIDAuM2VtO3RleHQtYWxpZ246IGNlbnRlcjt2ZXJ0aWNhbC1hbGlnbjogYmFzZWxpbmU7d2hpdGUtc3BhY2U6IG5vd3JhcDsiPm5vdGlmaWNhdGlvbl9ib2R5PC9zcGFuPjwvZGl2PjwvZm9yZWlnbk9iamVjdD48dGV4dCB4PSIwIiB5PSIwIj5Zb3VyIFNWRyB2aWV3ZXIgY2Fubm90IGRpc3BsYXkgaHRtbC48L3RleHQ+PC9zd2l0Y2g+PC9zdmc+" alt="Image Alternative" class="my_image_class">

pass through htmlpurifier. I need to generate those images on the fly and store them embedded in the html, which will be put in a database then for further processing.

I have been trying to set URI.AllowedSchemes (data=>true) and also HTML.AllowedElements to img and HTML.AllowedAttributes to img.src and img.alt and even img.class, but no avail. I also found out that the demo page per se lets img tags pass, something must be fishy with the src attribute. Even htmlpurifiers demo page errors out with "missing src attribute" and "removing src attribute".... odd... if atleast the demo page had ALL options available so one can quickly trial and error his way thru it... hmmm. So my question is, how can i let imgs in a form like this pass thru htmlpurifier ?

Thanks in advance.

Re: Allow dynamically generated base64 encoded SVG image
November 03, 2016 03:49PM

It should work if you turn on the data scheme (don't modify anything else). Can you post some self-contained code that is filtering out the img?

Re: Allow dynamically generated base64 encoded SVG image
November 04, 2016 07:34AM

It should work if you turn on the data scheme (don't modify anything else). Can you post some self-contained code that is filtering out the img?

Well, i have been using Htmlpurifier thru its Yii2 Wrapper. Furthermore, according to the sources (i assume those are the sources atleast) for URI.AllowedSchemes here https://github.com/ezyang/htmlpurifier/blob/master/library/HTMLPurifier/URIScheme/data.php#L16 only image/png, image/jpeg and image/gif are allowed there and svg would require some custom filter... So i tried to solve it by converting the SVG in Javascript via canvas.toDataURL() and canvas.getContext('2d').drawImage() as follows... ($style is just a PHP variable containing the style settings for the span... i use the Yii2 Framework... and "inject" this javascript into the PHP code so it is delivered together with the generated HTML. width and height are determined by getClientBoundsRect() )

var data = &#039;<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"&#039;+width+&#039;\" height=\"&#039;+height+&#039;\">&#039; + 
       //  &#039;<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"100%\" height=\"100%\">&#039; + 
           &#039;<switch>&#039; + 
           &#039;<foreignObject width=\"100%\" height=\"100%\" requiredExtensions=\"http://www.w3.org/1999/xhtml\">&#039; +
           &#039;<div xmlns=\"http://www.w3.org/1999/xhtml\">&#039; +  
              &#039;<span style=\"$style\">My Span</span>&#039; +
           &#039;</div>&#039; +
           &#039;</foreignObject>&#039; +
           &#039;<text x=\"0\" y=\"0\">Your SVG viewer cannot display html.</text>&#039; +
           &#039;</switch>&#039; + 

           var blob = new Blob([data], {type: &#039;image/svg+xml;charset=utf-8&#039;});
           var DOMURL = window.URL || window.webkitURL || window;

           //attempt to convert to png here... because Htmlpurifier didnt let the img pass... :)
           canv = document.createElement(&#039;canvas&#039;);
           canv.width = width;
           canv.height = height;
           ctx = canv.getContext(&#039;2d&#039;);
           img2 = new Image();

           var reader = new window.FileReader();
           reader.onloadend = function () {
              img2.onload = function() {
              ctx.globalAlpha = 1.0;
              ctx.drawImage(img2, 0, 0);

              var img = new Image();
              img.onload = function() {
                 //insert img to summernote editor here
              img.src = canv.toDataURL(&#039;image/png;charset=utf-8&#039;); // should be base64...      
              img.alt = &#039;alternative value&#039;
              img.setAttribute(&#039;class&#039;, &#039;myclass&#039;);
          img2.src = reader.result;

Htmlpurifier will let this pass when data=>true is added to URI.AllowedSchemes (via the Yii2 Wrapper -> HtmlPurifier::process()). Unfortunately the image being generated is only visible in firefox, chrome renders just a blank image (not a Htmlpurifier problem; but i assume there is something fishy with canvas.toDataURL() in chrome, the base64 result string is way shorter than the Firefox result.

Re: Allow dynamically generated base64 encoded SVG image
November 04, 2016 01:55PM

Ah! Well that certainly is a lot more specific problem. Not sure I can help about Chrome.

If you contribute a patch to make data understand svg I'd be happy to take it.

Your Email:


HTML input is enabled. Make sure you escape all HTML and angled brackets with &lt; and &gt;.

Auto-paragraphing is enabled. Double newlines will be converted to paragraphs; for single newlines, use the pre tag.

Allowed tags: a, abbr, acronym, b, blockquote, caption, cite, code, dd, del, dfn, div, dl, dt, em, i, ins, kbd, li, ol, p, pre, s, strike, strong, sub, sup, table, tbody, td, tfoot, th, thead, tr, tt, u, ul, var.

For inputting literal code such as HTML and PHP for display, use CDATA tags to auto-escape your angled brackets, and pre to preserve newlines:

Place code here

Power users, you can hide this notice with:

.htmlpurifier-help {display:none;}