Script Tags Inside $this->Html->scriptStart() Not Recognized

[zunnu]

Description

For security reasons and to comply with Content Security Policy (CSP), we are wrapping all our <script> tags using $this->Html->scriptStart(['block' => true]). However, CakePHP does not recognize the <script> tags inside and throws an error in the console. If we remove the tags, we lose syntax highlighting, which is important for development.

Example:

<?php $this->Html->scriptStart(['block' => true]) ?>
    <script type="text/javascript">
        initSocketIo(function(socket) {

        })
    </script>
<?php $this->Html->scriptEnd() ?>

Expected Behavior:

• CakePHP should recognize the <script> tags inside $this->Html->scriptStart() without errors.
• Syntax highlighting should remain available in IDEs.
• On render, CakePHP should strip the <script> tags from the block to ensure correct output while keeping syntax highlighting during development.

Actual Behavior:

• CakePHP does not recognize the script tags and throws an error in the browser console.
• Removing the <script> tags resolves the error but results in loss of syntax highlighting.

CakePHP Version

4.5

PHP Version

No response

[markstory]

Stripping script tags is not part of the current functionality of the HtmlHelper. Moving to enhancement.

If HtmlHelper::scriptEnd() were to strip tags what would become of any attributes defined on the script element?

[zunnu]

With <script> tag, my primary concern is maintaining syntax highlighting. What attributes can you define to <script> that would be important? Currently its not possible to use <script> tags at all with scriptBlocks

I can't speak for the HtmlHelper::scriptEnd() our implementaation modifies the scriptBlock and styleBlock functions to allow <script> and <style> tags

public function scriptBlock(string $script, array $options = []): ?string
{
    // Let's allow <script> tags, so we can still use syntax highlighting
    $script = trim(preg_replace(['#<script[^>]*>#', '#</script>#'], '', $script), "\r\n ");
}

[markstory]

What attributes can you define to <script> that would be important?

There are several attributes that script tags can have.

[zunnu]

Yes but currently <script> tags are not working at all.
If I would do

<?php $this->Html->scriptStart(['block' => true]) ?>
    <script type="text/javascript">
        initSocketIo(function(socket) {

        })
    </script>
<?php $this->Html->scriptEnd() ?>

I would get Uncaught SyntaxError: Unexpected token '<' to console.
Maybe there could be custom syntax for attributes like $this->Html->scriptStart(['block' => true, 'type' => 'text/javascript'])
But the issue here more about developer experience regarding missing syntax when using these script blocks,

[markstory]

Maybe there could be custom syntax for attributes like $this->Html->scriptStart(['block' => true, 'type' => 'text/javascript'])

Of course attributes, can be provided to scriptStart. What I'm trying ask is how should the following behave?

<?php $this->Html->scriptStart(['block' => true]) ?>
    <script type="text/javascript" async defer="true">
        initSocketIo(function(socket) {

        })
    </script>
<?php $this->Html->scriptEnd() ?>

What should the precedence be for attributes defined as attributes in the HTML vs those provided as array parameters.

But the issue here more about developer experience regarding missing syntax when using these script blocks,

Fair enough. However, we should take the time to consider other scenarios than just your immediate one. Currently, I think your proposed solution has a few developer experience gaps that I think need to be addressed.

[zunnu]

Array parameters should take precedence.
In php 8 we could do

public function scriptBlock(string $script, array $options = []): ?string
{
  // Let's allow <script> tags, so we can still use syntax highlighting
  if (preg_match('#<script([^>]*)>#i', $script, $match)) {
      $attrs = current(
          (array) new \SimpleXMLElement("<element $match[1] />")
      );
  
      $options += $attrs ?: [];
  
      $script = trim(
          preg_replace(['#<script[^>]*>#', '#</script>#'], '', $script), 
          "\r\n "
      );
  }
}

This will match attributes in <script> and convert them into array using SimpleXMLElement and put them into $options and then remove the <script> tags. It doesn't support multiple <script> tags but I don't think it should.

[dereuromark]

I always use in templates

<?php $this->append('script'); ?>
<script>
    $(document).ready(function () {
        ...
    });
</script>
<?php $this->end(); ?>

And in layout

<?= $this->AssetCompress->script('js-combined') ?>
<?php echo $this->fetch('script') ?>
<?php echo $this->fetch('postLink') ?>
</body>

That works fine and doesnt need any stripping hacks.
I would suggest not using the scriptBlock if you dont feed it pure script.

[ADmad]

Given the example by @dereuromark, I don't think any change is needed here.