---
title: "SRI（Subresource Integrity）とは？HTML共有・AI生成サイトでの意味をやさしく解説"
description: "CDN経由で読み込む外部ライブラリが改ざんされていないかをブラウザが自動検証する仕組みがSRIです。AI生成HTMLでライブラリを利用する際にとくに関係してくるこの機能の意味と設定方法をやさしく解説します。"
image: "https://giga-site.com/og-image.png"
canonical: "https://giga-site.com/articles/what-is-sri-html-share"
markdown: "https://giga-site.com/articles/what-is-sri-html-share/index.md"
category: "用語解説"
publishedAt: "2026-06-25"
updatedAt: "2026-06-25"
readingMinutes: 4
---
# SRI（Subresource Integrity）とは？HTML共有・AI生成サイトでの意味をやさしく解説

SRI（Subresource Integrity）は外部ライブラリのJavaScriptやCSSが改ざんされていないことをブラウザが検証するためのセキュリティ機能です。AI生成HTMLでCDN経由のライブラリを読み込む場合に特に関係してくるため、仕組みと注意点を把握しておくと安全な共有に役立ちます。

> Source HTML: https://giga-site.com/articles/what-is-sri-html-share
> Article index: https://giga-site.com/articles/index.md

## ひとことで言うと

SRIとは、`<script src="..." integrity="sha384-...">` のようにハッシュ値を属性に書いておくことで、CDNから取得したファイルが期待通りの内容かどうかをブラウザが自動検証する仕組みです。ハッシュが一致しなければファイルの実行がブロックされます。

具体的には、Bootstrapの公式サイトが提供するCDNのscriptタグには最初からintegrity属性が含まれています。AIがHTMLを生成する際にこのタグをそのままコピーしていれば問題ありませんが、URLだけをコピーしてintegrity属性を省略すると、SRI保護が働かない状態になります。

- 相手がログインなしで開ける状態か確認する
- PCとスマホで最低1回ずつ表示を確認する
- 内部情報・個人情報・不要な外部送信が残っていないか見る
- レビュー期限と修正時の差し替え方を決めておく

## HTML共有で関係する場面

AI生成HTMLをギガサイト便などで公開する場合、CDNのJavaScriptが改ざんされたとしてもSRIがあればブラウザがブロックしてくれます。特に社内向けのレビュー用HTMLでなく、外部の関係者に送る場合や、長期間公開するURLを発行する場合はSRI設定の有無を確認しておくことを推奨します。

一方で、AIが生成したHTMLでは、CDN URLは正しくてもintegrity属性が省かれているケースが多いです。これはAIがURLの生成は得意でもハッシュ値の計算・埋め込みを指示なしには行わないためです。依頼時に「Bootstrapなどの外部ライブラリにはintegrity属性を必ず含めること」と指示を加えると改善されます。

## よくある誤解

「SRIを設定していれば外部ライブラリが安全」という誤解があります。SRIはファイルの改ざん検出はできますが、ライブラリ自体に脆弱性がある場合や、悪意のある開発者が最初から意図してバックドアを仕込んだ場合には対応できません。SRIはあくまでCDN配信経路での改ざんを防ぐためのものです。

「integrity属性を付けると常にエラーになる」という誤解も見かけます。ハッシュが正しい限りエラーにはなりません。エラーが出るのは、CDNのファイルがバージョンアップされてハッシュが変わったのに古いintegrity値のままにしている場合です。バージョン番号をURLに明記し、ライブラリ更新時にintegrity値も更新する運用が重要です。

## 安全に使うための注意点

integrity属性のsha384ハッシュ値は自分で計算することも可能です。`openssl dgst -sha384 -binary ファイル名 | openssl base64 -A`でコマンドラインから生成できます。ただし通常はBootstrapやjQueryの公式ドキュメントが提供するCDNスニペットに含まれているため、公式サイトからコピーするのが最も安全で確実です。

crossorigin="anonymous"属性もintegrity属性と一緒に指定する必要があります。この属性がないとCORSエラーになりSRIの検証ができません。AIが生成するCDNタグにcrossorigin属性が含まれているかも確認してください。公式スニペットをそのまま使えば通常は両方含まれています。

