WEB-SECURITY20分で読める•日本語 Edition100% クライアントサイド実行

Webセキュリティの仕組みと多層防御アーキテクチャ徹底解説

ブラウザのセキュリティ境界、防御的HTTPヘッダー、CSP、SameSite Cookie、およびSRIによる脅威緩和設計。

Curious-Techie Engineering Team認証著者

Web Protocols & Security Architecture Research

公開日: 2026年1月15日

•

更新日: 2026年9月1日

•20分で読める

準拠仕様:RFC 9110(IETF)

査読者: Curious-Techie Architecture Peer Review Group

主要な疑問 • 即時アーキテクチャ回答

Webセキュリティの仕組みと多層防御アーキテクチャ徹底解説

TL;DR — 設計・エンジニアリングの要点

Webセキュリティはブラウザのセキュリティ境界とサーバーヘッダーによる多層防御で実現されます。
同一オリジンポリシー（SOP）はブラウザが強制する最も基本的な分離境界です。
CSP Level 3はスクリプト実行元を厳格に制限し、XSS攻撃の実行パスを封じ込めます。
サブリソース完全性（SRI）は外部CDNから読み込むスクリプトの改ざんを確実に検知します。

// 基本概念

中核概念とアーキテクチャ構造

Same-Origin Policy (SOP)

Boundary

Browser security boundary restricting how a document or script loaded by one origin can interact with a resource from another origin.

Defense in Depth

Principle

Layering multiple independent security controls so the failure of any single barrier does not compromise the application.

Content Security Policy (CSP)

Headers

Declarative HTTP header restricting external scripts, styles, fonts, and network calls to explicit allowlists.

Subresource Integrity (SRI)

SupplyChain

Cryptographic hash digests attached to HTML script/link tags ensuring external CDN files match exact expected binaries.

Principle of Least Privilege

Security

Restricting access, permissions, and tokens strictly to the minimum scope required to fulfill business logic.

処理プロセス • 実行シーケンス

Webセキュリティの仕組みと多層防御アーキテクチャ徹底解説の動作原理と仕組み

直接の回答:

When a web page renders, the browser parsing engine acts as a security enforcement sandbox. It evaluates every incoming HTTP response header before parsing DOM nodes or executing JavaScript. If HSTS is present, insecure requests are upgraded. If CSP is present, external script tags lacking valid nonces or hashes are immediately dropped. If X-Frame-Options is DENY, iframing attempts are blocked.

Origin Isolation Check

Browser computes origin tuple (Protocol, Host, Port) and isolates document storage (localStorage, IndexedDB, Cookies).

Origin: https://curious-techie.com:443

Header Parsing & Policy Enforcement

Browser parses HSTS, CSP, and X-Content-Type-Options before rendering DOM.

Strict-Transport-Security: max-age=63072000
Content-Security-Policy: default-src 'self'

Subresource Integrity Check

External scripts fetched from CDNs are hashed; hash is compared against integrity attribute before execution.

<script src="cdn.js" integrity="sha384-xyz..." crossorigin="anonymous">

Cookie Scope Verification

Browser filters cookies on outgoing requests according to Secure, HttpOnly, and SameSite flags.

Set-Cookie: session=xyz; Secure; HttpOnly; SameSite=Strict

DOM Sanitization & Safe APIs

Application code avoids sinks like eval() and innerHTML, using textContent or Trusted Types for DOM writes.

element.textContent = userSuppliedInput;

実装コード例 • ベストプラクティス

Webセキュリティの仕組みと多層防御アーキテクチャ徹底解説の実務における実装方法

Full Production Suite of Modern HTTP Security Headers

http

Strict-Transport-Security: max-age=63072000; includeSubDomains; preload
Content-Security-Policy: default-src 'self'; script-src 'self' https://trusted.cdn.com; object-src 'none'; base-uri 'self'; frame-ancestors 'none';
X-Content-Type-Options: nosniff
X-Frame-Options: DENY
Referrer-Policy: strict-origin-when-cross-origin
Permissions-Policy: camera=(), microphone=(), geolocation=(), payment=()

エンジニアリング詳細: Gold-standard HTTP response headers enforcing HSTS preloading, strict script origins, frame blocking, MIME sniffing elimination, and browser hardware isolation.

Generating an RFC 9116 security.txt Vulnerability Disclosure File

text

