CakePHP 4 で <link> や <script> に属性を追加する方法（integrity、crossorigin、async、defer など）

一昨日に投稿した「CakePHP 4 で出力される <meta> や <link> の空要素を閉じないようにする方法」では、HTML ヘルパーの fetch() で出力されるタグの変更方法をご紹介しました。

今日は、CakePHP 4 で出力される <link> と <script> に integrity、crossorigin、async、defer などの属性を追加する方法をご紹介します。

方法は簡単で、下記のように HTML ヘルパーの css() や script() の 第２引数に指定すれば OK です。

/src/templates/Samples/index.php
<?php $this->Html->css('sample-style', [
  'block' => true,
  // ▼ 追加
  'integrity' => '...',
  'crossorigin' => 'anonymous',
])?>

<?php $this->Html->script('sample-script', [
  'block' => true,
  // ▼ 追加 (defer の場合も同様です)
  'async',
]) ?>

第１引数を配列にして複数の URL を指定することもできますが、全てのタグに、第２引数の属性が追加されるのでご注意ください。

CDN を使う場合には integrity の指定をよく使うと思いますが、その場合は 1 URL ごとに css() を呼び出す必要が出てきます。そのような時にはタグを直書きした方がスッキリするので、特にレイアウトテンプレに書くときには css() と直書きを使い分けるといいのかなと思っています。

Cake\View\Helper\HtmlHelper::css (CakePHP 4.x Cookbook)
https://book.cakephp.org/4/en/views/helpers/html.html#Cake\View\Helper\HtmlHelper::css
Cake\View\Helper\HtmlHelper::script (CakePHP 4.x Cookbook)
https://book.cakephp.org/4/en/views/helpers/html.html#Cake\View\Helper\HtmlHelper::script