Use `data:` URIs to load assets in WCFSetup

With this change the HTML responses generated by WCFSetup are completely
self-contained and do not rely on external requests.

This avoids the proxying of the assets using PHP from the temporary folder at
the expense of slightly bloating the HTML with the embedded CSS.

The total size of the HTML is 530kB before gzip and 200kB after gzip.

Resolves #4394

diff --git a/wcfsetup/install.php b/wcfsetup/install.php
index 7bd1ad84294ac082cd8e8681b4f65d896c0c5641..68da82eadd81bd8c9a1688891241390a2cd8d224 100644 (file)
--- a/wcfsetup/install.php
+++ b/wcfsetup/install.php
@@ -1254,70 +1254,6 @@ define('TMP_FILE_PREFIX', $prefix);
 // try to find the temp folder
 define('TMP_DIR', BasicFileUtil::getInstallTempFolder());
 
-/**
- * Reads a file resource from temp folder.
- * 
- * @param      string          $key
- * @param      string          $directory
- */
-function readFileResource($key, $directory) {
-       if (preg_match('~[\w\-]+\.(css|jpg|png|svg|eot|woff|ttf)~', $_GET[$key], $match)) {
-               switch ($match[1]) {
-                       case 'css':
-                               header('Content-Type: text/css');
-                       break;
-                       
-                       case 'jpg':
-                               header('Content-Type: image/jpg');
-                       break;
-                       
-                       case 'png':
-                               header('Content-Type: image/png');
-                       break;
-                       
-                       case 'svg':
-                               header('Content-Type: image/svg+xml');
-                       break;
-                       
-                       case 'eot':
-                               header('Content-Type: application/vnd.ms-fontobject');
-                       break;
-                               
-                       case 'woff':
-                               header('Content-Type: application/font-woff');
-                       break;
-                                       
-                       case 'ttf':
-                               header('Content-Type: application/octet-stream');
-                       break;
-               }
-               
-               header('Expires: '.gmdate('D, d M Y H:i:s', time() + 3600).' GMT');
-               header('Last-Modified: Mon, 26 Jul 1997 05:00:00 GMT');
-               header('Cache-Control: public, max-age=3600');
-               
-               readfile($directory . $_GET[$key]);
-       }
-       exit;
-}
-
-// show image from temp folder
-if (isset($_GET['showImage'])) {
-       readFileResource('showImage', TMP_DIR . 'install/files/acp/images/');
-}
-// show icon from temp folder
-if (isset($_GET['showIcon'])) {
-       readFileResource('showIcon', TMP_DIR . 'install/files/icon/');
-}
-// show css from temp folder
-if (isset($_GET['showCSS'])) {
-       readFileResource('showCSS', TMP_DIR . 'install/files/acp/style/setup/');
-}
-// show fonts from temp folder
-if (isset($_GET['showFont'])) {
-       readFileResource('showFont', TMP_DIR . 'install/files/font/');
-}
-
 // check whether setup files are already unzipped
 if (!file_exists(TMP_DIR . 'install/files/lib/system/WCFSetup.class.php')) {
        // try to unzip all setup files into temp folder

diff --git a/wcfsetup/install/files/lib/system/WCFSetup.class.php b/wcfsetup/install/files/lib/system/WCFSetup.class.php
index 1d3b4129c1b53e2a29aa6151369ac394a142e60d..e058a09e0b399882e575de27bafff7fea797bdf1 100644 (file)
--- a/wcfsetup/install/files/lib/system/WCFSetup.class.php
+++ b/wcfsetup/install/files/lib/system/WCFSetup.class.php
@@ -188,6 +188,21 @@ class WCFSetup extends WCF
             'languageCode' => self::$selectedLanguageCode,
             'directories' => self::$directories,
             'developerMode' => self::$developerMode,
+
+            'setupAssets' => [
+                'WCFSetup.css' => \sprintf(
+                    'data:text/css;base64,%s',
+                    \base64_encode(\file_get_contents(TMP_DIR . 'install/files/acp/style/setup/WCFSetup.css'))
+                ),
+                'woltlabSuite.png' => \sprintf(
+                    'data:image/png;base64,%s',
+                    \base64_encode(\file_get_contents(TMP_DIR . 'install/files/acp/images/woltlabSuite.png'))
+                ),
+                'fontawesome-webfont.woff2' => \sprintf(
+                    'data:font/woff2;base64,%s',
+                    \base64_encode(\file_get_contents(TMP_DIR . 'install/files/font/fontawesome-webfont.woff2'))
+                ),
+            ],
         ]);
     }
 

