Uploaded image for project: 'XWiki Platform'
  1. XWiki Platform
  2. XWIKI-19491

CSS file from WebJar is returned with content type application/javascript



    • Unknown
    • N/A
    • N/A


      Follow these steps to reproduce:

      • install the following WebJar using Extension Manager's advanced search: org.webjars.npm:smartwizard 5.1.1
      • create a new wiki page with this content:
        #set ($discard = $xwiki.linkx.use($services.webjars.url('org.webjars.npm:smartwizard',
          'dist/css/smart_wizard_all.min.css'), {'type': 'text/css', 'rel': 'stylesheet'}))
      • open the browser's developer tools and check the Network tab. Filter by "smartwizard" and check the content type of the response for the /xwiki/webjars/wiki%3Axwiki/smartwizard/5.1.1/dist/css/smart_wizard_all.min.css request.

      The content type should have been text/css but instead it is application/javascript. This prevents the browser from using the CSS.

      The root problem is in Tika for which I reported TIKA-3686. The workaround is described in https://stackoverflow.com/questions/4216344/mime-type-linking-to-css-w-a-txt-extension : basically you need to request the content of the CSS file (as text) and then inject a style tag in the page head with it:

      var style = $('<style></style>');
      style.load("$services.webjars.url('org.webjars.npm:smartwizard',  'dist/css/smart_wizard_all.min.css')");

      Note that the only CSS files affected are those that are matching the magic JavaScript detection from tika-mimetypes.xml:

      <mime-type type="application/javascript">
        <alias type="application/x-javascript"/>
        <alias type="text/javascript"/>
        <sub-class-of type="text/plain"/>
        <_comment>JavaScript Source Code</_comment>
        <glob pattern="*.js"/>
        <!-- Note - there is no Unique Magic for JavaScript files! -->
        <!-- Generally you can only detect JS with the filename -->
        <!-- However... A few common JS libraries accidentally trigger -->
        <!--  the HTML priority=20 magic incorrectly. So, for those only, -->
        <!--  we list "magic" for those specific files -->
        <magic priority="50">
          <!-- jQuery -->
          <match value="/* jQuery " type="string" offset="0"/>
          <match value="/*! jQuery " type="string" offset="0"/>
          <match value="/*!" type="string" offset="0">
             <match value="* jQuery " offset="4:8"/>
          <match value="(function(e,undefined){" type="string" offset="0"/>
          <match value="!function(window,undefined){" type="string" offset="0"/>
          <!-- Prototype -->
          <match value="/*  Prototype JavaScript " type="string" offset="0"/>
          <match value="var Prototype={" type="string" offset="0"/>
          <match value="function $w(t){" type="string" offset="0"/>
          <!-- React -->
          <match value="/** @license React" type="string" offset="0"/>
          <match value="/**" type="string" offset="0">
             <match value="* React " offset="4:8"/>

      This means for instance CSS files that start with a (CSS) comment that starts with "jQuery" or "React"...


        Issue Links



              tmortagne Thomas Mortagne
              mflorea Marius Dumitru Florea
              0 Vote for this issue
              3 Start watching this issue