-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
2 changed files
with
73 additions
and
4 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1 +1,62 @@ | ||
<!DOCTYPE html><html><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1"><meta http-equiv="X-UA-Compatible" content="ie=edge"><meta name="theme-color" content="#017f8e"><meta name="description" content="HtmlHelper.cfc: minifyHtml() to get rid of CFML generated whitespace, or use encodeTrustedHtml() to encode HTML of a trusted source that has unencoded characters in inner Html"><meta name="robots" content="index,follow"><meta itemprop="name" content="minifyHtml() and encodeTrustedHtml() | A basic Html Helper Component for CFML"><meta property="og:url" content="https:</script><script> const elements = document.querySelectorAll('code'); elements.forEach((element) => { element.classList.add('language-html'); }); const aTags = document.querySelectorAll('a'); aTags.forEach((element) => { element.setAttribute('target', '_blank'); }); hljs.highlightAll(); </script></body></html> | ||
<!DOCTYPE html><html><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1"><meta http-equiv="X-UA-Compatible" content="ie=edge"><meta name="theme-color" content="#017f8e"><meta name="description" content="HtmlHelper.cfc: minifyHtml() to get rid of CFML generated whitespace, or use encodeTrustedHtml() to encode HTML of a trusted source that has unencoded characters in inner Html"><meta name="robots" content="index,follow"><meta itemprop="name" content="minifyHtml() and encodeTrustedHtml() | A basic Html Helper Component for CFML"><meta property="og:url" content="https://andreasru.github.io/cfml-htmlhelper/"><meta property="og:title" content="minifyHtml() and encodeTrustedHtml() | A basic Html Helper Component for CFML"><meta property="og:type" content="website"><meta property="og:site_name" content="A basic Html Helper Component for CFML"><meta property="og:description" content="HtmlHelper.cfc: minifyHtml() to get rid of CFML generated whitespace, or use encodeTrustedHtml() to encode HTML of a trusted source that has unencoded characters in inner Html"><title>HtmlHelper.cfc: minifyHtml() & encodeTrustedHtml() in your CFML Projects</title><link rel="stylesheet" href="libs/normalizecss/normalize.min.css"><link rel="stylesheet" href="libs/highlightjs/highlightjs_styles_default.min.css"><link rel="stylesheet" href="libs/highlightjs/highlightjs_atom-one-dark.min.css"><link rel="stylesheet" href="libs/main.css"><link rel="stylesheet" href="libs/open-sans.css"></head><body><span id="forkongithub"><a href="https://github.com/andreasRu/cfml-htmlhelper"> Fork me on GitHub</a></span><h1>HtmlHelper.cfc (Vers. 0.9.2)</h1><hr /><p><strong><em>Minify your CFML generated HTML at runtime!</em></strong></p><p></p><h2>A simple basic CFML component to</h2><blockquote><ul><li><strong>minify CFML generated html</strong> content</li><li><strong>encode trusted HTML</strong> content containing non-compliant/unescaped characters like e.g. €, ü, ö, ß, etc. within a tags inner HTML</li></ul></blockquote><h3>1. minifyHtml( string html required )</h3><h4>Converts a whitespace poluted HTML block like this</h4><pre><code> <!DOCTYPE html> | ||
<head> | ||
<title>Hot CFML Page & content</title> | ||
<meta charset="utf-8"> | ||
<meta http-equiv="X-UA-Compatible" content="IE=edge"> | ||
<meta name="viewport" content="width=device-width, initial-scale=1"> | ||
<style> /* some comment | ||
*/ | ||
.someClass{ | ||
font-size: 1rem; /* set font size */ } </style> | ||
|
||
<meta name="description" content="Just some Example"> | ||
<link rel="stylesheet" href="css/main.css"> | ||
</head> <body> | ||
<!-- Say "Hello" to the CFML coders! --> <p>Hello to all CFML devs 😀 🤩 around the 🌎!!! </p> | ||
<script> /* this is just some | ||
embedded JavaScript */ | ||
console.log('Log Something'); // this is just some Javascript </script> </body> </html> | ||
</code></pre><h4>... into a minified HTML version like this</h4><pre><code><!DOCTYPE html><head><title>Hot CFML Page &amp; content</title><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1"><style> .someClass{ font-size: 1rem; } </style><meta name="description" content="Just some Example"><link rel="stylesheet" href="css/main.css"></head><body><p>Hello to all CFML devs &#x1f600; &#x1f929; around the &#x1f30e;&#x21;&#x21;&#x21; </p><script> console.log('Log Something');</script></body></html> | ||
</code></pre><p>The function <code>minifyHtml()</code> minifies CFML generated html content by:</p><blockquote><ul><li>stripping HTML comments</li><li>stripping JavaScript multline comments</li><li>stripping JavaScript singleline comments</li><li>stripping CSS comments</li><li>stripping whitespaces, such as all double tabs/spaces/newlines</li><li>honouring and preserving the content within <code><pre></pre></code> or <code><code></code></code> tags as submitted</li></ul></blockquote><p>Passing arguments to minifyHtml() is possible (e.g <code>minifyHtml( htmlString=htmlBlock, stripHtmlComments=true )</code>)</p><blockquote><ul><li><strong>htmlString</strong><em>( string required )</em>: a string containing the complete html code to be minified.</li><li><strong>stripScriptAndCssComments</strong><em>( boolean/default=true )</em>: removes all comments between script and style tags. Single line JavaScript comments will be converted to multiline to not break JavaScript Functionality</li><li><strong>stripHtmlComments</strong><em>( boolean/default=true )</em>: removes all HTML comments (e.g. <code><!-- My comment --></code>)</li><li><strong>compressWhitespaces</strong><em>( boolean/default=true )</em>: compresses any multiple whitespaces (e.g. new lines, spaces or tabs ) by unifying them to one single space, converting the passed html string from multiline to a single lined html block.</li><li><strong>stripEmptySpacesBetweenHtmlElements</strong><em>( boolean/default=true )</em>: removes all whitespaces between html tags ( e.g. from <code><div> <div> Hello World <span> ! </span> </div> </div></code> results in <code><div><div> Hello World span> ! </span></div></div></code>).</li></ul></blockquote><h3>2. encodeTrustedHTML( string trustedHtml required );</h3><h4>Converts HTML from a trusted source with unencoded characters like this</h4><pre><code><div class="someClass"> | ||
I tend to add "€, ä, &, é, ß" and I | ||
even might tend to add a > (greater sign) | ||
directly into my html 😲, because I'm | ||
a lazy content writer and I don't like | ||
adding those as html encoded characters manually! | ||
</div> | ||
</code></pre><h4>... into proper html like this</h4><pre><code><div class="someClass"> I tend to add &quot;&euro;, &auml;, &amp;, &eacute;, &szlig;&quot; and I even might tend to add a &gt; &#x28;greater sign&#x29; directly into my html &#x1f632;, because I&#x27;m a lazy content writer and I don&#x27;t like adding those as html encoded characters manually&#x21; </div> | ||
</code></pre><p>The function <code>encodeTrustedHTML()</code> detects and encodes unencoded characters, but preserves valid HTML-Entities and HTML-Tags already present in the submitted HTML.</p><h3>3. Examples</h3><p>Example of minifying a whitespace overfilled WordPress page with <code>minifyHtml()</code>:</p><pre><code><!--- /examples/cfhttpMinifyHtml.cfm: minifyHtml() ---> | ||
<!--- Make sure to override admin setting and read template with correct charset(UTF-8) ---> | ||
<cfprocessingdirective pageEncoding="UTF-8"> | ||
<cfscript> | ||
// get whitespace polluted wordpress page! | ||
cfhttp(method="GET", charset="utf-8", url="https://news.microsoft.com/source/", result="result" ) {}; | ||
|
||
htmlHelperService=new components.HtmlHelper(); | ||
cfcontent( reset = "true" ); | ||
writeoutput( | ||
htmlHelperService.minifyHtml( result.filecontent ) | ||
); | ||
</cfscript> | ||
</code></pre><p>Example of encoding a trusted HTML block to escape unescaped characters with <code>encodeTrustedHtml()</code>:</p><pre><code><!--- /examples/encodeTrustedHtml.cfm: encodeTrustedHtml() ---> | ||
<!--- Make sure to override admin setting and read template with correct charset(UTF-8) ---> | ||
<cfprocessingdirective pageEncoding="UTF-8"> | ||
<cfsavecontent variable="someHtmlBlock"> | ||
<div> | ||
I'm adding some unescaped HTML directly into my HTML! | ||
I't doesn't matter if they have already been encoded or not. | ||
|
||
E.g " &amp; or & " will both create the same source. Add | ||
letters like ä, ö, Ä, ü, é, punctuations like ~, >, ⁋, ※, | ||
currencies like $, €, £, ¥, ₹, symbols like ©, ®, ™, Ω, | ||
arrows like →, ↖, ↳, ⇗, emojis like 👋 🤚 🖐 ✋ and they will be encoded properly. | ||
</div> | ||
</cfsavecontent> | ||
<cfscript> | ||
htmlHelperService=new components.HtmlHelper(); | ||
cfcontent( reset = "true" ); | ||
writeoutput( | ||
htmlHelperService.encodeTrustedHtml ( someHtmlBlock ) | ||
); | ||
</cfscript> | ||
</code></pre><h3>4. Service Functions as Lambda Expression</h3><p><strong>HtmlHelper.cfc</strong> passes the functions minifyHtml() and encodeTrustedHtml() as Lambda Expressions to enhance inner local scoping (<a href="https://github.com/andreasRu/cfml-htmlhelper/blob/cc91c88a5e744a27d5006accb5ed9e54cd5e7dc5/components/HtmlHelper.cfc#L16">see code here at GitHub</a>):</p><p><img src="images/dumpStruct.webp" alt="cfml html minifier" /></p><h3>5. Tips & Security Advisory</h3><blockquote><ul><li><strong>IMPORTANT SECURITY NOTICE:</strong><code>encodeTrustedHtml()</code> MUST NOT be used to avoid XSS, because it only encodes unencoded characters of the inner HTML (within the body of tags). This function will accept any submitted HTML, JavaScript and Styles and output it as submitted(!) without encoding it for XSS mitigation. For XSS prevention of untrusted HTML you <strong>MUST</strong> continue to use <code>encodeForHTML()</code>, <code>encodeForHTMLAttribute()</code>, <code>encodeForJavascript()</code>, <code>encodeFor...()</code> respectively.</li><li>The Regex patterns are set to work with CFMLs default 'Perl' Regex-Engine</li><li>When using <code>encodeTrustedHTML()</code> always make sure to keep all the charsets among the stream "in sync". Having different charsets for templates, web charset, charset http headers, or resource charsets may have unpredictable wrong html-entities and characters.</li><li><code>encodeTrustedHTML()</code> is typically used when you have a fronted CMS with a HTML-Editor where you can manually add custom HTML to a database.</li><li>You get best performance when you use <code>minifyHtml()</code> only once during the request flow, e.g. at the end of the CFML processing. A good location could be the <strong>Application.cfc</strong> at the end of the <code>onRequest()</code> function.</li></ul></blockquote><h3>6. Downloads</h3><blockquote><ul><li><strong>Raw HtmlHelper.cfc component</strong>: <a href="https://raw.githubusercontent.com/andreasRu/cfml-htmlhelper/master/components/HtmlHelper.cfc">Download</a></li><li><strong>Repository as ZIP-File</strong>: <a href="https://github.com/andreasRu/cfml-htmlhelper/archive/refs/heads/master.zip">Download</a></li><li><strong>Example minifyHtml()</strong>: <a href="https://raw.githubusercontent.com/andreasRu/cfml-htmlhelper/master/examples/minifyHtml.cfm">Download</a></li><li><strong>Example Cfhttp & minifyHtml()</strong>: <a href="https://raw.githubusercontent.com/andreasRu/cfml-htmlhelper/master/examples/cfhttpMinifyHtml.cfm">Download</a></li><li><strong>Example encodeTrustedHTML()</strong>: <a href="https://raw.githubusercontent.com/andreasRu/cfml-htmlhelper/master/examples/encodeTrustedHtml.cfm">Download</a></li></ul></blockquote><h3>7. How to run the repository locally</h3><p>To test or watch the code running locally, you'll need CommandBox as dependency:</p><blockquote><ol><li>Download the <a href="https://github.com/andreasRu/cfml-htmlhelper/archive/refs/heads/master.zip">Repository as ZIP-File</a></li><li>Unzip it</li><li>Run <code>server.bat</code> on Windows or <code>server.sh</code>on MacOs/Linux</li><li>Wait for commandBox open the browser and load the page</li></ol></blockquote><h3>8. Remarks</h3><p>I'm not taking anything for this but if you like or you're using it, I kindly ask you to donate to the <strong>Lucee Organization</strong> to make this awesome cfengine even better:</p><p><a href="https://opencollective.com/lucee">Lucee Open Collective Donation</a> ❤️</p><h3>9. About</h3><blockquote><ul><li><strong>Author:</strong> Andreas at <a href="https://www.rhein-berg-digital.de">Rhein Berg Digital</a>, <a href="https://www.linkedin.com/in/claudio-andreas-r%C3%BCger-259000199/" target="_blank" rel="nofollow">LinkedIn</a></li><li><strong>GitHub:</strong> <a href="https://github.com/andreasRu/cfml-htmlhelper">cfml-htmlhelper</a></li><li><strong>Issues/Requests:</strong> <a href="https://github.com/andreasRu/cfml-htmlhelper/issues">cfml-htmlhelper issues</a></li><li><strong>License:</strong> <a href="https://github.com/andreasRu/cfml-htmlhelper/blob/master/LICENSE.txt">MIT License</a></li><li><strong>Software :</strong> <a href="https://www.lucee.org/">Lucee CFML Engine</a> (GNU LGPL v2.1), <a href="https://www.ortussolutions.com/products/commandbox">CommandBox</a> (GNU GPLv3), <a href="https://highlightjs.org/">highlight.js</a> (BSD 3-Clause License, Copyright (c) 2006, Ivan Sagalaev), <a href="https://github.com/necolas/normalize.css">normalize.css</a> (MIT License, Copyright (c) Nicolas Gallagher and Jonathan Neal), <a href="https://codepo8.github.io/css-fork-on-github-ribbon/">github-fork-ribbon-css</a> (MIT License, Copyright (c) 2013 Simon Whitaker)</li><li><strong>Imprint:</strong> <a href="https://www.rhein-berg-digital.de/en/andreasru-github-io-imprint">Visit here</a></li><li><strong>Privacy Policy:</strong> <a href="https://docs.github.com/en/site-policy">Visit the hosters Site Policy</a> and the <a href="https://www.rhein-berg-digital.de/en/andreasru-github-io-privacy-policy">authors</a></li></ul></blockquote><p class="footer">Static version generated with the amazing❤️<br><a href="https://www.lucee.org/">Lucee CFML Engine</a></p><script src="libs/highlightjs/highlight.min.js"></script><script> const elements = document.querySelectorAll('code'); elements.forEach((element) => { element.classList.add('language-html'); }); const aTags = document.querySelectorAll('a'); aTags.forEach((element) => { element.setAttribute('target', '_blank'); }); hljs.highlightAll(); </script></body></html> |