diff --git a/wcfsetup/setup/template/header.tpl b/wcfsetup/setup/template/header.tpl
index dd477c9b5f467e667266059903c90d0f3d39c58a..218c054792978a1b0b3a4fb6f318478bd205dd46 100644 (file)
--- a/wcfsetup/setup/template/header.tpl
+++ b/wcfsetup/setup/template/header.tpl
@@ -5,20 +5,16 @@
        <title>{lang}wcf.global.progressBar{/lang} - {lang}wcf.global.title{/lang}</title>
 
        <meta name="viewport" content="width=device-width, initial-scale=1">
-       <link rel="stylesheet" type="text/css" media="screen" href="{if $lastStep|isset}{@RELATIVE_WCF_DIR}acp/style/setup/{else}install.php?tmpFilePrefix={@TMP_FILE_PREFIX}&amp;showCSS={/if}WCFSetup.css">
+       <link rel="stylesheet" type="text/css" media="screen" href="{$setupAssets['WCFSetup.css']}">
 
-       {if !$lastStep|isset}
-               <style type="text/css">
-                               @font-face {
-                                       font-family: 'FontAwesome';
-                                       src: url('install.php?tmpFilePrefix={@TMP_FILE_PREFIX}&showFont=fontawesome-webfont.eot');
-                                       src: url('install.php?tmpFilePrefix={@TMP_FILE_PREFIX}&showFont=fontawesome-webfont.eot#iefix') format('embedded-opentype'),
-                                               url('install.php?tmpFilePrefix={@TMP_FILE_PREFIX}&showFont=fontawesome-webfont.ttf') format('truetype');
-                                       font-weight: normal;
-                                       font-style: normal;
-                               }
-               </style>
-       {/if}
+       <style type="text/css">
+               @font-face {
+                       font-family: 'FontAwesome';
+                       src: url('{$setupAssets['fontawesome-webfont.woff2']}') format('woff2');
+                       font-weight: normal;
+                       font-style: normal;
+               }
+       </style>
 
        <style type="text/css">
                #pageHeaderContainer {
@@ -40,7 +36,7 @@
                                <div id="pageHeaderFacade" class="pageHeaderFacade">
                                        <div class="layoutBoundary">
                                                <div id="pageHeaderLogo" class="pageHeaderLogo">
-                                                       <img src="{if $lastStep|isset}{@RELATIVE_WCF_DIR}acp/images/{else}install.php?tmpFilePrefix={@TMP_FILE_PREFIX}&amp;showImage={/if}woltlabSuite.png" alt="" style="height: 40px; width: 281px;">
+                                                       <img src="{$setupAssets['woltlabSuite.png']}" alt="" style="height: 40px; width: 281px;">
                                                </div>
                                        </div>
                                </div>

diff --git a/wcfsetup/setup/template/stepInstallPackages.tpl b/wcfsetup/setup/template/stepInstallPackages.tpl
index 43c31d8a61d4c81c03ad7fb4942a529c08acd045..95b9782fa834cf20aa2921f4a3e8cdf074bcfca1 100644 (file)
--- a/wcfsetup/setup/template/stepInstallPackages.tpl
+++ b/wcfsetup/setup/template/stepInstallPackages.tpl
@@ -1,4 +1,3 @@
-{assign var=lastStep value=true}
 {include file='header'}
 
 <section class="section">