From 46bc7d8306a4a00b716e02d037223f6e9eb13736 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?P=C4=93teris=20Caune?= Date: Fri, 26 Feb 2021 16:25:39 +0200 Subject: [PATCH] Improve HTML email display in the "Ping Details" dialog --- CHANGELOG.md | 1 + static/css/ping_details.css | 8 ++++++++ static/js/details.js | 10 ++++++++++ static/js/log.js | 14 ++++++++++++-- static/js/purify.min.js | 3 +++ templates/front/details.html | 1 + templates/front/log.html | 1 + templates/front/ping_details.html | 1 + 8 files changed, 37 insertions(+), 2 deletions(-) create mode 100644 static/js/purify.min.js diff --git a/CHANGELOG.md b/CHANGELOG.md index 7acb3d47..3c108edf 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -7,6 +7,7 @@ All notable changes to this project will be documented in this file. - Rename VictorOps -> Splunk On-Call - Implement email body decoding in the "Ping Details" dialog - Add a "Subject" field in the "Ping Details" dialog +- Improve HTML email display in the "Ping Details" dialog ## Bug Fixes - Fix downtime summary to handle months when the check didn't exist yet (#472) diff --git a/static/css/ping_details.css b/static/css/ping_details.css index b6e4012c..226ae6d4 100644 --- a/static/css/ping_details.css +++ b/static/css/ping_details.css @@ -23,4 +23,12 @@ #ping-details-body pre { padding: 16px; margin: 0; + max-height: 500px; +} + +#email-body-html-iframe { + border: 0; + width: 100%; + height: 500px; + background: #f5f5f5; } diff --git a/static/js/details.js b/static/js/details.js index 611d82e7..cafaa6cf 100644 --- a/static/js/details.js +++ b/static/js/details.js @@ -132,6 +132,16 @@ $(function () { $.get(this.dataset.url, function(data) { $("#ping-details-body").html(data); + + var htmlPre = $("#email-body-html pre"); + if (htmlPre.length) { + var opts = {USE_PROFILES: {html: true}}; + var clean = DOMPurify.sanitize(htmlPre.text(), opts); + var blob = new Blob([clean], {type: "text/html"}); + + htmlPre.remove(); + document.getElementById("email-body-html-iframe").src = URL.createObjectURL(blob); + } } ); diff --git a/static/js/log.js b/static/js/log.js index e4a190e1..3b65cd50 100644 --- a/static/js/log.js +++ b/static/js/log.js @@ -5,6 +5,16 @@ $(function () { $.get(this.dataset.url, function(data) { $("#ping-details-body").html(data); + + var htmlPre = $("#email-body-html pre"); + if (htmlPre.length) { + var opts = {USE_PROFILES: {html: true}}; + var clean = DOMPurify.sanitize(htmlPre.text(), opts); + var blob = new Blob([clean], {type: "text/html"}); + + htmlPre.remove(); + document.getElementById("email-body-html-iframe").src = URL.createObjectURL(blob); + } }); return false; @@ -16,8 +26,8 @@ $(function () { format == "local" ? dt.local() : dt.tz(format); $(".date", row).text(dt.format("MMM D")); - $(".time", row).text(dt.format("HH:mm")); - }) + $(".time", row).text(dt.format("HH:mm")); + }) } $("#format-switcher").click(function(ev) { diff --git a/static/js/purify.min.js b/static/js/purify.min.js new file mode 100644 index 00000000..8c121b49 --- /dev/null +++ b/static/js/purify.min.js @@ -0,0 +1,3 @@ +/*! @license DOMPurify | (c) Cure53 and other contributors | Released under the Apache license 2.0 and Mozilla Public License 2.0 | github.com/cure53/DOMPurify/blob/2.2.2/LICENSE */ +!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t():"function"==typeof define&&define.amd?define(t):(e=e||self).DOMPurify=t()}(this,(function(){"use strict";var e=Object.hasOwnProperty,t=Object.setPrototypeOf,n=Object.isFrozen,r=Object.getPrototypeOf,o=Object.getOwnPropertyDescriptor,i=Object.freeze,a=Object.seal,l=Object.create,c="undefined"!=typeof Reflect&&Reflect,s=c.apply,u=c.construct;s||(s=function(e,t,n){return e.apply(t,n)}),i||(i=function(e){return e}),a||(a=function(e){return e}),u||(u=function(e,t){return new(Function.prototype.bind.apply(e,[null].concat(function(e){if(Array.isArray(e)){for(var t=0,n=Array(e.length);t1?n-1:0),o=1;o/gm),U=a(/^data-[\-\w.\u00B7-\uFFFF]/),j=a(/^aria-[\-\w]+$/),P=a(/^(?:(?:(?:f|ht)tps?|mailto|tel|callto|cid|xmpp):|[^a-z]|[a-z+.\-]+(?:[^a-z+.\-:]|$))/i),B=a(/^(?:\w+script|data):/i),W=a(/[\u0000-\u0020\u00A0\u1680\u180E\u2000-\u2029\u205F\u3000]/g),G="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e};function q(e){if(Array.isArray(e)){for(var t=0,n=Array(e.length);t0&&void 0!==arguments[0]?arguments[0]:K(),n=function(t){return e(t)};if(n.version="2.2.6",n.removed=[],!t||!t.document||9!==t.document.nodeType)return n.isSupported=!1,n;var r=t.document,o=t.document,a=t.DocumentFragment,l=t.HTMLTemplateElement,c=t.Node,s=t.Element,u=t.NodeFilter,f=t.NamedNodeMap,x=void 0===f?t.NamedNodeMap||t.MozNamedAttrMap:f,Y=t.Text,X=t.Comment,$=t.DOMParser,Z=t.trustedTypes,J=s.prototype,Q=k(J,"cloneNode"),ee=k(J,"nextSibling"),te=k(J,"childNodes"),ne=k(J,"parentNode");if("function"==typeof l){var re=o.createElement("template");re.content&&re.content.ownerDocument&&(o=re.content.ownerDocument)}var oe=V(Z,r),ie=oe&&ze?oe.createHTML(""):"",ae=o,le=ae.implementation,ce=ae.createNodeIterator,se=ae.getElementsByTagName,ue=ae.createDocumentFragment,fe=r.importNode,me={};try{me=S(o).documentMode?o.documentMode:{}}catch(e){}var de={};n.isSupported=le&&void 0!==le.createHTMLDocument&&9!==me;var pe=z,ge=H,he=U,ye=j,ve=B,be=W,Te=P,Ae=null,xe=w({},[].concat(q(R),q(_),q(D),q(N),q(L))),we=null,Se=w({},[].concat(q(M),q(F),q(C),q(I))),ke=null,Re=null,_e=!0,De=!0,Ee=!1,Ne=!1,Oe=!1,Le=!1,Me=!1,Fe=!1,Ce=!1,Ie=!0,ze=!1,He=!0,Ue=!0,je=!1,Pe={},Be=w({},["annotation-xml","audio","colgroup","desc","foreignobject","head","iframe","math","mi","mn","mo","ms","mtext","noembed","noframes","noscript","plaintext","script","style","svg","template","thead","title","video","xmp"]),We=null,Ge=w({},["audio","video","img","source","image","track"]),qe=null,Ke=w({},["alt","class","for","id","label","name","pattern","placeholder","summary","title","value","style","xmlns"]),Ve=null,Ye=o.createElement("form"),Xe=function(e){Ve&&Ve===e||(e&&"object"===(void 0===e?"undefined":G(e))||(e={}),e=S(e),Ae="ALLOWED_TAGS"in e?w({},e.ALLOWED_TAGS):xe,we="ALLOWED_ATTR"in e?w({},e.ALLOWED_ATTR):Se,qe="ADD_URI_SAFE_ATTR"in e?w(S(Ke),e.ADD_URI_SAFE_ATTR):Ke,We="ADD_DATA_URI_TAGS"in e?w(S(Ge),e.ADD_DATA_URI_TAGS):Ge,ke="FORBID_TAGS"in e?w({},e.FORBID_TAGS):{},Re="FORBID_ATTR"in e?w({},e.FORBID_ATTR):{},Pe="USE_PROFILES"in e&&e.USE_PROFILES,_e=!1!==e.ALLOW_ARIA_ATTR,De=!1!==e.ALLOW_DATA_ATTR,Ee=e.ALLOW_UNKNOWN_PROTOCOLS||!1,Ne=e.SAFE_FOR_TEMPLATES||!1,Oe=e.WHOLE_DOCUMENT||!1,Fe=e.RETURN_DOM||!1,Ce=e.RETURN_DOM_FRAGMENT||!1,Ie=!1!==e.RETURN_DOM_IMPORT,ze=e.RETURN_TRUSTED_TYPE||!1,Me=e.FORCE_BODY||!1,He=!1!==e.SANITIZE_DOM,Ue=!1!==e.KEEP_CONTENT,je=e.IN_PLACE||!1,Te=e.ALLOWED_URI_REGEXP||Te,Ne&&(De=!1),Ce&&(Fe=!0),Pe&&(Ae=w({},[].concat(q(L))),we=[],!0===Pe.html&&(w(Ae,R),w(we,M)),!0===Pe.svg&&(w(Ae,_),w(we,F),w(we,I)),!0===Pe.svgFilters&&(w(Ae,D),w(we,F),w(we,I)),!0===Pe.mathMl&&(w(Ae,N),w(we,C),w(we,I))),e.ADD_TAGS&&(Ae===xe&&(Ae=S(Ae)),w(Ae,e.ADD_TAGS)),e.ADD_ATTR&&(we===Se&&(we=S(we)),w(we,e.ADD_ATTR)),e.ADD_URI_SAFE_ATTR&&w(qe,e.ADD_URI_SAFE_ATTR),Ue&&(Ae["#text"]=!0),Oe&&w(Ae,["html","head","body"]),Ae.table&&(w(Ae,["tbody"]),delete ke.tbody),i&&i(e),Ve=e)},$e=w({},["mi","mo","mn","ms","mtext"]),Ze=w({},["foreignobject","desc","title","annotation-xml"]),Je=w({},_);w(Je,D),w(Je,E);var Qe=w({},N);w(Qe,O);var et="http://www.w3.org/1998/Math/MathML",tt="http://www.w3.org/2000/svg",nt="http://www.w3.org/1999/xhtml",rt=function(e){var t=ne(e);t&&t.tagName||(t={namespaceURI:nt,tagName:"template"});var n=g(e.tagName),r=g(t.tagName);if(e.namespaceURI===tt)return t.namespaceURI===nt?"svg"===n:t.namespaceURI===et?"svg"===n&&("annotation-xml"===r||$e[r]):Boolean(Je[n]);if(e.namespaceURI===et)return t.namespaceURI===nt?"math"===n:t.namespaceURI===tt?"math"===n&&Ze[r]:Boolean(Qe[n]);if(e.namespaceURI===nt){if(t.namespaceURI===tt&&!Ze[r])return!1;if(t.namespaceURI===et&&!$e[r])return!1;var o=w({},["title","style","font","a","script"]);return!Qe[n]&&(o[n]||!Je[n])}return!1},ot=function(e){p(n.removed,{element:e});try{e.parentNode.removeChild(e)}catch(t){try{e.outerHTML=ie}catch(t){e.remove()}}},it=function(e,t){try{p(n.removed,{attribute:t.getAttributeNode(e),from:t})}catch(e){p(n.removed,{attribute:null,from:t})}t.removeAttribute(e)},at=function(e){var t=void 0,n=void 0;if(Me)e=""+e;else{var r=h(e,/^[\r\n\t ]+/);n=r&&r[0]}var i=oe?oe.createHTML(e):e;try{t=(new $).parseFromString(i,"text/html")}catch(e){}if(!t||!t.documentElement){var a=(t=le.createHTMLDocument("")).body;a.parentNode.removeChild(a.parentNode.firstElementChild),a.outerHTML=i}return e&&n&&t.body.insertBefore(o.createTextNode(n),t.body.childNodes[0]||null),se.call(t,Oe?"html":"body")[0]},lt=function(e){return ce.call(e.ownerDocument||e,e,u.SHOW_ELEMENT|u.SHOW_COMMENT|u.SHOW_TEXT,(function(){return u.FILTER_ACCEPT}),!1)},ct=function(e){return!(e instanceof Y||e instanceof X)&&!("string"==typeof e.nodeName&&"string"==typeof e.textContent&&"function"==typeof e.removeChild&&e.attributes instanceof x&&"function"==typeof e.removeAttribute&&"function"==typeof e.setAttribute&&"string"==typeof e.namespaceURI&&"function"==typeof e.insertBefore)},st=function(e){return"object"===(void 0===c?"undefined":G(c))?e instanceof c:e&&"object"===(void 0===e?"undefined":G(e))&&"number"==typeof e.nodeType&&"string"==typeof e.nodeName},ut=function(e,t,r){de[e]&&m(de[e],(function(e){e.call(n,t,r,Ve)}))},ft=function(e){var t=void 0;if(ut("beforeSanitizeElements",e,null),ct(e))return ot(e),!0;if(h(e.nodeName,/[\u0080-\uFFFF]/))return ot(e),!0;var r=g(e.nodeName);if(ut("uponSanitizeElement",e,{tagName:r,allowedTags:Ae}),!st(e.firstElementChild)&&(!st(e.content)||!st(e.content.firstElementChild))&&T(/<[/\w]/g,e.innerHTML)&&T(/<[/\w]/g,e.textContent))return ot(e),!0;if(!Ae[r]||ke[r]){if(Ue&&!Be[r])for(var o=ne(e),i=te(e),a=i.length-1;a>=0;--a)o.insertBefore(Q(i[a],!0),ee(e));return ot(e),!0}return e instanceof s&&!rt(e)?(ot(e),!0):"noscript"!==r&&"noembed"!==r||!T(/<\/no(script|embed)/i,e.innerHTML)?(Ne&&3===e.nodeType&&(t=e.textContent,t=y(t,pe," "),t=y(t,ge," "),e.textContent!==t&&(p(n.removed,{element:e.cloneNode()}),e.textContent=t)),ut("afterSanitizeElements",e,null),!1):(ot(e),!0)},mt=function(e,t,n){if(He&&("id"===t||"name"===t)&&(n in o||n in Ye))return!1;if(De&&T(he,t));else if(_e&&T(ye,t));else{if(!we[t]||Re[t])return!1;if(qe[t]);else if(T(Te,y(n,be,"")));else if("src"!==t&&"xlink:href"!==t&&"href"!==t||"script"===e||0!==v(n,"data:")||!We[e]){if(Ee&&!T(ve,y(n,be,"")));else if(n)return!1}else;}return!0},dt=function(e){var t=void 0,r=void 0,o=void 0,i=void 0;ut("beforeSanitizeAttributes",e,null);var a=e.attributes;if(a){var l={attrName:"",attrValue:"",keepAttr:!0,allowedAttributes:we};for(i=a.length;i--;){var c=t=a[i],s=c.name,u=c.namespaceURI;if(r=b(t.value),o=g(s),l.attrName=o,l.attrValue=r,l.keepAttr=!0,l.forceKeepAttr=void 0,ut("uponSanitizeAttribute",e,l),r=l.attrValue,!l.forceKeepAttr&&(it(s,e),l.keepAttr))if(T(/\/>/i,r))it(s,e);else{Ne&&(r=y(r,pe," "),r=y(r,ge," "));var f=e.nodeName.toLowerCase();if(mt(f,o,r))try{u?e.setAttributeNS(u,s,r):e.setAttribute(s,r),d(n.removed)}catch(e){}}}ut("afterSanitizeAttributes",e,null)}},pt=function e(t){var n=void 0,r=lt(t);for(ut("beforeSanitizeShadowDOM",t,null);n=r.nextNode();)ut("uponSanitizeShadowNode",n,null),ft(n)||(n.content instanceof a&&e(n.content),dt(n));ut("afterSanitizeShadowDOM",t,null)};return n.sanitize=function(e,o){var i=void 0,l=void 0,s=void 0,u=void 0,f=void 0;if(e||(e="\x3c!--\x3e"),"string"!=typeof e&&!st(e)){if("function"!=typeof e.toString)throw A("toString is not a function");if("string"!=typeof(e=e.toString()))throw A("dirty is not a string, aborting")}if(!n.isSupported){if("object"===G(t.toStaticHTML)||"function"==typeof t.toStaticHTML){if("string"==typeof e)return t.toStaticHTML(e);if(st(e))return t.toStaticHTML(e.outerHTML)}return e}if(Le||Xe(o),n.removed=[],"string"==typeof e&&(je=!1),je);else if(e instanceof c)1===(l=(i=at("\x3c!----\x3e")).ownerDocument.importNode(e,!0)).nodeType&&"BODY"===l.nodeName||"HTML"===l.nodeName?i=l:i.appendChild(l);else{if(!Fe&&!Ne&&!Oe&&-1===e.indexOf("<"))return oe&&ze?oe.createHTML(e):e;if(!(i=at(e)))return Fe?null:ie}i&&Me&&ot(i.firstChild);for(var m=lt(je?e:i);s=m.nextNode();)3===s.nodeType&&s===u||ft(s)||(s.content instanceof a&&pt(s.content),dt(s),u=s);if(u=null,je)return e;if(Fe){if(Ce)for(f=ue.call(i.ownerDocument);i.firstChild;)f.appendChild(i.firstChild);else f=i;return Ie&&(f=fe.call(r,f,!0)),f}var d=Oe?i.outerHTML:i.innerHTML;return Ne&&(d=y(d,pe," "),d=y(d,ge," ")),oe&&ze?oe.createHTML(d):d},n.setConfig=function(e){Xe(e),Le=!0},n.clearConfig=function(){Ve=null,Le=!1},n.isValidAttribute=function(e,t,n){Ve||Xe({});var r=g(e),o=g(t);return mt(r,o,n)},n.addHook=function(e,t){"function"==typeof t&&(de[e]=de[e]||[],p(de[e],t))},n.removeHook=function(e){de[e]&&d(de[e])},n.removeHooks=function(e){de[e]&&(de[e]=[])},n.removeAllHooks=function(){de={}},n}()})); +//# sourceMappingURL=purify.min.js.map diff --git a/templates/front/details.html b/templates/front/details.html index 86e6bf67..30fc855d 100644 --- a/templates/front/details.html +++ b/templates/front/details.html @@ -330,6 +330,7 @@ + diff --git a/templates/front/log.html b/templates/front/log.html index 0e8f1edc..147fe258 100644 --- a/templates/front/log.html +++ b/templates/front/log.html @@ -148,6 +148,7 @@ + {% endcompress %} {% endblock %} diff --git a/templates/front/ping_details.html b/templates/front/ping_details.html index 3e7857a4..b64219fc 100644 --- a/templates/front/ping_details.html +++ b/templates/front/ping_details.html @@ -106,6 +106,7 @@ {% if html %} 
{{ html }}
+
{% endif %}