Contact: mailto:security@curious-techie.com
Contact: https://curious-techie.com/security/report
Expires: 2027-10-05T00:00:00.000Z
Preferred-Languages: en, es, ja
Canonical: https://curious-techie.com/.well-known/security.txt
Policy: https://curious-techie.com/security-policy

エンジニアリング詳細: RFC 9116 compliant security.txt placed at `/.well-known/security.txt` enabling ethical security researchers to report discovered vulnerabilities responsibly.

本番環境アーキテクチャ • 実用ケース

本番環境でのWebセキュリティの仕組みと多層防御アーキテクチャ徹底解説の適用理由と構成

FinTech Banking Portals

Securing online bank customer dashboards against session hijacking and XSS.

Enforcing strict CSP with cryptographic nonces, `HttpOnly` `SameSite=Strict` cookies, and `X-Frame-Options: DENY` to eliminate clickjacking.

Enterprise SaaS Single-Page Apps (React / Vue)

Preventing supply-chain attacks when consuming open-source npm dependencies and external vendor analytics.

Applying Subresource Integrity (SRI) on vendor bundles and defining restrictive CSP `connect-src` and `script-src` boundaries.

アンチパターンと回避策

Webセキュリティの仕組みと多層防御アーキテクチャ徹底解説でよくある設計上の過ちと誤解

アンチパターン: Storing sensitive JWT authentication tokens in browser localStorage or sessionStorage

影響: Any Cross-Site Scripting (XSS) vulnerability anywhere in the application allows attackers to steal user session credentials via `localStorage.getItem()`.

推奨される修正策: Store authentication credentials in secure, `HttpOnly`, `SameSite=Lax` cookies that are inaccessible to client-side JavaScript.

アンチパターン: Using `unsafe-inline` or wildcard `*` inside Content-Security-Policy directives

影響: Completely defeats the purpose of CSP, enabling injected script tags and DOM XSS vectors to execute freely.

推奨される修正策: Use cryptographic nonces (`script-src 'nonce-rAnd0m'`) or SHA-256 hashes (`script-src 'sha256-xyz'`) instead of `unsafe-inline`.

アンチパターン: Relying exclusively on client-side validation for form inputs

影響: Attackers bypass browser validation completely using cURL or Postman to submit malicious payloads directly to backend endpoints.

推奨される修正策: Always enforce robust server-side schema validation (Zod, Joi, or native validators) alongside client-side UX checks.

脅威モデル分析 • 攻撃ベクトル

Webセキュリティの仕組みと多層防御アーキテクチャ徹底解説のセキュリティ上のリスクと脆弱性

Cross-Site Scripting (XSS)

OWASP Top 10 A03:2021-Injection

脆弱性: Unsanitized user inputs reflected in HTML or rendered into DOM execution sinks (innerHTML, document.write).

防御・緩和策: Contextual output encoding, Trusted Types, and restrictive Content Security Policy headers.

Clickjacking (UI Redressing)

CWE-1021 Improper Restriction of Rendered UI Layers

脆弱性: Attacker frames target application inside an invisible iframe overlay to trick authenticated users into clicking buttons.

防御・緩和策: Implement `X-Frame-Options: DENY` and CSP `frame-ancestors 'none'`.

診断ワークフロー • 根本原因解決

Webセキュリティの仕組みと多層防御アーキテクチャ徹底解説のエラー診断とトラブルシューティング

発生症状とエラーの兆候: Blocked script execution with "Refused to load the script because it violates the following CSP directive"

根本原因の技術的分析:

Inline script lacks nonce
External CDN domain missing from `script-src` directive
Third-party library injecting inline event handlers

本番環境検証済み修正手順: Add cryptographic nonce to script tag (`<script nonce="...">`) or append authorized CDN domain to `script-src` in CSP response header.

発生症状とエラーの兆候: Failed to find a valid digest in the 'integrity' attribute for resource

根本原因の技術的分析:

CDN file updated upstream and hash changed
Line-ending mismatches (CRLF vs LF) altering byte-exact digest

本番環境検証済み修正手順: Recompute SHA-384 Base64 digest of current file using an SRI generator tool and update the `integrity` attribute.

技術ナレッジベース • 即時回答

Webセキュリティの仕組みと多層防御アーキテクチャ徹底解説に関するよくある質問

Q:What is the Same-Origin Policy (SOP)?

直接の回答:The Same-Origin Policy is a fundamental browser security boundary that restricts scripts loaded on one origin (scheme, host, and port) from accessing sensitive data or manipulating the DOM of a different origin.

