ウェブサイトで外部の画像やフォントを読み込むとき、CSSでは長らくurl()にファイルの場所を書くだけでした。別ドメインからの取得方法や、ファイルが途中で差し替えられていないかの検証といった細かい挙動は、HTML側の属性やサーバー設定に任せるしかありませんでした。読み込みの見た目はCSSで書けるのに、読み込み方の安全面はCSSの外にある、という状態が続いていたわけです。Chrome 150(2026年6月30日公開)で、このurl()に読み込み方法そのものを書き足せる仕組みが正式に使えるようになりました。
url()の後ろに指定を書き足す
新しく加わったのは、url()の中でファイルのURLに続けて指定を書けるという書き方です。CORSの取得モードを決めるcross-origin()、ファイルの中身を検証するintegrity()、参照元の送り方を決めるreferrer-policy()の三つが用意されました。いずれもCSSの値に関する仕様で定められたもので、HTMLの属性でできていたことをスタイルシート側に持ち込む位置づけです。
たとえばbackground-image: url("photo.png" cross-origin(anonymous))と書けば、その画像はCORSの匿名モードで取得されます。これまでこうした制御はHTMLの<img>や<link>の属性でしか指定できず、CSSの中で完結させることはできませんでした。対象は画像だけでなく、フォント、SVGの参照、@importで読み込む別のスタイルシートにも同じ指定が使えます。装飾のためにCSSから直接読み込んでいたファイルほど、恩恵を受けやすい場所だと言えます。
ファイルの改ざんを検知する
三つの中でも制作の現場で注目したいのがintegrity()です。これはHTMLのSubresource Integrity(サブリソース完全性)と同じ考え方で、あらかじめ計算しておいたファイルのハッシュ値を書いておき、実際に取得したファイルのハッシュと一致するかを確認します。ハッシュはSHA-256やSHA-384といったアルゴリズムで求めた値を指定する形で、HTMLのintegrity属性と同じ書式です。一致しなければブラウザはそのファイルを読み込まず、表示にも使いません。
CDNに置いたフォントや、外部サービスから配信される装飾用ファイルが、配信元で差し替えられていないかを検証できるということです。Chromeはこのintegrity()を実際に照合しており、ハッシュが合わないファイルの描画をブロックします。共有のCDNを使う中小企業のサイトでも、想定していないファイルが紛れ込むリスクを一段下げられます。フォントを更新したときはハッシュも合わせて書き直す運用になるため、更新の手順に一つ手間が増える点だけは頭に入れておきたいところです。
CORSと参照元の指定
cross-origin()は別ドメインのファイルを取得するときのモードを指定します。フォントのように、そもそもCORSの許可がないと読み込めない種類のファイルもあり、これまではHTML側で気をつける必要がありました。referrer-policy()はファイルを取りに行くときに送る参照元情報の範囲を決めるもので、どのページから読み込んだかという情報を外部に渡しすぎないよう調整できます。いずれもこれまでHTMLの属性やHTTPヘッダーで設定していた項目を、スタイルシート側に寄せられるのが利点です。読み込みに関わる設定が一か所にまとまるぶん、後から見直すときの見通しもよくなります。
取り入れるときに見ておきたいところ
ブラウザ対応には差があります。Chrome 150は三つとも扱えますが、Safariはcross-origin()とreferrer-policy()を先行して実装した一方で、integrity()にはまだ対応していないとされています。改ざん検知を前提に組む場合は、対応していないブラウザではその検証が効かないことを踏まえて設計する必要があります。
この書き方は既存のCSSに追記する形で使えるため、対応ブラウザでは効き、非対応ブラウザでは従来どおり読み込まれるという形に収まります。まずは重要なフォントや外部の装飾ファイルなど、差し替えられると影響が大きい部分から試すのが現実的です。外部ファイルへの依存が多いサイトほど、少しずつ取り入れておく価値のある機能だと言えそうです。
