Unfortunately, we have to enable unsafe-inline if we are using Paypal (#4189)

Author: ildyria

config/secure-headers.php

@@ -545,7 +545,11 @@
 		'connect-src' => [
 			'self' => true,
 			'allow' => array_merge(
-				['https://lycheeorg.dev/update.json'],
+				[
+					'https://lycheeorg.dev/update.json',
+					'https://www.sandbox.paypal.com',
+					'https://www.paypal.com',
+				],
 				explode(',', (string) env('SECURITY_HEADER_CSP_CONNECT_SRC', ''))
 			),
 		],
@@ -593,6 +597,7 @@
 					'https://a.osm.rrze.fau.de/osmhd/',
 					'https://b.osm.rrze.fau.de/osmhd/',
 					'https://c.osm.rrze.fau.de/osmhd/',
+					'https://www.paypalobjects.com',
 					'data:', // required by openstreetmap
 					'blob:', // required for "live" photos
 				],
@@ -701,7 +706,12 @@
 			'report-sample' => true,
 
 			'allow' => array_merge(
-				['https://www.dropbox.com/static/api/1/dropins.js', 'https://js.mollie.com', 'https://js.stripe.com'],
+				[
+					'https://www.dropbox.com/static/api/1/dropins.js',
+					'https://js.mollie.com',
+					'https://js.stripe.com',
+					'https://www.paypal.com/sdk/js',
+				],
 				explode(',', (string) env('SECURITY_HEADER_SCRIPT_SRC_ALLOW', ''))
 			),
 
@@ -711,7 +721,8 @@
 			],
 
 			/* followings are only work for `script` and `style` related directives */
-			'unsafe-inline' => false,
+			// We need this one for PayPal SDK sadly.
+			'unsafe-inline' => env('PAYPAL_CLIENT_ID', '') !== '',
 
 			'unsafe-eval' => false,
 
@@ -725,7 +736,7 @@
 
 			// Those should be removed if we drop v4 legacy support completely.
 			'hashes' => [
-				'sha256' => [
+				'sha256' => env('PAYPAL_CLIENT_ID', '') !== '' ? [] : [
 					// 'sha256-hash-value-with-base64-encode',
 
 					// lychee.startDrag(event)

resources/js/components/webshop/OrderSummary.vue

@@ -1,6 +1,6 @@
 <template>
 	<div
-		class="flex flex-col max-h-[75vh] p-8 bg-surface-50 dark:bg-surface-950/25 rounded border border-surface-200 dark:border-surface-700 min-h-[400px]"
+		class="flex flex-col max-h-[75vh] p-8 bg-surface-50 dark:bg-surface-950/25 rounded border border-surface-200 dark:border-surface-700 min-h-100"
 		v-if="order"
 	>
 		<div class="text-lg font-bold text-center mb-12">{{ $t("webshop.orderSummary.title") }}</div>