Under SOP, `https://bank.com` cannot read cookies or DOM elements of `https://malicious.com`. Cross-Origin Resource Sharing (CORS) is the explicit opt-in mechanism that selectively relaxes SOP for authorized cross-origin API calls.

Q:Why is `X-Content-Type-Options: nosniff` critical?

直接の回答:It forces browsers to strictly adhere to the MIME type declared in the `Content-Type` header, preventing browsers from "MIME-sniffing" and executing user-uploaded images or text files as executable JavaScript.

Without `nosniff`, if a user uploads a malicious `.jpg` containing JavaScript code, older or loose browser parsers might sniff the script tags inside the image and execute it within the application origin.

セクション 12 • 対話型ユーティリティ

用語集

Origin

The combination of URI scheme (protocol), host (domain), and port number.

XSS

Cross-Site Scripting: An attack where malicious scripts are injected into trusted web applications.

CSRF

Cross-Site Request Forgery: An attack forcing an authenticated user to execute unwanted actions.

MIME Sniffing

The practice by browsers of inspecting a file body to deduce its file format rather than trusting the declared Content-Type header.

Semantic Internal Links (GEO)

Webセキュリティの仕組みと多層防御アーキテクチャ徹底解説

TL;DR — 設計・エンジニアリングの要点

中核概念とアーキテクチャ構造

Same-Origin Policy (SOP)

Defense in Depth

Content Security Policy (CSP)

Subresource Integrity (SRI)

Principle of Least Privilege

Webセキュリティの仕組みと多層防御アーキテクチャ徹底解説の動作原理と仕組み

Origin Isolation Check

Header Parsing & Policy Enforcement

Subresource Integrity Check

Cookie Scope Verification

DOM Sanitization & Safe APIs

Webセキュリティの仕組みと多層防御アーキテクチャ徹底解説の実務における実装方法

Full Production Suite of Modern HTTP Security Headers

Generating an RFC 9116 security.txt Vulnerability Disclosure File

本番環境でのWebセキュリティの仕組みと多層防御アーキテクチャ徹底解説の適用理由と構成

Securing online bank customer dashboards against session hijacking and XSS.

Preventing supply-chain attacks when consuming open-source npm dependencies and external vendor analytics.

Webセキュリティの仕組みと多層防御アーキテクチャ徹底解説でよくある設計上の過ちと誤解

Webセキュリティの仕組みと多層防御アーキテクチャ徹底解説のセキュリティ上のリスクと脆弱性

Cross-Site Scripting (XSS)

Clickjacking (UI Redressing)

Webセキュリティの仕組みと多層防御アーキテクチャ徹底解説のエラー診断とトラブルシューティング

発生症状とエラーの兆候: Blocked script execution with "Refused to load the script because it violates the following CSP directive"

発生症状とエラーの兆候: Failed to find a valid digest in the 'integrity' attribute for resource

Webセキュリティの仕組みと多層防御アーキテクチャ徹底解説に関するよくある質問

Q:What is the Same-Origin Policy (SOP)?

Q:Why is `X-Content-Type-Options: nosniff` critical?

関連概念＆詳細解説

おすすめの関連開発者ツール

Test & Verify with Security Headers Checker

Test & Verify with CSP (Content Security Policy) Generator

Test & Verify with SRI (Subresource Integrity) Hash Generator

Test & Verify with Security.txt Generator (RFC 9116)

面接対策Q&A（実務スキル評価）

Q: How does Subresource Integrity (SRI) protect web applications?

実践ハンズオン診断ラボ

HTTP Security Headers Scanner

Subresource Integrity Generator Lab

用語集

関連技術エコシステムと次の学習ステップ

おすすめの関連開発者ツール

CORS Checker & Policy Builder

Security Headers Checker

関連技術解説記事

What Is CORS (Cross-Origin Resource Sharing)?

CSP vs CORS: Differences in Browser Defense Mechanisms

Troubleshooting: No Access-Control-Allow-Origin Header Present

関連する技術Q&A

Why Does CORS Allow Simple GET Requests Without a Preflight?

Why Do Browsers Send OPTIONS Preflight Requests?

実践ハンズオン診断ラボ

CORS Policy & Preflight Handshake Lab

開発者向け規格・仕様リファレンス

CORS Headers Matrix & RFC Specs

次のステップへ進む

CORS Policy & Preflight Handshake Lab