From: Tim Düsterhus <duesterhus@woltlab.com>
Date: Wed, 14 Jul 2021 09:14:03 +0000 (+0200)
Subject: Use `data:` URIs to load assets in WCFSetup
X-Git-Tag: 5.5.0_Alpha_1~528^2
X-Git-Url: https://git.stricted.de/?a=commitdiff_plain;h=600940bc4fe0cbc219ba6fd9a89444aefa07dda5;p=GitHub%2FWoltLab%2FWCF.git

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 7bd1ad8429..68da82eadd 100644
--- 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 1d3b4129c1..e058a09e0b 100644
--- 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 dd477c9b5f..218c054792 100644
--- 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 43c31d8a61..95b9782fa8 100644
--- 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">