_csrf_token links include html tags (?token=<link rel="stylesheet" ... >)

Open on Drupal.org →

Created on 8 April 2023, about 2 years ago

Problem/Motivation

When I add a new CSS file with the hook_css_alter(), all _csrf_token links ("?token=...") from the Admin Toolbar are broken.

Example adding one css file ("ttm*.css" is the new css file):

<a href="/admin/flush?token=<link rel="stylesheet" media="all" href="/sites/default/files/css/ttm/css_g1LWJDiGb8MFWNZpngMzd7ATmJ7g8rB3.css?rsr3qk" />
PykvJoEZGMwArIxaSELAVPO4QqS2IBLXcOgZMc6niCk" class="toolbar-icon toolbar-icon-admin-toolbar-tools-flush" title="" data-drupal-link-system-path="admin/flush">Flush all caches</a>

Example adding two css files:

<a href="/admin/flush?token=<link rel="stylesheet" media="all" href="/sites/default/files/css/ttm/css_4kJTNCA7chLJ6eDqckJ8mHzYZ9NbYnti.css?rssptb" />
<link rel="stylesheet" media="all" href="/sites/default/files/css/ttm/css_4kJTNCA7chLJ6eDqckJ8mHzYZ9NbYnti.cssX?rssptb" />
PykvJoEZGMwArIxaSELAVPO4QqS2IBLXcOgZMc6niCk" class="toolbar-icon toolbar-icon-admin-toolbar-tools-flush" title="" data-drupal-link-system-path="admin/flush">Flush all caches</a>

The CSS file(s) are fine the rest of the page is rendered.

<link rel="stylesheet" media="all" href="/sites/default/files/css/ttm/css_4kJTNCA7chLJ6eDqckJ8mHzYZ9NbYnti.css?rssptb" />
<link rel="stylesheet" media="all" href="/sites/default/files/css/ttm/css_4kJTNCA7chLJ6eDqckJ8mHzYZ9NbYnti.cssX?rssptb" />

At the end of the page this JS is included:

