20260307_気ままに勉強会_CSP 3カウント取られた話

CSP 3カウント取られた話 Code Apps × CSP という見えない壁 dai365 Microsoft MVP 奇想天外ビリビリ☆Power Apps同好会 1 / 21

dai365 https://powerdaaps.hatenablog.com/ 略歴 平成7年就職→非IT従事／現在はデジタル推進 得意 Power Apps / 生成AI https://biribiri.connpass.com/ 好き 登山・競馬・お酒・プロレス・PC SNS X: @dai_keiba_73 Pow er Apps Code Apps Agri DX

• https://powerdaaps.hatenablog.com/
• https://biribiri.connpass.com/

「バイブコーディング」とは Vibe Coding = 完璧な仕様書を書かず、感覚（Vibe）でAIに伝えて、対話しながら作り上げる開発スタイル。 コードを1行も書かない。コマンドも1つも打たない。でもアプリができる。 ■ 実践の記録（ブログから） Vol.27 最新記事 スキーマ抽出 → Claude CodeがYAML生成 → Studio貼付 Azure Functions + Claude API + pac CLI コード手書き 0行で業務アプリが完成 GUI操作なしでカスタムコネクタ完成 ★ Vol.25（16h）→ Vol.27（約2h）へ進化 ★ AIが方針転換まで提案してくれた Access→Power Apps“工場”を作ったら、約2時間でア プリが出荷された カスタムコネクタ嫌いの私が、Claude Codeで全工程CLI だけで作れて震えた話 ブログ「dai365のお部屋」でバイブコーディングシリーズ Vol.1～27 連載中！ powerdaaps.hatenablog.com 2 / 21

Code Apps ってなに？ Power Apps Code Apps = VS Code + モダンフレームワーク（React / Vue 等）で Power Platform 上のアプリを自由に開発できる、プロコード向け環境。 ■ Power Apps の4つの開発アプローチ 01 02 03 04 ノーコード ローコード Vibeコード プロコード App Builder Agent Power Apps Studio Gen Pages / Vibe Code Apps (VS Code) 自然言語で ドラッグ&ドロップ AI × コード生成 フルコーディング アプリを自動生成 + Power Fx ← 今日の主役 開発者スキル → キャンバスアプリとの違い キャンバス: Studioの中でMSが用意したコントロールを使う → 安全だが自由度に制限あり Code Apps: VS Codeで何でも使える（CDN, Worker, blob…） → 自由だがその分セキュリティが厳しい → この「自由だが厳しい」が今日の話のポイント（CSP） 3 / 22

昨年8月からノリノリでCode Appsを作っている話 入院→退院→禁断症状で生成AI→Code Apps発見→そこから止まらない 8 月 9 月 10 月 12 月 1 月 はじめての Code Apps オセロ 10分クッキング 相撲ゲーム Claude課金 パチンコSim Remotion 動画アプリ 入院→禁断症状で発見 Codex agentがすごい KIMARITE!開発 綱取物語をCode Appsへ 麻雀アプリも ブログ「dai365のお部屋」でバイブコーディングシリーズ Vol.1～27 連載中！ Vol.24 VideoHub（今日の主役） 4TBのプロレス動画を YouTube / Netflix風UI で見たい！ → Video.js + FFmpeg.wasm + Google Fonts でフルAI開発 → Code Appsにデプロイ → 当初は動いてた→急に動かない。なぜ…？ 3 / 21

VideoHub ― 何を作ったか 4TBのプロレス動画を YouTube / Netflix飾UIで見たい Video.js 8.10.0 CDN読込 FFmpeg.was m 0.12.7 Web Worker Google Fonts 外部フォント URL.createObjectURL() blob: URL 正式版の前：Code Appsに公開 → 問題なく動いていた 4 / 21

正式版（GA）になったら壊れた GA前 GA後 動画再生OK / サムネイルOK 「動画がありません」 フォントOK / FFmpeg.wasmOK フォント拒否 / Worker起動不可 F12 Console Refused to load media from 'blob:https://...' → media-src 'self' data: ← blob: がない Refused to load font 'https://fonts.googleapis.com/...' → font-src 'self' ← 外部ドメイン不可 5 / 21

そもそも CSP って何？ Content Security Policy = ブラウザに「このアプリが読み込んでいいもの」を伝えるルール script-src media-src font-src worker-src ... どのスクリプトを どの動画・音声を フォント、Worker、 実行していいか 読み込んでいいか スタイル等も個別に制御 つまり、アプリの「持ち物検査」 「このアプリは自分のサーバーのスクリプトだけ実行OK。外部CDNはダメ」 「このアプリはblob:も読み込みOK。でもWorkerは一切禁止」 …ということをHTTPヘッダーでブラウザに指示する仕組み。 ルールに引っかかると→ブラウザが即ブロック。エラーも出ない。ただ動かない。 7 / 26

