Feature summary (what you would like to be able to do and where):

It would be nice to be able to have interactive canvases on some pages (particularly on wiki farms) to load interactive graphics, etc. with p5.js, a graphics library used for art and animations.

To reduce the risk of XSS, the p5.js environment would be run in a sandboxed iframe, and we would sanitize and remove JS elements used for DOM and URL manipulation (such as document, window, location, globalThis, alert, confirm, localStorage, sessionStorage, etc.) and the closing script tag, before placing the content into the script tag, as well as check for matching parentheses and braces in the tag and abort the save (or render) if they are not present. We can work with an allowlist for added security. This would not apply if the tag instead loaded script content from a page in MediaWiki: namespace (for example, MediaWiki:MyCanvas.js). We can also have a config variable that only allows the loading of Processing libraries from MediaWiki: namespace (set to true by default, and should probably always be true if used on a Wikimedia wiki).

Use case(s) (list the steps that you performed to discover that problem, and describe the actual underlying problem which you want to solve. Do not describe only a solution):

An example would be for graphics that go beyond custom graphs. The Graphs extension was disabled because they relied on an external library Vega that had XSS vulnerabilities and was not adequately maintained.

An example p5.js call might look like this:

<processing width="200" height="200" description="A box.">
<setup>
fill(255, 0, 0);
rect(0, 0, 50, 50);
</setup>
<draw>
function getText() {
   return "Hello world";
}
text(getText(), 50, 50);
</draw>
</processing>

which would render to something like this (note the unescaped script):

<script>
( function() {
mw.loader.using( [ "p5.js" ], function( p5 ) {
   var globals = {};
   new p5( function( sketch ) {
      sketch.setup = function() {
         sketch.createCanvas( 200, 200 );
         sketch.describe( "A box." );
         // transformed JS here
         sketch.fill(255, 0, 0);
         sketch.rect(0, 0, 50, 50);
      }
      sketch.draw = function() {
         globals.getText = function() {
            return "Hello world";
         }
         sketch.text(globals.getText(), 50, 50);
      }
   } );
} );
} )();
</script>

and <processing source="processing-file.js"/> would load the file MediaWiki:Processing-file.js, encapsulate and load the p5.js in a mw.loader.using, and only convert the recognized p5.js statements (while keeping all other globals untouched), and render it on the canvas (unless if safemode is on in which case it will only show a message "Processing sketches are disabled in safe mode" regardless of whether loaded from the extension tag or from the MediaWiki namespace).

The other use case is bundling the p5.js library into existing user scripts and gadgets to allow for interactive demos.

Benefits (why should this be implemented?):

Processing is a powerful library that is taught in free online courses such as those on Khan Academy and Codecademy. Being able to use this (if not on a Wikimedia wiki then on one's own wiki, maybe on a wiki hosting site) would permit those people to immediately use the skills developed from these online courses to make useful, interactive sketches.

I remember learning Processing.js almost a decade ago and it came in handy as I quickly slapped together some interactive demos that are publicly available on the Internet.