Minify your CFML generated HTML on runtime!
- minify CFML generated html content
- encode trusted HTML content containing non-compliant/unescaped characters like e.g. €, ü, ö, ß, etc. within a tags inner HTML
<!DOCTYPE html>
-
-
-<html>
-
- <head> <link rel="stylesheet" href="/libs/markdowncss/retro.css">
-
- <link rel="stylesheet"
- href="/libs/highlightjs/highlightjs_styles_default.min.css">
-
-
-
- <link href="/libs/highlightjs/highlightjs_atom-one-dark.min.css" rel="stylesheet">
-
-
- <style>
-
-
- html {
- background: transparent;
-
- }
-
-
- body {
- background: linear-gradient(92deg, #002e34 50%, #017f8e 76%);
- max-width: 992px;
- padding: 0 4rem 4rem;
-
-
-
- }
-
-
-
- h1, h2, h3,h4, h5{
- margin-top:4rem;
- }
- h1{
- font-weight: 600;
- font-size: 4.5rem;
- }
-
- h2{
- font-size:1.5rem;
- color:#96dce4;
- font-weight: 600;
-
- }
-
- h3{
- font-size:1.2rem;
- color: #72cb13;
- font-weight: 600;
- }
-
- .hljs-punctuation, .hljs-tag {
- color: #4cbac7;
- }
- .hljs-tag .hljs-attr, .hljs-tag .hljs-name {
- color: #4cbac7;
- }
- .hljs{
- background: #314161;
- }
- pre { max-height: 10rem; overflow: auto; padding:0;}</style>
- </head>
- <body>
-<h1>HtmlHelper.cfc</h1>
-
- <hr />
- <p>A simple CFML component that helps to:</p>
-<ul>
-<li><strong>minify CFML generated html</strong> content, or</li>
- <li>
-
- <strong>
- encode
-
-
- trusted HTML
-
- </strong> content containing non-compliant/unescaped characters in the inner HTML (such as €,ü,ö,ß, etc.).</li>
-</ul>
- <p> <a href="http://example.com">See at Github</a>
-
-
- </p>
-<hr />
-
-
- <h2><em>Convert a whitespace poluted HTML block like this</em></h2>
-<h2><em>Into a minified HTML for the browser</em></h2>
-<hr />
- <h3>minifyHtml( string html required )</h3>
-<p>The function <strong>minifyHtml()</strong> minifies CFML generated html content by:</p>
-<ul>
-
-
-
-
-
-<li>stripping HTML comments</li>
- <li>stripping JavaScript multline comments</li>
-<li>stripping JavaScript singleline 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>
-
-
-
-
- <h3>encodeTrustedHTML( string trustedHtml required )
-
- </h3>
- <p>A simple basic function that detects and encodes unencoded characters, but preserves valid HTML-Tags and HTML-Entities.</p>
-<h3><em>Convert HTML from a
-
-
- trusted source like this:</em></h3>
-
-
-
-
-
-<pre><code><div class="someClass">
- I tend to add "€, ä, &, é, ß"
- 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>
-<h3><em>Into proper html like this:</em></h3>
-<pre><code><div class="someClass">
- I tend to add &quot;&euro;, &auml;, &amp;, &eacute;, &szlig;&quot;
- directly into my html 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>
-
-
- <script src="/libs/highlightjs/highlight.min.js"></script>
- <script>
- const elements = document.querySelectorAll('code');
-
-
- elements.forEach((element) => {
-
-
- element.classList.add('language-html');
- });
-
- hljs.highlightAll();
- /*
- * this is just a JavaScript comment
- */
- console.log( 'ready' );
- </script>
- </body>
- </html>
-<!DOCTYPE html><html><head><link rel="stylesheet" href="/libs/markdowncss/retro.css"><link rel="stylesheet" href="/libs/highlightjs/highlightjs_styles_default.min.css"><link href="/libs/highlightjs/highlightjs_atom-one-dark.min.css" rel="stylesheet"><style>html { background: transparent; } body { background: linear-gradient(92deg, #002e34 50%, #017f8e 76%); max-width: 992px; padding: 0 4rem 4rem; } h1,h2,h3,h4,h5{ margin-top:4rem; } h1{ font-weight: 600; font-size: 4.5rem; } h2{ font-size:1.5rem; color:#96dce4; font-weight: 600; } h3{ font-size:1.2rem; color: #72cb13; font-weight: 600; } .hljs-punctuation, .hljs-tag { color: #4cbac7; } .hljs-tag .hljs-attr, .hljs-tag .hljs-name { color: #4cbac7; } .hljs{ background: #314161; } pre { max-height: 10rem; overflow: auto; padding:0;}</style></head><body><h1>HtmlHelper.cfc</h1><hr /><p>AsimpleCFMLcomponentthathelpsto:</p><ul><li><strong>minifyCFMLgeneratedhtml</strong>content,or</li><li><strong>encodetrustedHTML</strong>contentcontainingnon-compliant/unescapedcharactersintheinnerHTML(suchas€,ü,ö,ß,etc.).</li></ul><p><a href="http://example.com">SeeatGithub</a></p><hr /><h2><em>ConvertawhitespacepolutedHTMLblocklikethis</em></h2><h2><em>IntoaminifiedHTMLforthebrowser</em></h2><hr /><h3>minifyHtml(stringhtmlrequired)</h3><p>Thefunction<strong>minifyHtml()</strong>minifiesCFMLgeneratedhtmlcontentby:</p><ul><li>strippingHTMLcomments</li><li>strippingJavaScriptmultlinecomments</li><li>strippingridofJavaScriptsinglelinecomments</li><li>strippingwhitespaces,suchasalldoubletabs/spaces/newlines</li><li>honouringandpreservingthecontentwithin<code><pre></pre></code>or<code><code></code></code>tagsassubmitted</li></ul><h3>encodeTrustedHTML(stringtrustedHtmlrequired)</h3><p>AsimplebasicfunctionthatdetectsandencodesunencodedcharactersbutpreservesvalidHTML-TagsandHTML-Entities.</p><h3><em>ConvertHTMLfromatrustedsourcelikethis:</em></h3><pre><code><div class="someClass">
- I tend to add "€, ä, &, é, ß"
- 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><h3><em>Intoproperhtmllikethis:</em></h3><pre><code><div class="someClass">
- I tend to add &quot;&euro;, &auml;, &amp;, &eacute;, &szlig;&quot;
- directly into my html 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><script src="/libs/highlightjs/highlight.min.js"></script><script> const elements = document.querySelectorAll('code'); elements.forEach((element) => { element.classList.add('language-html'); }); hljs.highlightAll(); console.log( 'ready' ); </script></body></html>
-The function minifyHtml() minifies CFML generated html content by:
- stripping HTML comments
- stripping JavaScript multline comments
- stripping JavaScript singleline comments
- stripping whitespaces, such as all double tabs/spaces/newlines
- honouring and preserving the content within
<pre></pre>or<code></code>tags as submitted
- Download the
HtmlHelper.cfcat- Save the
HtmlHelper.cfccomponent to your application, e.g/wwwroot/components/HtmlHelper.cfc- Create a
minifyHtml.cfmat/wwwroot/minifyHtml.cfm
Add the following code and run it:
<!--- /examples/minifyHtml.cfm: minifyHtml() --->
-
-<!--- Make sure to override admin setting and read template with correct charset(UTF-8) --->
-<cfprocessingdirective pageEncoding="UTF-8">
-<cfsavecontent variable="someHtmlBlock">
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
- <meta http-equiv="X-UA-Compatible" content="ie=edge">
- <title>Some Html</title>
- <link rel="stylesheet" href="./style.css">
- <link rel="icon" href="./favicon.ico" type="image/x-icon">
- </head>
- <body>
- <main>
- <h1>This is just a sample page!</h1>
- </main>
- <script src="index.js"></script>
- </body>
- </html>
- </cfsavecontent>
- <cfscript>
- htmlHelperService=new components.HtmlHelper();
- cfcontent( reset = "true" );
- writeoutput(
- htmlHelperService.minifyHtml( someHtmlBlock )
- );
- </cfscript>
-Another example with cfhttp by fetching a whitespace overfilled wordpress page:
<!--- /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>
-<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>
-<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>
-The function encodeTrustedHTML() detects and encodes unencoded characters, but preserves valid HTML-Tags and HTML-Entities.
- Download the
HtmlHelper.cfcat- Save the
HtmlHelper.cfccomponent to your application, e.g/wwwroot/components/HtmlHelper.cfc- Create a
encodeTrustedHtml.cfmat/wwwroot/encodeTrustedHtml.cfm
Add the following code and run it:
<!--- /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>
- Just adding some characters like " & or & " ... both will create the same source.
- But you can add ä, ö, Ä, ü, é, ~ > or other characters here.
- </div>
-</cfsavecontent>
-<cfscript>
- htmlHelperService=new components.HtmlHelper();
- cfcontent( reset = "true" );
- writeoutput(
- htmlHelperService.encodeTrustedHtml ( someHtmlBlock )
- );
-</cfscript>
-HtmlHelper.cfc delivers Lambda function expressions, keeping the working data in the inner function scope:
- IMPORTANT SECURITY NOTICE:
encodeTrustedHtml()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 MUST continue to useencodeForHTML(),encodeForHTMLAttribute(),encodeForJavascript(),encodeFor...()respectively.- When using
encodeTrustedHTML()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.encodeTrustedHTML()is typically used when you have a fronted CMS with a HTML-Editor where you can manually add custom HTML to a database.- You get best performance when you use
minifyHtml()only once during the request flow, e.g. at the end of the CFML processing. A good location could be the Application.cfc at the end of theonRequest()function.
To test or watch the code running locally, you'll need CommandBox as dependency:
- Download the Repository as ZIP-File
- Unzip it
- Run
server.baton Windows orserver.shon MacOs/Linux- Wait for commandBox open the browser and load the page
I'm not taking anything for this but sharing with you. If you like/are using it, I kindly ask you to donate to the Lucee Organization to make this awesome cfengine even better:
❤️ Lucee Open Collective Donation ❤️
\ No newline at end of file +Connection Failure \ No newline at end of file diff --git a/package.json b/package.json index 07c25dc..1742849 100644 --- a/package.json +++ b/package.json @@ -12,7 +12,7 @@ "repository": { "type": "git", - "url": "git+https://github.com/andreasRu/cfml-HtmlHelper.git" + "url": "git+https://github.com/andreasRu/cfml-Htmlhelper.git" }, "keywords": [ "cfml", @@ -24,7 +24,7 @@ "author": "Claudio Andreas Rüger", "license": "MIT", "bugs": { - "url": "https://github.com/andreasRu/cfml-HtmlHelper/issues" + "url": "https://github.com/andreasRu/cfml-htmlhelper/issues" }, - "homepage": "https://github.com/andreasRu/cfml-HtmlHelper#readme" + "homepage": "https://github.com/andreasRu/cfml-htmlhelper#readme" } diff --git a/serve.bat b/serve.bat index 634c8fa..6f1e1cf 100644 --- a/serve.bat +++ b/serve.bat @@ -1,3 +1,3 @@ set CWD=%cd% -box stop name=cfml-HtmlHelper -box start name=cfml-HtmlHelper \ No newline at end of file +box stop name=cfml-htmlhelper +box start name=cfml-htmlhelper \ No newline at end of file diff --git a/serve.sh b/serve.sh index a18d536..d67d9f6 100644 --- a/serve.sh +++ b/serve.sh @@ -3,4 +3,4 @@ cd `dirname $0` CWD="`pwd`" -box start name=cfml-HtmlHelper +box start name=cfml-htmlhelper diff --git a/server-cfml-HtmlHelper.json b/server-cfml-HtmlHelper.json index 4288e35..28fe9ba 100644 --- a/server-cfml-HtmlHelper.json +++ b/server-cfml-HtmlHelper.json @@ -1,5 +1,5 @@ { - "name":"cfml-HtmlHelper", + "name":"cfml-htmlhelper", "force":"true", "JVM":{ "heapSize":"2048" @@ -13,7 +13,7 @@ }, "trayOptions":[ { - "label":"cfml-HtmlHelper", + "label":"cfml-htmlhelper", "action":"openbrowser", "url":"http://${runwar.host}:${runwar.port}/", "disabled":false
- Author: Andreas at Rhein Berg Digital, LinkedIn
- Github: Lucee6 CFML Engine
- Issues/Requests: Lucee6 CFML Engine
- Licensing: MIT License
- Software : Lucee CFML Engine, CommandBox, highlight.js (BSD 3-Clause License, Copyright (c) 2006, Ivan Sagalaev), Markdown-RetroCSS (MIT License, Copyright (c) 2014-2015, John Otander)
- Imprint: Visit here
- Privacy Policy: Visit here