<script type="application/vnd.drupal-ajax" data-big-pipe-event="start"></script>
    <script type="application/vnd.drupal-ajax" data-big-pipe-replacement-for-placeholder-with-id="callback=shortcut.lazy_builders%3AlazyLinks&amp;&amp;token=N1997Wch59v-LxHku3-dD44wjkSNmhegNzlZ8jS0L5I">
    [{"command":"add_css","data":"\u003Clink rel=\u0022stylesheet\u0022 media=\u0022all\u0022 href=\u0022\/sites\/default\/files\/css\/ttm\/css_4kJTNCA7chLJ6eDqckJ8mHzYZ9NbYnti.css?rssptb\u0022 \/\u003E\n\u003Clink rel=\u0022stylesheet\u0022 media=\u0022all\u0022 href=\u0022\/sites\/default\/files\/css\/ttm\/css_4kJTNCA7chLJ6eDqckJ8mHzYZ9NbYnti.cssX?rssptb\u0022 \/\u003E\n"},{"command":"insert","method":"replaceWith","selector":"[data-big-pipe-placeholder-id=\u0022callback=shortcut.lazy_builders%3AlazyLinks\u0026\u0026token=N1997Wch59v-LxHku3-dD44wjkSNmhegNzlZ8jS0L5I\u0022]","data":"\n\n\u003C!-- THEME DEBUG --\u003E\n\u003C!-- THEME HOOK: \u0027links__toolbar_shortcuts\u0027 --\u003E\n\u003C!-- FILE NAME SUGGESTIONS:\n   * links--toolbar-shortcuts.html.twig\n   x links.html.twig\n--\u003E\n\u003C!-- BEGIN OUTPUT from \u0027themes\/the_theme\/templates\/navigation\/links.html.twig\u0027 --\u003E\n\u003Cul class=\u0022toolbar-menu\u0022\u003E\u003Cli\u003E\u003Ca href=\u0022\/admin\/reports\/config-inspector\/the_theme.settings\/raw\u0022\u003ERaw configuration data for the_theme.settings\u003C\/a\u003E\u003C\/li\u003E\u003Cli\u003E\u003Ca href=\u0022\/admin\/content\u0022\u003EAll content\u003C\/a\u003E\u003C\/li\u003E\u003Cli\u003E\u003Ca href=\u0022\/admin\/config\/search\/path\/patterns\u0022\u003EPatterns\u003C\/a\u003E\u003C\/li\u003E\u003Cli\u003E\u003Ca href=\u0022\/node\/add\u0022\u003EAdd content\u003C\/a\u003E\u003C\/li\u003E\u003Cli\u003E\u003Ca href=\u0022\/node\/add\/product\u0022\u003ECreate Product\u003C\/a\u003E\u003C\/li\u003E\u003Cli\u003E\u003Ca href=\u0022\/admin\/modules\u0022\u003EExtend\u003C\/a\u003E\u003C\/li\u003E\u003Cli\u003E\u003Ca href=\u0022\/admin\/config\/development\/performance\u0022\u003EPerformance\u003C\/a\u003E\u003C\/li\u003E\u003C\/ul\u003E\n\u003C!-- END OUTPUT from \u0027themes\/the_theme\/templates\/navigation\/links.html.twig\u0027 --\u003E\n\n\u003Ca href=\u0022\/admin\/config\/user-interface\/shortcut\/manage\/default\/customize\u0022 class=\u0022edit-shortcuts\u0022\u003EEdit shortcuts\u003C\/a\u003E","settings":null}]
    </script>    <script type="application/vnd.drupal-ajax" data-big-pipe-replacement-for-placeholder-with-id="callback=user.toolbar_link_builder%3ArenderDisplayName&amp;&amp;token=-MH2NzEnTzbzMk0ZGfGgoiw7G3j_-Q1ILWBRVhIOKLI">
    [{"command":"add_css","data":"\u003Clink rel=\u0022stylesheet\u0022 media=\u0022all\u0022 href=\u0022\/sites\/default\/files\/css\/ttm\/css_4kJTNCA7chLJ6eDqckJ8mHzYZ9NbYnti.css?rssptb\u0022 \/\u003E\n\u003Clink rel=\u0022stylesheet\u0022 media=\u0022all\u0022 href=\u0022\/sites\/default\/files\/css\/ttm\/css_4kJTNCA7chLJ6eDqckJ8mHzYZ9NbYnti.cssX?rssptb\u0022 \/\u003E\n"},{"command":"insert","method":"replaceWith","selector":"[data-big-pipe-placeholder-id=\u0022callback=user.toolbar_link_builder%3ArenderDisplayName\u0026\u0026token=-MH2NzEnTzbzMk0ZGfGgoiw7G3j_-Q1ILWBRVhIOKLI\u0022]","data":"root","settings":null}]
    </script>    <script type="application/vnd.drupal-ajax" data-big-pipe-replacement-for-placeholder-with-id="callback=user.toolbar_link_builder%3ArenderToolbarLinks&amp;&amp;token=xssKdKFVFD7N0FUPPcC1C7LrqMHpQFVzUhrI4cOeEgs">
    [{"command":"add_css","data":"\u003Clink rel=\u0022stylesheet\u0022 media=\u0022all\u0022 href=\u0022\/sites\/default\/files\/css\/ttm\/css_4kJTNCA7chLJ6eDqckJ8mHzYZ9NbYnti.css?rssptb\u0022 \/\u003E\n\u003Clink rel=\u0022stylesheet\u0022 media=\u0022all\u0022 href=\u0022\/sites\/default\/files\/css\/ttm\/css_4kJTNCA7chLJ6eDqckJ8mHzYZ9NbYnti.cssX?rssptb\u0022 \/\u003E\n"},{"command":"insert","method":"replaceWith","selector":"[data-big-pipe-placeholder-id=\u0022callback=user.toolbar_link_builder%3ArenderToolbarLinks\u0026\u0026token=xssKdKFVFD7N0FUPPcC1C7LrqMHpQFVzUhrI4cOeEgs\u0022]","data":"\n\n\u003C!-- THEME DEBUG --\u003E\n\u003C!-- THEME HOOK: \u0027links__toolbar_user\u0027 --\u003E\n\u003C!-- FILE NAME SUGGESTIONS:\n   * links--toolbar-user.html.twig\n   x links.html.twig\n--\u003E\n\u003C!-- BEGIN OUTPUT from \u0027themes\/the_theme\/templates\/navigation\/links.html.twig\u0027 --\u003E\n\u003Cul class=\u0022toolbar-menu\u0022\u003E\u003Cli\u003E\u003Ca href=\u0022\/user\u0022 title=\u0022User account\u0022\u003EView profile\u003C\/a\u003E\u003C\/li\u003E\u003Cli\u003E\u003Ca href=\u0022\/user\/1\/edit\u0022 title=\u0022Edit user account\u0022\u003EEdit profile\u003C\/a\u003E\u003C\/li\u003E\u003Cli\u003E\u003Ca href=\u0022\/user\/logout\u0022\u003ELog out\u003C\/a\u003E\u003C\/li\u003E\u003C\/ul\u003E\n\u003C!-- END OUTPUT from \u0027themes\/the_theme\/templates\/navigation\/links.html.twig\u0027 --\u003E\n\n","settings":null}]
    </script>    <script type="application/vnd.drupal-ajax" data-big-pipe-replacement-for-placeholder-with-id="callback=Drupal%5CCore%5CRender%5CElement%5CStatusMessages%3A%3ArenderMessages&amp;args%5B0%5D&amp;token=_HAdUpwWmet0TOTe2PSiJuMntExoshbm1kh2wQzzzAA">
    [{"command":"add_css","data":"\u003Clink rel=\u0022stylesheet\u0022 media=\u0022all\u0022 href=\u0022\/sites\/default\/files\/css\/ttm\/css_4kJTNCA7chLJ6eDqckJ8mHzYZ9NbYnti.css?rssptb\u0022 \/\u003E\n\u003Clink rel=\u0022stylesheet\u0022 media=\u0022all\u0022 href=\u0022\/sites\/default\/files\/css\/ttm\/css_4kJTNCA7chLJ6eDqckJ8mHzYZ9NbYnti.cssX?rssptb\u0022 \/\u003E\n"},{"command":"insert","method":"replaceWith","selector":"[data-big-pipe-placeholder-id=\u0022callback=Drupal%5CCore%5CRender%5CElement%5CStatusMessages%3A%3ArenderMessages\u0026args%5B0%5D\u0026token=_HAdUpwWmet0TOTe2PSiJuMntExoshbm1kh2wQzzzAA\u0022]","data":"","settings":null}]
    </script>
