livewire/volt
View on GitHubPHP tags inside strings cause incorrect rendering of template
Open
#126 opened on Dec 21, 2024
help wanted
Description
Volt Version
1.6.1
Laravel Version
11.36,1
PHP Version
8.3.6
Database Driver & Version
No response
Description
If the PHP opening or closing tags appear in a string in the template then the template is rendered incorrectly. This stems from a naive regex in the ExtractTemplate precompiler class on line 51
Steps To Reproduce
The following simple Volt component demonstrates the issue.
<?php
use function Livewire\Volt\{state};
state(
title: 'Exmple of ?> causing problems',
message: 'PHP starts with <?php and ends with ?>',
);
?>
<x-layouts.app>
@volt
<div>
<h1>{{ $title }}</h1>
<p>{{ $message }}</p>
</div>
@endvolt
</x-layouts.app>
There is nothing special in the layout component
<!DOCTYPE html>
<html>
<head>
<title>Volt App</title>
</head>
<body>
{{ $slot }}
</body>
</html>
This gives the following output (note the extract of PHP code that has been rendered as part of the template)
causing problems',
message: 'PHP starts with ',
);
?>
<!DOCTYPE html>
<html>
<head>
<title>Volt App</title>
<!-- Livewire Styles --><style >[wire\:loading][wire\:loading], [wire\:loading\.delay][wire\:loading\.delay], [wire\:loading\.inline-block][wire\:loading\.inline-block], [wire\:loading\.inline][wire\:loading\.inline], [wire\:loading\.block][wire\:loading\.block], [wire\:loading\.flex][wire\:loading\.flex], [wire\:loading\.table][wire\:loading\.table], [wire\:loading\.grid][wire\:loading\.grid], [wire\:loading\.inline-flex][wire\:loading\.inline-flex] {display: none;}[wire\:loading\.delay\.none][wire\:loading\.delay\.none], [wire\:loading\.delay\.shortest][wire\:loading\.delay\.shortest], [wire\:loading\.delay\.shorter][wire\:loading\.delay\.shorter], [wire\:loading\.delay\.short][wire\:loading\.delay\.short], [wire\:loading\.delay\.default][wire\:loading\.delay\.default], [wire\:loading\.delay\.long][wire\:loading\.delay\.long], [wire\:loading\.delay\.longer][wire\:loading\.delay\.longer], [wire\:loading\.delay\.longest][wire\:loading\.delay\.longest] {display: none;}[wire\:offline][wire\:offline] {display: none;}[wire\:dirty]:not(textarea):not(input):not(select) {display: none;}:root {--livewire-progress-bar-color: #2299dd;}[x-cloak] {display: none !important;}</style>
</head>
<body>
<div wire:snapshot="{"data":{"title":"Exmple of ?> causing problems","message":"PHP starts with <?php and ends with ?>"},"memo":{"id":"oXiRLjallSrQA1IiUhzv","name":"volt-anonymous-fragment-eyJuYW1lIjoidm9sdC1hbm9ueW1vdXMtZnJhZ21lbnQtNzI1NzhjZjIzMmQ5NTQwYTkxYzkwZTIxNWI3NmVlZWMiLCJwYXRoIjoicmVzb3VyY2VzXC92aWV3c1wvcGFnZXNcL2V4YW1wbGUuYmxhZGUucGhwIn0=","path":"example","method":"GET","children":[],"scripts":[],"assets":[],"errors":[],"locale":"en"},"checksum":"173f579b1442267838c7d014c1a23f7073d6f0133e57bf58e11e805427d1c1b8"}" wire:effects="[]" wire:id="oXiRLjallSrQA1IiUhzv">
<h1>Exmple of ?> causing problems</h1>
<p>PHP starts with <?php and ends with ?></p>
</div>
<!-- Livewire Scripts -->
<script src="[/livewire/livewire.js?id=02b08710](https://livewire.projects.test/livewire/livewire.js?id=02b08710)" data-csrf="80ALUp1mlTldYlewWeaiBgmmEYC2kdNE4IY5kTxx" data-update-uri="/livewire/update" data-navigate-once="true"></script>
</body>
</html>