0

just installed a stock Drupal 9.2.2 core, trying to create an article with the /node/add/article editor, how do i add javascript to the article? enter image description here

5
  • You add it in one of the ways described in the documentation. Pasting it into a WYSIWYG (assumed from the screenshot) is not advised and discouraged by Drupal core input filtering.
    – Kevin
    Jul 28, 2021 at 12:51
  • @Kevin described in the documentation where? i see some articles about how to add javascript to modules, or how to add javascript to themes, but don't see anything about how to add them to articles. guess i could do some hackery ala "make a dedicated module just for this article", or something like that, but i haven't see any documentation on how to add javascript to articles specifically..?
    – hanshenrik
    Jul 28, 2021 at 13:04
  • Articles are just content types. You can implement a hook in a module or a theme that would attach Javascript from a defined library to that node type. drupal.stackexchange.com/questions/226861/…
    – Kevin
    Jul 28, 2021 at 14:05
  • 1
    I notice this has been downvoted and upvoted. I think it's a valid question for this forum. Developers come to Drupal from all sorts of backgrounds, and someone whose experience is primarily with JavaScript may not immediately understand the reason why Drupal's WYSIWIG editor is on such a tight lockdown. Jul 28, 2021 at 15:41

1 Answer 1

2

As @Kevin mentioned in the comments above, you are approaching this from the wrong angle.

By design, Drupal core (since at least Drupal 5) uses text filters and input formats to sanitize HTML added by users in WYSIWIG editors like the default CKEditor.

Earlier versions of Drupal were more permissive in this regard, but years of security patches for various cross-site scripting exploits have made it very difficult indeed to insert inline JS in this way -- and for good reason.

With Drupal, you're not just saying "I trust myself to add JS to this one Article," you're saying "I trust all users whose Roles grant them the permission to use this text filter." It's not easy to create an insecure text filter anymore. If you did, you would want to restrict its use to only trusted users with Admin roles.

For an experienced Drupalist, it's no big deal to attach a JavaScript asset to a render array. CSS and JS assets are managed in Drupal by creating libraries which can be attached to Drupal's render arrays in a variety of ways, using either a custom module or a custom theme, via either PHP code or Twig templates.

(If you're putting up a Drupal site without a custom theme, you might want to reconsider. You can quickly make a subtheme of whatever your current theme is, so that you can easily modify things like the JS libraries and Twig templates.)

However, I understand your reluctance to learn custom module or theme development just to add a little JavaScript.

This forum is supposed to be used for answering questions about Drupal core, not recommending contrib modules. Nonetheless, there is a relatively new module that might suit your needs:

Component

From the Component module's Project page:

Adding JS components to your Drupal site just got a whole lot easier. Just combine your JS components (any type) with a *.component.yml and put it in your module or theme. Now, your component will be available in Drupal as a block - automatically!

Admittedly, this is not as easy as pasting something in a WYSIWYG field, but that was never going to work anyway (because security.) You'll still need to start by creating a custom module, theme, or subtheme, so you can add your JS components to the component.yml file. But if you are coming from a JS developer mindset, this approach will allow you to just write the JS and stick it in a block on the page.

Obligatory security note:

This project is not covered by the security advisory policy. Use at your own risk! It may have publicly disclosed vulnerabilities.

But considering that your entire question is about defeating Drupal's built-in security measures against XSS exploits, I can't imagine that this warning will deter you!

FOLLOW-UP: Inline JavaScript is allowed in the Gutenberg editor from WordPress, and that is why @brown-paul recommends using the Gutenberg editor in Drupal, which might be even easier for you if you're coming from a WordPress background.

6
  • 1
    Thanks! checking the Component module. btw Admittedly, this is not as easy as pasting something in a WYSIWYG field, but that was never going to work anyway (because security.) - an interesting comparison, WordPress's WYSIWYG allows this, it has something called Custom HTML blocks where you can insert whatever HTML you want, including javascript
    – hanshenrik
    Jul 28, 2021 at 15:57
  • 1
    Yes, it's a different philosophy. With Drupal, you're not just saying "I trust myself to add JS to this one Article," you're saying "I trust all users whose Roles grant them the permission to use this text filter." This is allowed in Gutenberg, and that is why @brown-paul recommends using the Gutenberg editor in Drupal, which might be even easier for you if you're coming from a WP background. Jul 28, 2021 at 16:45
  • @hanshenrik Did you get this working? If so, what approach did you use? Aug 2, 2021 at 17:14
  • 1
    i went with the Gutenberg editor; can you add a mention of Gutenberg to your answer?
    – hanshenrik
    Aug 3, 2021 at 0:09
  • Sure! Normally I would not do that because another user suggested it first and I would not want to steal that karma from @brown-paul -- but since it looks like he deleted his answer, I may as well! :) Aug 3, 2021 at 0:50

Not the answer you're looking for? Browse other questions tagged or ask your own question.