【VibeCoding】'integrity' attribute エラーの解消

お久しぶりです。
社内でAIおじさん的な立ち位置になりつつある、システム開発部のスジュンです
簡潔にですがAIをつかったVibeCodingしていた時に発生したエラーについての共有です。

ある日、CSS,JSが読み込まれなくなった。

別記事に記載したChrome拡張機能はAIとVibeCodingしているわけなのですが、
普段開発しているPCとは別のPCで変更を取り込んで動作確認しようとしたところ、一部のCSS,JSが読み込まれない現象が発生していました。

ソースに変更も行っていない、開発PCでは正常に表示されているといった現象で、とても困惑しました。

実際のエラー内容

Failed to find a valid digest in the 'integrity' attribute for resource 'chrome-extension://pnknjjpncnciijkpdfgfiikmhlmamaid/src/lib/bootstrap.min.css' with computed SHA-384 integrity 'kKU3+OPzehmYTvkHC2v4pQedEFsYRKntOejtb44v+QUK8+Z3UBoSur+7Q3tDF4Rn'. The resource has been blocked.

エラー内容でGoogle検索したのですが、自分の状況の解決に繋がりそうな情報は得られませんでした。

不具合は実装者に聞くのが一番ということで

AIに聞いてみました。どうやら下記コードで発生しているようです。

<link href="../lib/bootstrap.min.css" rel="stylesheet"
      integrity="sha384-9ndCyUaIbzAi2FUVXJi0CjmCapSmO7SnpJef0486qhLnuZ2cdeRhO02iuK6FUUVM" crossorigin="anonymous">

この

integrity

がどうやら原因のようです。これについて教えてもらいました。

integrity属性とは

integrity属性は、リソースが改ざんされていないかの整合性を検証するために使用されるもののようです。
リソースのハッシュ値を属性として付与することによって、ブラウザ側が取得したリソースのハッシュ値とintegrity属性に設定されているハッシュ値に相違がないかを確認します。

発生原因の特定と解決プロセス

今回は下記手順を踏んで解決に至りました。

1. ソースコード比較
   コード自体を比較しましたが、差分は確認されませんでした。
2. 原因の絞り込み
   ファイルがサーバーやPC間で転送される際に、「エンコードの違い」が原因でブラウザが読み込む際の内容が異なると仮定しました。
3. エンコードを確認
   それぞれのファイルのエンコードを確認したところ、開発PCはLF、別PC側ではCRLFになっていることを確認しました。
4. 修正の確認
   修正の対応として、別PC側をLFに変更することによって、正常に読み込まれることを確認しました。

おまけ：ハッシュの生成

以下のコマンドで、指定ファイルのハッシュ値を生成できます。
詳細はMDNの サブリソース完全性 のページもご参照ください。

cat FILENAME.js | openssl dgst -sha384 -binary | openssl base64 -A

自分の環境だと、上記コマンドでは意図したハッシュ値にならなかったのですが、下記コマンドで作成できました。

// 通常版
$fileContent = Get-Content -Path ファイルパス -Encoding Byte
$hash = [System.Security.Cryptography.SHA384]::Create().ComputeHash($fileContent) 
[Convert]::ToBase64String($hash) 9ndCyUaIbzAi2FUVXJi0CjmCapSmO7SnpJef0486qhLnuZ2cdeRhO02iuK6FUUVM 
// 1行版
[Convert]::ToBase64String([System.Security.Cryptography.SHA384]::Create().ComputeHash([System.IO.File]::ReadAllBytes("ファイルパス")))
9ndCyUaIbzAi2FUVXJi0CjmCapSmO7SnpJef0486qhLnuZ2cdeRhO02iuK6FUUVM

まとめ

今回の事例から、以下のポイントが学べました：

• integrity属性によるリソース検証機能の存在
• 同一内容のリソースでも、エンコードの違い（CRLF vs LF）でハッシュ値に影響が出る
• 小さな設定の違いが大きなエラーに繋がる可能性があるため、環境間の差異に注意を払う必要がある

VibeCodingはとても楽しいですが、今回のようにAIの支援だけでは解決が難しい問題もあります。基礎知識の重要性を再認識する良い機会となりました。
この記事が皆様のお役に立てたなら何よりです！