Pens from Simon Collins https://codepen.io/devilish/ en nospam@codepen.io Copyright 2024 2016-12-01T10:08:40-07:00 A Pen by Simon Collins https://codepen.io/devilish/pen/JbMdOV https://codepen.io/devilish/pen/JbMdOV Simon Collins

See the Code - See it Full Page - See Details

]]>
A Pen by Simon Collins 2016-12-01T10:08:40-07:00
React Events https://codepen.io/devilish/pen/jbdBLW https://codepen.io/devilish/pen/jbdBLW Simon Collins

See the Code - See it Full Page - See Details

Quick hack to illustrate event handling, functional components using ES6 lambdas and class components using ES6 classes. Also illustrate ES6 nicer object literal syntax.

]]>
React Events 2015-11-16T11:31:42-07:00
Isolating third party widget code https://codepen.io/devilish/pen/eYJENy https://codepen.io/devilish/pen/eYJENy Simon Collins

See the Code - See it Full Page - See Details

Requirements: IE10+, recent Chrome/Firefox. This shows one way to isolate third party code on a website so that it cannot arbitrarily modify the DOM. You could build on this approach to allow third party widgets to securely run on your website. For full details see: http://devilish.io/widget-sandboxing/ The widget code is run in a web-worker context. The only way that code can modify the page's DOM is by calling $(<selector>).html() and $(<selector>).text() methods. The selector is scoped to widget's container so that the code cannot modify content outside that container. The web-worker global scope object is frozen to avoid modification and the postMessage method is removed so that messaging to the main thread is restricted to the $() operations. You could go further and restrict direct access to XMLHttpRequest etc. depending on how much control you wish to exert on the widget. In a real example you would probably load the widget code from a URL using importScripts from the bootloader code. I just did it this way so you edit the code. You would also want a way of allowing the widget code to handle input from anchors etc. The HTML sanitization is using Google Caja's html_sanitize function which by default strips out URL attributes. This could be altered to rewrite them instead.

]]>
Isolating third party widget code 2014-04-08T02:28:36-07:00
Using Caja's HTML sanitizer https://codepen.io/devilish/pen/GRoqpY https://codepen.io/devilish/pen/GRoqpY Simon Collins

See the Code - See it Full Page - See Details

Shows how to use the html_sanitizer function from the standalone HTML sanitizer from Google's Caja project to sanitize HTML snippets to remove JavaScript and style tags and to optionally sanitize URLs and element IDs and classes See http://devilish.io/widget-sandboxing/

]]>
Using Caja's HTML sanitizer 2014-04-08T02:24:37-07:00
Creating and editing CSS selectors with JavaScript https://codepen.io/devilish/pen/rNVXOq https://codepen.io/devilish/pen/rNVXOq Simon Collins

See the Code - See it Full Page - See Details

Demonstration of how you can dynamically create stylesheets and CSS selectors using JavaScript and modify the styles that are applied. For more details see: http://devilish.io/playing-with-stylesheets/

]]>
Creating and editing CSS selectors with JavaScript 2014-04-08T02:29:33-07:00