Contrib.social

Setting 'Enforce clean and canonical URLs.' breaks CSS aggregation on multilingual Drupal 10.1.x with browser caching enabled

Open on Drupal.org โ†’
Created on 7 July 2023, over 1 year ago

Problem/Motivation

Setting 'Enforce clean and canonical URLs.' breaks CSS aggregation on multilingual Drupal 10.1.x with browser caching enabled and where your language has a prefix (f.e. 'en' for English) configured.

Change record https://www.drupal.org/node/3301716 โ†’ introduced a performance improvement that boils down to: Instead of a page request creating and writing several files before it can be sent to the browser, now the main page request just generates the URLs, and the actual CSS or JavaScript aggregate is individually created by PHP (and still written to disk assuming it's valid).

Behaviour before the change:

A page is requested, the main request generates the aggregated CSS files and writes them to the disk. The HTML of the page is returned to the browser. The browser requests the aggregated CSS files and they are present of the disk so they are returned.

Behaviour after the change:

A page is requested, it no longer generates the aggregated CSS files. The HTML of the page is returned to the browser. The browser requests the aggregated CSS files. They are not present on the disk so they are generated. The RouteNormalizerRequestSubscriber from this module is now triggered when aggregated CSS files are requested from the browser and a redirect response is returned from it redirecting /sites/default/files/css/css_MXjpf7HZqh... to /en/sites/default/files/css/css_MXjpf7HZqh... . The browser then requests /en/sites/default/files/css/css_MXjpf7HZqh... which loads fine but later requests for this URL are blocked by the browser because of MIME type checks because the MIME type is no longer 'text/css' but 'text/plain'.

Steps to reproduce

  1. Install Drupal 10.1.0 or later
  2. Install the redirect module and enable it. The setting 'Enforce clean and canonical URLs.' will be enabled by default.
  3. At Config > Performance , 'Aggregate CSS files' is enabled by default. Set 'Browser and proxy cache maximum age' to 5 minutes.
  4. Enable the 'Language' core module.
  5. At Configuration > Region and language > Languages > Detection and selection , 'URL' is enabled by default. Configure 'URL' to use 'en' as language prefix for English.
  6. Clear cache and delete the generated aggregated CSS files from disk
  7. Visit a page, it will load correctly
  8. Visit the page again and the aggregated CSS will no longer be loaded. In browser console you will find errors like Refused to apply style from 'https://my-drupal10-site.ddev.site/en/sites/default/files/css/css_MXjpf7......' because its MIME type ('text/plain') is not a supported stylesheet MIME type, and strict MIME checking is enabled.

Proposed resolution

Add an exception in RouteNormalizerRequestSubscriber or in RedirectChecker::canRedirect for aggregated CSS paths.

Remaining tasks

Discuss how we want to fix this and fix it.

User interface changes

?

API changes

N/A

Data model changes

N/A

๐Ÿ› Bug report
Status

Active

Version

1.0

Component

Code

Created by

๐Ÿ‡ง๐Ÿ‡ชBelgium stefdewa

Live updates comments and jobs are added and updated live.
Sign in to follow issues

Merge Requests

Comments & Activities

contrib.social Blog FAQ Discussions
Production build 0.71.5 2024