Proof of Concept: Components

By Alex
Published February 11, 2022, Updated May 14, 2022

payload for smtp2go
Struct
api_key
stringapi-DECF4F8C971D11ECB701F23C91C88F4E
html_body
string <div class="xio-alert" style="font-family: arial; font-weight:normal; line-height: 1.319; color:dimGray; border:2px solid indigo; padding:0.25rem; background-color:white;"> <div class="xio-alert-title" style="color: white; background-color: indigo; padding: 0.25rem; font-weight: bold; margin: -.25rem -.25rem .5rem"> xio | production | sarumino.com | Check for obfuscation in google </div> User Agent: CCBot/2.0 (https://commoncrawl.org/faq/)<br> http://sarumino.com/index.cfm?original_apache_path=/blog/Proof-of-Concept-Components/ (still mangled by apache)<br> Requested Path: /blog/Proof-of-Concept-Components Sarumino production </div> <!-- ==start== dump {ts '2022-12-01 17:46:23'} format: html --> <div id="x23" class="-lucee-dump"><style> .-lucee-dump .disp-none { display: none; } </style> <script> window.__Lucee = { initialized : false, addEventListeners : function(selector, event, handler, useCapture){ useCapture = useCapture || false; Array.prototype.forEach.call( document.querySelectorAll(selector) ,function(el, ix) { el.addEventListener(event, handler, useCapture); } ); } ,getNextSiblings : function(el){ var orig = el ,result = []; while (el && el.nodeType === Node.ELEMENT_NODE) { if (el !== orig) result.push(el); el = el.nextElementSibling || el.nextSibling; } return result; } ,onDocumentReady : function(){ var L = window.__Lucee; if (L.initialized) return; L.addEventListeners(".collapse-trigger", "click", function(evt){ var tr = evt.target.closest("tr"); var siblings = L.getNextSiblings(tr); siblings.forEach(function(el, ix){ el.classList.toggle("disp-none"); }); }); L.initialized = true; } } document.addEventListener("DOMContentLoaded", __Lucee.onDocumentReady); </script> <style type="text/css"> div#x23 table {font-family:Verdana, Geneva, Arial, Helvetica, sans-serif; font-size:11px; empty-cells:show; color:#000; border-collapse:collapse;} div#x23 td {border:1px solid #000; vertical-align:top; padding:2px; empty-cells:show;} div#x23 td span {font-weight:bold;} div#x23 td.luceeN0 {color:#333399;border-color:#333399;background-color:#ccf;} div#x23 td.luceeH0 {color:#333399;border-color:#333399;background-color:#99f;} div#x23 td.luceeN1 {color:#990000;border-color:#990000;background-color:#fc9;} div#x23 td.luceeH1 {color:#990000;border-color:#990000;background-color:#f60;} div#x23 td.luceeN2 {color:#999999;border-color:#999999;background-color:#ccc;} div#x23 td.luceeH2 {color:#999999;border-color:#999999;background-color:#fff;} </style> <table title="/var/www/xio/production/com/alerter/alerter.cfc:248"><tr><td class="luceeH2">ALERT</td></tr><tr><td class="luceeN2"><table><tr><td class="collapse-trigger luceeH0" colspan="4" style="cursor:pointer;"><span>Scope Arguments</span></td></tr><tr><td class="luceeH0">stop</td><td class="luceeH0">1</td><td class="luceeN0"><table><tr><td class="luceeH1">boolean</td><td class="luceeN1">false</td></tr></table></td></tr><tr><td class="luceeH0">links</td><td class="luceeH0">2</td><td class="luceeN0"><table><tr><td class="collapse-trigger luceeH0" colspan="3" style="cursor:pointer;"><span>Struct</span></td></tr><tr><td class="luceeH0">Bing</td><td class="luceeN0"><table><tr><td class="luceeH1">string</td><td class="luceeN1">https://www.bing.com/search?q=ElectricSkyMonkeyYogurtLobotomy</td></tr></table></td></tr><tr><td class="luceeH0">DuckDuckGo</td><td class="luceeN0"><table><tr><td class="luceeH1">string</td><td class="luceeN1">https://duckduckgo.com/?q=ElectricSkyMonkeyYogurtLobotomy</td></tr></table></td></tr><tr><td class="luceeH0">Google</td><td class="luceeN0"><table><tr><td class="luceeH1">string</td><td class="luceeN1">https://www.google.com/search?q=ElectricSkyMonkeyYogurtLobotomy</td></tr></table></td></tr></table></td></tr></table></td></tr></table></div> <!-- ==stop== dump --><hr>timestamps, application mode, cgi info, etc.<hr>request uuid: true
sender
stringAlex <xio@sarumino.com>
subject
stringxio | production | sarumino.com | Check for obfuscation in google
to
Array
1
stringhyakkotai@gmail.com

This blog post is not for pleasure reading. I’m using it to prove, show-off, and repeatedly test components I’m developing for this site. It gets pretty nerdy.

Related: portfolio_project_xio explains a little about front-end components.

Front-end Components
Footnotes

Footnotes are the raised superscript like you see at the end of this sentence.

I’ve put together a component that collects footnotes inline during the output of an article, and then later we call the component to output the actual text of the collected footnotes. They are numbered automatically. If one of them fails, no superscript number is output.

Later, wherever I want the footnotes to appear, I call:

I like this solution because it fails gracefully (ie no output), and all the information is in one place: right where the writer was already thinking about it.

Obfuscation

In my template, the above HTML is captured and passed to the obfuscator (gist not actually updated, it’s just an example):

This yields the following HTML:

…which doesn’t look like anything, unless you actually run the javascript. When your browser runs the JavaScript, it renders the normal looking HTML paragraph above. It also has a graceful fallback if the user turns off JavaScript. Note also that I am calling other component methods before the obfuscator. As long as it makes HTML, it all works.

I’ll check on that search result every once in a while. If you get this page in your search results, please let me know using the contact form and I'll send some puzzle ranking points your way.

  1. A footnote is often used for citation, but many writers like to put related and interesting information that doesn’t belong in the referring text. ↵