<script type="application/vnd.drupal-ajax" data-big-pipe-event="stop"></script>

Steps to reproduce

Enable Admin Toolbar + Extra Tools (at least 3.3 and dev)
Enable twig debugging (maybe not necessary)
Build a new theme (based on stable9) and include a new CSS file with hook_css_alter()
Visit any page, where the new CSS file is included (admin pages are okay)

I'm using latest Drupal 10, and Admin Toolbar (3.3 or git). When I remove the "_csrf_token" lines from admin_toolbar_tools.routing.yml, the HTML is not broken anymore, but then I don't have permissions anymore to flush, run Cronjobs, etc.
I tried to debug the RouteProcessorCsrf.php, but it seems to be okay. Somewhere in the Admin Toolbar debugging it got a way too complicated. Maybe it's a bug in Drupal core, but everything else is working fine and the included JS seems to be from the Admin Toolbar.

Proposed resolution

Output valid html; there should be no relation between theme hook_css_alter() and Admin Toolbar. There should be no reason to include JS to handle new CSS files.

Remaining tasks

User interface changes

API changes

Data model changes

🐛 Bug report

Status

Active

Version

3.3

Component

User interface

Created by

🇩🇪Germany surrim Ourém, Portugal

Live updates comments and jobs are added and updated live.

Sign in to follow issues

Comments & Activities

Issue created by @surrim
Status changed to Closed: outdated 3 months ago1:01am 25 February 2025
Comment 3 months ago →
🇫🇷France dydave
No activity on issue for more than 2 years.

Please upgrade to the latest stable version and test again.
Closing: outdated.
Thanks!

contrib.social Blog FAQ Discussions

Production build 0.71.5 2024