CSPはなぜ必要か 悪意あるコードの注入（XSS攻撃）を防ぐ仕組み 実例：British Airways事件（2018年） 攻撃者がWebサイトに22行の不正JavaScriptを注入 約38万件のクレジットカード情報が流出 罰金 £2,000万（約37億円） CSPで外部プログラムの読み込みをブロックしていれば防げた Code Appsは業務データ（Dataverse）を扱うプラットフォーム 正式版（GA）＝本番で使う前提 → セキュリティ強化は当然 6 / 21

なぜCode Appsだけ厳しいのか キャンバスアプリ Code Apps 作る場所 Power Apps Studioの中 VSCode等の外で自由に 使える技 MSが用意したコントロール 何でも使える（CDN, Worker, blob…） CSP *（なんでもOK＝ゆるい） 'self' / 'none' （厳格） キャンバスアプリ Code Apps 作る場所 道場の中（Studio） 外の団体（VSCode等） 使える技 師範が用意した技だけ 持ち込み自由 レフェリー ゆるゆる（何でもOK） 厳格（同一オリジンのみ） プロレスで例えると… 7 / 21

CSPの仕組み ― プロレスで理解する CSPの概念 プロレスで言うと CSPヘッダー レフェリー ディレクティブ 試合ルール（場外カウント等） 'self' リング上の技だけOK blob: 場外フライングもOK CSP違反 反則負け（即5カウント） 正式版の前はレフェリー不在 → 正式版でCSPが適用 → 厳格なレフェリーが来た 8 / 21

何がどのルールに引っかかったか 技術スタック ディレクティブ デフォルト値 結果 URL.createObjectURL() media-src 'self' data: blob:未許可 Video.js（CDN） script-src 'self' <platform> 外部CDN不可 Google Fonts CSS style-src 'self' 'unsafe-inline' 外部CSS不可 Google Fonts ファイル font-src 'self' 外部フォント不可 FFmpeg.wasm worker-src 'none' Worker全面禁止 5 / 5 全滅 9 / 21

Claudeに聞く ― 市民開発者の戦い方 CSP？知らん。でもAIに正しい資料を渡せば答えが返ってくる。 1 公式Learn（CSPページ）のURLをClaudeに貼る 2 「このアプリで何がCSPに引っかかる？」と聞く 3 5つの違反箇所と修正方法が返ってくる 4 コード修正もそのままバイブコーディング AI × 公式ドキュメント × 自分のコード = バイブコーディングの真骨頂 10 / 21

CSP対処まとめ ― 何を除去し、何を修正したか CSP違反箇所（スライド9） 対処方法 状態 Video.js CDN (script-src / style-src) npm install でバンドル化 OK Google Fonts CSS (style-src / font-src) 外部参照を除去 OK FFmpeg.wasm Worker (worker-src 'none') 機能ごと完全削除 OK blob: URL (media-src 'self' data:) 管理センターで設定 （コード変更不可） inline event handler (script-src) React化で排除 COOP / COEP ヘッダー （FFmpeg.wasm 用の残骸） 要設定 OK 残課題 blob: はコードで回避できない → 管理センターでの環境設定が必須 CSP設定は環境全体に影響する → 先に管理者に確認しよう 11 / 21

管理センターでCSPを設定 管理センター → 環境 → 設定 → プライバシー + セキュリティ → CSP 最大のトラップ：タブが3つある アプリ (モデル駆動型) アプリ (キャンバス) アプリ ← Code Appsはこれ！ media-src の「既定を使用する」をオフ → ‘self’ data: blob: を追加 → 保存 12 / 21

ハマリポイント 1 2 3 4 タブ間違い 「アプリ (キャンバス)」ではなく「アプリ」 反映に数分かかる 保存直後はまだ反映されていない ブラウザキャッシュ シークレットウィンドウで確認する 環境の取り違え デプロイ先とCSP設定先が一致しているか 13 / 21

VideoHub 復活！ 3カウントからの逆転フォール BEFORE AFTER ✘ Refused to load media CDN→npmバンドル化 ✘ Refused to load font → 外部フォント除去 ✘ Refused to load script blob:を管理センターで許可 5/5 全滅 動画再生OK！ CSPを知らなくても、AIに公式ドキュメントを渡せば解決できた この「AI × 公式ドキュメント × 自分のコード」のパターンは、CSP以外にも応用できる→事例へ 16 / 26

2026年2月 ― AIモデル激戦期、市民開発者にとっての追い風 わずか19日間で8つ以上の大型モデルがリリース。「AIに質問する」時代から「AIが仕事を完遂する」時代へ Gemini 3.1 Pro 2/19 Claude Opus / Sonnet 4.6 2/5, GPT-5.3 Codex 2/5 16ベンチマーク中13で首位 ターミナル操作特化 1Mトークンコンテキスト 2/17 コード生成・ドキュメント理解に強い Grok 4.20 2/17 Qwen 3.5 2月 DeepSeek V4 3月初旬 4エージェント並列処理 397Bパラメータ / オープンソース 1兆パラメータ規模 独自アーキテクチャ 中国勢の台頭 (Alibaba) R1以来の大型リリース ← 今日の事例はこれ エージェント基盤 Frontier 大事なのは「どのAIか」ではない 選択肢は爆発的に増えている。どれを使ってもいい。 大事なのは「AIに公式ドキュメント ＋ 自分のコードを渡す」というパターン。 今日の事例では私が使い慣れた Claude で紹介します。 14 / 23

