livewire/volt

PHP tags inside strings cause incorrect rendering of template

Open

#126 geöffnet am 21. Dez. 2024

Auf GitHub ansehen
 (2 Kommentare) (0 Reaktionen) (0 zugewiesene Personen)PHP (35 Forks)user submission
help wanted

Repository-Metriken

Stars
 (420 Stars)
PR-Merge-Metriken
 (Keine gemergten PRs in 30 T)

Beschreibung

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

https://github.com/livewire/volt/blob/39e225e8720979114e6b66096108441c81d90b55/src/Precompilers/ExtractTemplate.php#L51

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="{&quot;data&quot;:{&quot;title&quot;:&quot;Exmple of ?&gt; causing problems&quot;,&quot;message&quot;:&quot;PHP starts with &lt;?php and ends with ?&gt;&quot;},&quot;memo&quot;:{&quot;id&quot;:&quot;oXiRLjallSrQA1IiUhzv&quot;,&quot;name&quot;:&quot;volt-anonymous-fragment-eyJuYW1lIjoidm9sdC1hbm9ueW1vdXMtZnJhZ21lbnQtNzI1NzhjZjIzMmQ5NTQwYTkxYzkwZTIxNWI3NmVlZWMiLCJwYXRoIjoicmVzb3VyY2VzXC92aWV3c1wvcGFnZXNcL2V4YW1wbGUuYmxhZGUucGhwIn0=&quot;,&quot;path&quot;:&quot;example&quot;,&quot;method&quot;:&quot;GET&quot;,&quot;children&quot;:[],&quot;scripts&quot;:[],&quot;assets&quot;:[],&quot;errors&quot;:[],&quot;locale&quot;:&quot;en&quot;},&quot;checksum&quot;:&quot;173f579b1442267838c7d014c1a23f7073d6f0133e57bf58e11e805427d1c1b8&quot;}" wire:effects="[]" wire:id="oXiRLjallSrQA1IiUhzv">
            <h1>Exmple of ?&gt; causing problems</h1>
            <p>PHP starts with &lt;?php and ends with ?&gt;</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>

Contributor Guide