Remove inline Javascript, part I #9513
Commits on Sep 5, 2024
-
Create and initialize
rcmailin external JS fileWe're relying on parsing order here, which means that app.js must(!) be loaded after its dependencies, but before all other scripts, and rcmail-init.js must be loaded and the end of the page.
-
Replace inline scripts by JSON-data with instructions
We're now sending JSON-encoded data that instructs the interpreting side (app.js), which callbacks to call (or events to trigger) with the given arguments. Basically that means server code now calls $output->command() instead of add_script(). This way the change is not too radical but we still can get rid of inline Javascript code.
-
-
-
-
-
-
-
-
-
Initialize googiespell in editor.js, not external file
This looks like more than it is, because now most of the intialization code of rcube_text_editor is wrapped in an init-function, which enables us to call other functions.
-
-
Use data-attribute for js-data to avoid getting data encoded
None of the methods to get the content of a DOM element (`.innerHTML`, `.innerText`, ...) return the content unchanged as it went over the wire. Using a data-attribute we can achieve that and need not to worry anymore about which solution will encode which value and thus break a feature.
-
Clean up spellchecker initialization
We don't need the global variable, so we got rid of it. Also since we're passing the config details encoded anyway, we can also use an array instead of a list of key-value pairs, and we can skip the quoting, too.
-
Strip check for 'plugin.'-prefix of JS-calls
This is done in rcmail_output_html already.
-
Trigger JS only via methods on rcmail, not events
Having only one way results in clearer code, and using the "plugin."-prefix for triggering events isn't obvious, either. Tacking all function calls onto rcmail/rcube_webmail.prototype maybe isn't the best pattern either, because that object/prototype gets huge, but it's established in the code base, so it isn't suprising. Another advantage is that trying to call a missing functions fails loudly, whereas triggering an event that nothing listens for doesn't produce any error. The functionality is still present to not break plugins, but our own code doesn't use it anymore.
-
Rename rcmail_output_html's
commandstojs_callsIt's a more telling name, and avoids confusion with the `commands` in app.js. The previous method name is still available to avoid breaking plugin code, but it is marked as deprecated.
-
Add eventListeners from data-attributes
This allows server code to specify events on attributes without using inline event listeners (which require a very lax CSP and should be avoided).
-
-
html class: Allow to pass array as content
This allows for a little cleaner code
-
-
-
-
-
-
-
-
-
-
-
-
-
-
Allow to run event-listener-attacher for given root element
This allows to call it on specific elements only, e.g. after they've been inserted late to the DOM.
-
-
-
Move rcube_webmail static methods to instance
There's no apparent reason for them to be static, and no explanation, but as instance methods they are directly callable from the de-inlined event-handlers and we save some helper methods, which is good.
-
-
-
-
-
-
-
-
-
-
-
Have to repeat attaching event handlers after a clone().
-
Hand around Nodes instead of using innerHTML
This allows to strip 'unsafe-eval' from the CSP.
-
innerText is enough here, don't need innerHTML
innerHTML requires 'unsafe-eval' in the CSP, while innerText doesn't.
-
If the last argument to a data-on* attribute is an object (associative array in PHP), it is used as options, which allow to specify if preventDefault() should be called on the event. This is relevant for some parts of the code and got lost in previous changes.