そもそも Claude / Claude Code って何？ Claude（ブラウザ版） Claude Code（VSCode拡張） VSCode上で動くAIエージェント claude.ai チャットで指示するだけで… ブラウザで誰でも使える 計画を立てる ファイルを添付して会話するだけ コマンドを実行する Excel / PPT / PDFを生成できる コードを書く Proプラン or 無料枚で利用可 エラーを自分で対処する 壁にぶつかれば代替案を提案 → 今日の事例①②はこれでやった → 今日の事例③はこれでやった Anthropic社（米国）が開発 | 開発者だけのツールではない | CSPの問題解決もこれで逆転した 14 / 21

「聞く」から「一緒に作る」へ 従来のAI活用 Claude / Claude Code 要件を伝える ドキュメントをコピペ AIが計画を立てる 「これ何が問題？」と質問 AIが実行する 回答を読んで自分で対処 エラーが出たら自分で対処 壁 → 代替案を提案 = 「便利な辞書」 = 「自律的なセコンド」 ★ コードを1行も書いていない。コマンドも1つも打っていない。 ★ でも判断するのは自分 ← ここが大事 15 / 21

事例① 農作物PDF → Excel＆パワポ 一気通貫 vibe documenting ― 資料もバイブで作る時代 【入力】 農政部「農作物生育状況」 PDF × 11回分 ＋ 一言：「たまねぎの生育状況を 表にまとめてグラフにして」 【出力】 約10分 Reactダッシュボード Excel（8シート・グラフ付き） PowerPoint（8スライド） 自動QAチェック済み PDFからの数値抽出が正確 ― 11回分のデータを一瞬で表に整理 農業的な文脈を理解 ― 「好天により収穫は平年より早く進行」と自動コメント Excel→PPTまで一気通貫 ― 途中のファイル受け渡しが要らない ツール：claude.ai（ブラウザ版） 16 / 21

事例② 配布3点セット → 導入マニュアル自動生成 【入力】Power Apps「配布3点セット」 【出力】全10スライドPPT msapp（アプリ本体） 数分 全体像図解 フローzip（Power Automate定義） ステップ別手順書 リスト定義txt（Site Script JSON） 列情報表（JSONから抽出） FAQ・トラブルシューティング ＋ 一言：「初学者にもわかりやすく 説明する資料を作成して」 ファイル同士のつながりを自動で理解 → 正しい順番で手順を構成してくれた JSONから列名・型・数式を抽出して表にまとめた（手作業なら30分の作業） 「内部名を変えるとアプリとの連携が壊れる」など注意書きまで自動生成 ツール：claude.ai（ブラウザ版） 一番面倒な「説明書作り」をAIがやってくれた 17 / 21

事例③ Access → Power Apps 約2時間移行 【元Access】精算業務システム 【手法】Claude Code（VSCode） T:4+2 / Q:12 / F:8 / R:8 / M:12 Access → 表の設計図だけ取り出す（実データは渡さない） 立派な「業務システム」 → Claude CodeがYAML生成 → Power Apps Studio貼付 Vol.25（前回） Vol.27（今回） 元Access 受注管理（100超オブジェクト） 精算業務（T:4+2, Q:12） 画面数 24画面 6画面 所要時間 16時間 約2時間 コード手書き 0行 0行 実データはAIに渡さない＝セキュリティ確保 ツール：Claude Code（VSCode） 18 / 21

まとめ CSPは敵じゃない。アプリとデータを守る盾。 Code Appsは自由な分、CSPが厳格。キャンバスアプリとは前提が違う。 GA前に動いていたCode AppsアプリはCSP適用で壊れる可能性がある。 AIに公式ドキュメント＋自分のコードを渡す＝ 市民開発者の最強の武器。 Claudeは「聞く」だけじゃない。 PDF→Excel、マニュアル生成、Access移行――一緒に作る時代になった。 19 / 21

もっと詳しく知りたい方へ ブログ ポートフォリオ yarebawakarusa.com dai365のお部屋 powerdaaps.hatenablog.com バイブコーディング記事 27本公開中！ ※ このサイトも Claude Codeで作って Azureポータル0回で デプロイしました コミュニティ 奇想天外ビリビリ☆ Power Apps同好会 biribiri.connpass.com 次回イベント３月２１日 今日紹介した3つの事例も、ブログで詳しく書いています。ぜひ読んでみてください！ 20 / 21

やればわかるさ！ CSPに3カウント取られても、 そこから逆転できる。 dai365 | @PowerDaaps | dai365のお部屋 奇想天外ビリビリ☆Power Apps同好会 21 / 21