Policy)はアクセス、利用できるリソースを限定することで、XSS(クロスサイトスクリプティング)やデータインジェクションなど、クライアントサイドにおける脅威の影響を軽減できる仕組みです。この記事ではコンテンツセキュリティポリシーの基本と、その書き方を解説します。Monacaアプリにおけるコンテンツセキュリティポリシーコンテンツセキュリティポリシーは最初に読み込まれるファイルに記述します。このファイルを開くと、次のような記述があるのが分かるはずです。これがコンテンツセキュリティポリシーです。指定できるリソースの種類コンテンツセキュリティポリシーは利用するリソースの種類と、それを利用できるデータ元という形で記述します。上記の例で言えば、リソースの種類は次の2つになります。default-srcworker-src他に以下のようなリソースがあります。default-srcが指定されていることで、すべてのリソースに対してdefault-srcの条件が適用された上で、各リソースの条件に変更を加えられます。ServiceWorkerスクリプトの有効なソースを指定します。scriptタグchild-srciframeやframeタグ、そしてその中で読み込まれるworkerconnect-srcfetchやXMLHttpRequest、WebSocketなどJavaScriptを介して読み込まれる外部リソースfont-srcフォントform-actionフォーム送信frame-ancestorsframe/iframe/object/embed/appletframe-srciframe/framemanifest-srcmanifestobject-srcobject/embed/appletscript-src-attrHTML中のonclickなどscript-src-elemscriptstyle-srcstylestyle-src-attrHTML中のstyle要素style-src-elemstyle指定できるリソースコンテンツセキュリティポリシーは次のように記述します。リソースは複数種類指定できます(スペースで区切ります)。書いて、次のリソースを指定します。(リソース3);リソースの種類によって直接書けるものと、シングルクォートで囲む必要があるものがあります。書けるリソース直接指定できるリソースは下記があります。使ってワイルドカードにすることもできます。URL例.example.comhttps://.example.comhttps://api.example.com*(アスタリスク)スキームhttp:https:data:blob:content:gap:mediastream:filesystem:文字列で指定するリソース文字列で指定するリソースは次の通りです。シングルクォートで囲んでください。インラインでのscriptタグの許可none許可しない場合nonce-<base64-value>一時的に許可されるノンスを使って、さらにセキュアに実行対象を絞り込みます<hash-algorithm>-<base64-value>上記に似ていますが、さらにハッシュ化アルゴリズムを指定しますstrict-dynamicマークアップ内のスクリプトを明示的に信用するMonacaアプリのデフォルトコンテンツセキュリティポリシーを読み解くでは、最初に戻ってMonacaアプリに記述されているコンテンツセキュリティポリシーは、次のように記述されています。blob:">まず、すべてのリソースに対して次のように設定されています。Workerに対しては、次のように定義しています。他は必要があれば、開発者自身が追加可能です。まとめコンテンツセキュリティポリシーを適切に利用することで皆さんのアプリは安心、安全なものになります。img-srcやscript-srcはインシデントに繋がりやすいので、慎重に設定することをお勧めします。中津川篤司プログラマ、エンジニアとしていくつかの企業で働き、28歳のときに独立。2004年、まだ情報が少なかったオープンソースソフトの技術ブログ『MOONGIFT』を開設し、毎日情報を発信している。2013年に法人化、ビジネスとエンジニアを結ぶエバンジェリスト業「DevRel」活動をスタートした。CORSの制限を超えよう。(JavaScript基礎構文)iOS16から導入された「デベロッパモード」についてhtmx:JavaScriptなしでサーバーとの通信を実現する見やすい、メンテナンスしやすいJavaScriptのために。