Osticket: OsTicket 1.10 is stripping out html tags and params from canned responses

[MendesMartini]

Hello,

I have some canned responses that are making use of inline css styles (style=) and div tags.

In OsTicket 1.9 I had no problems with that, but after the update to version 1.10 the inline style params, divs and other html tags are stripped out when I select a canned response.

Please, look the attached files.

File "1": the saved canned response

File "2": the result when I try to use the response

This is an issue or a new configuration that can be modified?

I apologize for my bad English.

[theking81]

Do we have any comments on this bug by the team?

[rayfoss]

For reference it will turn this:

<div class="signature-preview-pane">
                <h2 class="sig-header">Signature Preview</h2>
                <div id="signature-preview"><div id="preview-name" style="padding-bottom: 5px; color: #F7751F; font-size: 18px; font-family: Arial, Helvetica, sans-serif;">John Doe</div>
                    <div id="preview-job-title" style="color: #333333; font-size: 14px; font-family: Arial, Helvetica, sans-serif;"><i>Businessman</i></div>
                    <div id="preview-department" style="color: #333333; font-size: 14px; font-family: Arial, Helvetica, sans-serif;">Sales Department</div>
                    <div id="preview-company-name" style="color: #333333; font-size: 14px; font-family: Arial, Helvetica, sans-serif;"><strong>John Doe Ltd</strong></div>
                    <div class="preview-phone" style="color: #333333; font-size: 14px; font-family: Arial, Helvetica, sans-serif;"><span style="display: inline-block; width: 20px; color: #F7751F;">p:</span><span id="preview-office-phone">02 1234 5678</span>&nbsp;&nbsp;<span style="display: inline-block; width: 20px; color: #F7751F;">m:</span><span id="preview-mobile-phone">0412 345 678</span></div>
                    <div class="preview-fax" style="color: #333333; font-size: 14px; font-family: Arial, Helvetica, sans-serif;"><span style="display: inline-block; width: 20px; color: #F7751F;">f:</span><span id="preview-office-fax">02 1234 8765</span></div>
                    <div class="preview-address-l1" style="color: #333333; font-size: 14px; font-family: Arial, Helvetica, sans-serif;"><span style="display: inline-block; width: 20px; color: #F7751F;">a:</span><span id="preview-address-1">5 Something St</span></div>
                    <div class="preview-address-l2" style="color: #333333; font-size: 14px; font-family: Arial, Helvetica, sans-serif;"><span style="display: inline-block; width: 20px; color: #F7751F;">&nbsp;</span><span id="preview-address-2">Somewhere NSW 2000</span></div>
                    <div class="preview-web-email" style="color: #333333; font-size: 14px; font-family: Arial, Helvetica, sans-serif;"><span style="display: inline-block; width: 20px; color: #F7751F;">w:</span><span id="preview-website"><a href="http://www.example.com" style=" color: #1da1db; text-decoration: none; font-weight: normal;">www.example.com</a></span>&nbsp;&nbsp;<span style="display: inline-block; width: 20px; color: #F7751F;">e:</span><span id="preview-email"><a href="mailto:[email protected]" style="color: #1da1db; text-decoration: none; font-weight: normal;">[email protected]</a></span></div>
                    <div class="preview-image-url" style="padding-bottom: 8px; padding-top: 5px;"><img id="preview-image-url" src="//cdn2.hubspot.net/hubfs/184235/dev_images/signature_app/avatar_sig.png?t=1486652603358"></div>
                    <div class="preview-social-icons"><img id="facebook-icon" src="//cdn2.hubspot.net/hubfs/184235/dev_images/signature_app/facebook_sig.png?t=1486652603358">&nbsp;&nbsp;<img id="twitter-icon" src="//cdn2.hubspot.net/hubfs/184235/dev_images/signature_app/twitter_sig.png?t=1486652603358">&nbsp;&nbsp;<img id="linkedin-icon" src="//cdn2.hubspot.net/hubfs/184235/dev_images/signature_app/linkedin_sig.png?t=1486652603358">&nbsp;&nbsp;<img id="instagram-icon" src="//cdn2.hubspot.net/hubfs/184235/dev_images/signature_app/instagram_sig.png?t=1486652603358"></div>
                </div>
                <div class="under-sig-preview">
                    <div class="sig-label">
                        <label class="sig-input-label" for="sig-theme-1">Choose a theme for your signature:</label>
                    </div>
                    <div class="sig-input">
                        <select class="sig-input-field" id="sig-theme-1">
                            <option value="classic-image-bottom" selected="">Classic - Image Bottom</option>
                            <option value="classic-image-top">Classic - Image Top</option>
                            <option value="classic-image-below-name">Classic - Image Below Name</option>
                            <option value="compact-image-bottom">Compact - Image Bottom</option>
                            <option value="compact-image-top">Compact - Image Top</option>
                            <option value="compact-image-below-name">Compact - Image Below Name</option>
                            <option value="image-left">Image Left - 2 Column</option>
                            <option value="compact-image-left">Image Left - Compact</option>
                        </select>
                    </div>
                    <div class="generate-sig-button">
                        <button type="button" id="generate-sig-rhs" class="sig-button-disabled">Create Signature</button>
                        <div id="generate-validation-messages-rhs">
                            <p class="validation-error">Complete the form to enable the "Create Signature" button.</p>
                        </div>
                    </div>
                </div>
            </div>

Into this:

<h2>Signature Preview</h2> John Doe<br><i>Businessman</i><br> Sales Department<br><strong>John Doe Ltd</strong><br><span style="display:inline-block;width:20px;color:#F7751F">p:</span>02 1234 5678 <span style="display:inline-block;width:20px;color:#F7751F">m:</span>0412 345 678<br><span style="display:inline-block;width:20px;color:#F7751F">f:</span>02 1234 8765<br><span style="display:inline-block;width:20px;color:#F7751F">a:</span>5 Something St<br> Somewhere NSW 2000<br><span style="display:inline-block;width:20px;color:#F7751F">w:</span><a href="http://www.example.com" rel="color:#1da1db;text-decoration:none;font-weight:normal">www.example.com</a> <span style="display:inline-block;width:20px;color:#F7751F">e:</span><a href="mailto:[email protected]" rel="color:#1da1db;text-decoration:none;font-weight:normal">[email protected]</a><br><img src="//cdn2.hubspot.net/hubfs/184235/dev_images/signature_app/avatar_sig.png?t=1486652603358" alt="image" width="86" height="87"><br><img src="//cdn2.hubspot.net/hubfs/184235/dev_images/signature_app/facebook_sig.png?t=1486652603358" alt="image" width="25" height="25"><img src="//cdn2.hubspot.net/hubfs/184235/dev_images/signature_app/twitter_sig.png?t=1486652603358" alt="image" width="25" height="25"><img src="//cdn2.hubspot.net/hubfs/184235/dev_images/signature_app/linkedin_sig.png?t=1486652603358" alt="image" width="25" height="25"><img src="//cdn2.hubspot.net/hubfs/184235/dev_images/signature_app/instagram_sig.png?t=1486652603358" alt="image" width="25" height="25"><br><label>Choose a theme for your signature:</label> <br>
<select>
    <option>Classic - Image Bottom</option>
    <option>Classic - Image Top</option>
    <option>Classic - Image Below Name</option>
    <option>Compact - Image Bottom</option>
    <option>Compact - Image Top</option>
    <option>Compact - Image Below Name</option>
    <option>Image Left - 2 Column</option>
    <option>Image Left - Compact</option>
</select><br><button>Create Signature</button> Complete the form to enable the "Create Signature" button.<br><br><br>

[lorix74]

Please, can you give us any clues about this problem.
We use a lot the canned response and when I insert one of this the html tags are automatically stripped.
Please let me know
thanks

[Xm4Tr1X]

Try to use tables. Some of the block level elements get stripped. You cant use div or p . But you can use table. For styling use the style attribute. For making email compatible with different providers, you'll have to do a bit of research. But fundamentally the structure is based on table

Tl:dr use tables.

[MendesMartini]

Nevermind.

We've moved our support to Freshdesk.com, which does not destroy our canned responses.

[kainjow]

We just ran into this problem. We were trying to insert some code into a canned response and that included the "<" character. We used an entity instead ("\<") and that fixed it. Would be nice to escape these automatically.

[snizzleorg]

Anybody found a way around this? I want to send customers a simple rating email which they can click. Something like this: https://codepen.io/maxxscholten/pen/zxegjL

But all the css etc. gets stripped out. Is there any way of having osticket send an html file instead?

[JediKev]

@snizzleorg of course! Upon adding a new Canned Response or upon editing an existing Canned Response you can add what's called Canned Attachments. You can attach any allowed file(s) there and the system should send the file(s) with the Canned Response every time. Cheers.

[snizzleorg]

Yeah. obviously. However I do not want an attachment. I want the html to be the message body.

[JediKev]

@snizzleorg

You specifically asked "Is there any way of having osticket send an html file instead?" so I figured you meant an actual HTML file...

If you want HTML in the message body then you can look into how we strip the tags from there (via custom Redactor plugins and PHP functions) and modify the functions to do what you want. Otherwise, you'll have to wait until this becomes a feature in a future release.

Cheers.

[snizzleorg]

Thanks. I worked my way around it and now use a script that parses the database. That makes upgrading osTicket probably much easier since I do not have to modify the source code when osticket is updated.

I also get why the html must be stripped...

[JediKev]

@snizzleorg Ah, yes that'll make upgrading much easier. When you modify the codebase it's difficult because all of your mods will be overwritten with the new code (unless you go through and tediously copy every mod and their line numbers, etc. and re-paste them after the upgrade; and that's if nothing changed around the mod, if stuff did change then you'll have to go in and resolve all the conflicts). If you modify the database _at all_ you have a huge chance of ruining the upgrade. I've seen it before where people modified certain database tables or even certain form field names via the database and it literally prevented them from upgrading because something wasn't right or the changes broke something. That's no fun to go through and un-modify everything just to get you back on track. Your way of adding a script is ideal because you can move the script to a separate directory, upgrade, and move it back with no issues. I really hate that we strip HTML tags and such (because I need to send people code sometimes) but people _love_ to hack and find any way possible to enter XSS and ruin your day; so it simply makes sense to strip it all out. We are looking into how we can allow people to enter code blocks in the responses and such but it's super tedious. You can't allow _any_ chance of XSS. So needless to say this is something we are thinking of and looking into for future versions. 😉

[JensEB]

I had the same Problem.
I created a nice canned response with style definition and it works fine on creating a response.
But if I had selected a canned response, the style-tags were stripped away...
I found the reason for it. The problem is the editor. It stipes the html-Tags...
I changed the input of the canned response from ajax call.
If you want to do this, change line 218 from ./scp/js/scp.js
from
redactor.insert.html(canned.response);
to
redactor.insert.html(canned.response, false);

false means no stripping...