## よくある質問

### integrity属性のハッシュ値はどこで取得できますか？

利用するライブラリの公式ドキュメントやCDNプロバイダー（cdnjs、jsDelivrなど）のページに、コピー用のscriptタグがintegrity属性付きで掲載されています。そのまま使うのが最も確実です。

### SRIエラーがコンソールに出ている場合の原因は何ですか？

CDN側のファイルが更新されてハッシュが変わったにもかかわらず、integrity属性の値が古いままになっているケースが最多です。公式サイトから最新のCDNスニペットを再取得して上書きしてください。

### 自社サーバーにホストしているJSファイルにもSRIは必要ですか？

自社サーバーへのアクセスを自分で管理できる場合、CDNと比べて改ざんリスクは低いためSRIは必須ではありません。ただしマルチCDN構成やS3バケットを使う場合は設定を検討する価値があります。

## 関連記事

- [Referrer-Policyとは？HTML共有・AI生成サイトでの意味をやさしく解説](https://giga-site.com/articles/what-is-referrer-policy-html-share/index.md)
- [Permissions-Policyとは？HTML共有・AI生成サイトでの意味をやさしく解説](https://giga-site.com/articles/what-is-permissions-policy-html-share/index.md)
- [Same-Origin Policyとは？HTML共有・AI生成サイトでの意味をやさしく解説](https://giga-site.com/articles/what-is-same-origin-policy-html-share/index.md)
- [sandbox付きiframeとは？HTML共有・AI生成サイトでの意味をやさしく解説](https://giga-site.com/articles/what-is-sandbox-iframe-html-share/index.md)
- [CORSプリフライトとは？HTML共有・AI生成サイトでの意味をやさしく解説](https://giga-site.com/articles/what-is-cors-preflight-html-share/index.md)
- [CSP nonceとは？HTML共有・AI生成サイトでの意味をやさしく解説](https://giga-site.com/articles/what-is-csp-nonce-html-share/index.md)

```json
{
  "@context": "https://schema.org",
  "@type": "Article",
  "headline": "SRI（Subresource Integrity）とは？HTML共有・AI生成サイトでの意味をやさしく解説",
  "description": "CDN経由で読み込む外部ライブラリが改ざんされていないかをブラウザが自動検証する仕組みがSRIです。AI生成HTMLでライブラリを利用する際にとくに関係してくるこの機能の意味と設定方法をやさしく解説します。",
  "datePublished": "2026-06-25",
  "dateModified": "2026-06-25",
  "mainEntityOfPage": "https://giga-site.com/articles/what-is-sri-html-share",
  "url": "https://giga-site.com/articles/what-is-sri-html-share",
  "inLanguage": "ja",
  "image": "https://giga-site.com/og-image.png",
  "articleSection": "用語解説",
  "author": {
    "@type": "Organization",
    "name": "ギガサイト便"
  },
  "publisher": {
    "@type": "Organization",
    "name": "ギガサイト便"
  },
  "mainEntity": [
    {
      "@type": "Question",
      "name": "integrity属性のハッシュ値はどこで取得できますか？",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "利用するライブラリの公式ドキュメントやCDNプロバイダー（cdnjs、jsDelivrなど）のページに、コピー用のscriptタグがintegrity属性付きで掲載されています。そのまま使うのが最も確実です。"
      }
    },
    {
      "@type": "Question",
      "name": "SRIエラーがコンソールに出ている場合の原因は何ですか？",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "CDN側のファイルが更新されてハッシュが変わったにもかかわらず、integrity属性の値が古いままになっているケースが最多です。公式サイトから最新のCDNスニペットを再取得して上書きしてください。"
      }
    },
    {
      "@type": "Question",
      "name": "自社サーバーにホストしているJSファイルにもSRIは必要ですか？",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "自社サーバーへのアクセスを自分で管理できる場合、CDNと比べて改ざんリスクは低いためSRIは必須ではありません。ただしマルチCDN構成やS3バケットを使う場合は設定を検討する価値があります。"
      }
    }
  ]
}
```