検索
ホームページウェブフロントエンドH5 チュートリアルHTML5 のコンテンツ セキュリティ ポリシー (CSP)

前書き:

Cordova不支持内联事件,所以点击事件必须提取到js里面.
以下是从官网摘抄下来,希望对您有所帮助

多くの潜在的なクロスサイト スクリプティングの問題を軽減するために、Chrome の拡張機能システムにはコンテンツ セキュリティ ポリシー (CSP) の一般的な概念が組み込まれています。 これにより、デフォルトで拡張機能の安全性が高まり、拡張機能やアプリケーションによってロードおよび実行できるコンテンツの種類を管理するルールを作成および強制できるようにする、いくつかのかなり厳格なポリシーが導入されています。

一般的に言えば、CSP は、拡張プログラムがロードまたは実行するリソースのハッキング/ホワイトリスト メカニズムとして機能します。 拡張機能に賢明なポリシーを定義することで、拡張機能が必要とするリソースを慎重に検討し、拡張機能がアクセスできるリソースがこれらのみであることをブラウザーに確認することができます。 これらのポリシーは、拡張機能によって要求されたホスト権限を超えたセキュリティを提供します。これらは追加の保護層であり、置き換えるものではありません。

ウェブでは、そのようなポリシーは HTTP ヘッダーまたは要素を通じて定義されます。 どちらも Chrome の拡張システムには適切なメカニズムではありません。 代わりに、拡張機能のポリシーは、次のように拡張機能の manifest.json ファイルによって定義されます:

{ 
   … 
   “content_security_policy”:“[POLICY STRING GOES HERE]” 
   …
}

CSP 構文の詳細については、コンテンツ セキュリティ ポリシーの仕様と、HTML5 Rocks の記事「コンテンツ セキュリティ ポリシーの概要」を参照してください。

デフォルトのポリシー制限

manifest_version パッケージが定義されていません デフォルトのコンテンツ セキュリティ ポリシーはありません。 マニフェスト バージョン 2 を選択したものには、デフォルトのコンテンツ セキュリティ ポリシーが適用されます:

script-src'self'; object-src'self'

このポリシーは、次の 3 つの方法で拡張機能とアプリケーションを制限することでセキュリティを強化します:

(1) 評価および関連機能は無効になります

次のコードは機能しません:

alert(eval("foo.bar.baz"));

window.setTimeout(“alert(’hi’)”,10); 
 window.setInterval(“alert(’hi’)”,10); 
 new Function(“return foo.bar.baz”);

このような JavaScript 文字列の評価 は、一般的な XSS 攻撃ベクトルです。 代わりに、次のようなコードを記述する必要があります:

alert(foo && foo.bar && foo.bar.baz); 
window.setTimeout(function(){alert(’hi’);},10); 
window.setInterval(function(){alert(’hi’);},10); 
function(){return foo && foo.bar && foo.bar.baz};

(2) インライン JavaScript は実行されません

インライン JavaScript は実行されません。 この制限により、インライン ブロックとインライン イベント ハンドラー プログラム (例: ) が禁止されます。

最初の制限は、悪意のあるサードパーティが提供するスクリプトを誤って実行することを防ぐことで、多数のクロスサイト スクリプティング攻撃を排除します。 ただし、コードの記述内容とコードの実行内容を明確に分離する必要があります (これは必ず行うべきです) ですよね? 例を挙げると、これがより明確になるかもしれません。 次の内容を含む単一の Popup.html としてブラウザー アクション ポップアップを作成してみるとよいでしょう:

<!doctype html> 
      My Awesome Popup! 
       function awesome(){ 
         //做某事真棒! 
       }
   function totalAwesome(){
     //做某事真棒!
   }
  函数clickHandler(element){
     setTimeout( “awesome();getherAwesome()” ,1000);
   }
   function main(){
     //初始化工作在这里。
   }
 </ SCRIPT>

すばらしい点をクリックしてください!


デフォルトポリシーの緩和

(1) インラインスクリプト

Chrome 45 までは、インライン JavaScript の実行に関する制限を緩和するメカニズムはありませんでした。 特に、「unsafe-inline」を含むスクリプト ポリシーを設定しても効果はありません。

Chrome 46 以降では、ポリシーでソース コードの Base64 エンコードされたハッシュを指定することで、インライン スクリプトをホワイトリストに登録できるようになりました。 ハッシュには、使用するハッシュ アルゴリズム (sha256、sha384、または sha512) をプレフィックスとして付ける必要があります。

例について

以上がHTML5 のコンテンツ セキュリティ ポリシー (CSP)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
H5コードの分解:タグ、要素、属性H5コードの分解:タグ、要素、属性Apr 18, 2025 am 12:06 AM

HTML5コードは、タグ、要素、属性で構成されています。1。タグはコンテンツタイプを定義し、などの角度ブラケットに囲まれています。 2。要素は、startタグ、内容、および内容などのエンドタグで構成されています。 3。属性は、開始タグのキー値のペアを定義し、ような関数を強化します。これらは、Web構造を構築するための基本ユニットです。

H5コードの理解:HTML5の基礎H5コードの理解:HTML5の基礎Apr 17, 2025 am 12:08 AM

HTML5は、最新のWebページを構築するための重要なテクノロジーであり、多くの新しい要素と機能を提供します。 1。HTML5は、Webページの構造とSEOを強化するなどのセマンティック要素を導入します。 2。プラグインなしのマルチメディア要素と埋め込みメディアをサポートします。 3.フォームは、新しい入力タイプと検証プロパティを強化し、検証プロセスを簡素化します。 4.オフラインおよびローカルストレージ機能を提供して、Webページのパフォーマンスとユーザーエクスペリエンスを向上させます。

H5コード:Web開発者向けのベストプラクティスH5コード:Web開発者向けのベストプラクティスApr 16, 2025 am 12:14 AM

H5コードのベストプラクティスには以下が含まれます。1。正しいDoctype宣言と文字エンコーディングを使用します。 2。セマンティックタグを使用します。 3。HTTPリクエストを削減します。 4.非同期負荷を使用します。 5。画像を最適化します。これらのプラクティスは、Webページの効率、保守性、ユーザーエクスペリエンスを向上させることができます。

H5:Web標準とテクノロジーの進化H5:Web標準とテクノロジーの進化Apr 15, 2025 am 12:12 AM

Web標準とテクノロジーは、これまでにHTML4、CSS2、および単純なJavaScriptから進化し、重要な開発を受けてきました。 1)HTML5は、CanvasやWebstorageなどのAPIを導入し、Webアプリケーションの複雑さと互換性を高めます。 2)CSS3はアニメーション関数とトランジション関数を追加して、ページをより効果的にします。 3)JavaScriptは、矢印関数やクラスなど、node.jsおよびES6の最新の構文を通じて開発効率とコードの読みやすさを向上させます。これらの変更により、パフォーマンスの最適化とWebアプリケーションのベストプラクティスの開発が促進されました。

H5はHTML5の速記ですか?詳細の調査H5はHTML5の速記ですか?詳細の調査Apr 14, 2025 am 12:05 AM

H5はHTML5の略語だけでなく、より広い最新のWeb開発テクノロジーエコシステムを表しています。1。H5にはHTML5、CSS3、JavaScript、および関連するAPIおよびテクノロジーが含まれます。 2.より豊かでインタラクティブでスムーズなユーザーエクスペリエンスを提供し、複数のデバイスでシームレスに実行できます。 3. H5テクノロジースタックを使用して、レスポンシブWebページと複雑なインタラクティブ機能を作成できます。

H5およびHTML5:Web開発で一般的に使用される用語H5およびHTML5:Web開発で一般的に使用される用語Apr 13, 2025 am 12:01 AM

H5とHTML5は、同じこと、つまりHTML5を参照します。 HTML5はHTMLの5番目のバージョンであり、セマンティックタグ、マルチメディアサポート、キャンバスとグラフィックス、オフラインストレージ、ローカルストレージなどの新しい機能をもたらし、Webページの表現力と互換性を向上させます。

H5は何を参照していますか?コンテキストの探索H5は何を参照していますか?コンテキストの探索Apr 12, 2025 am 12:03 AM

H5ReferStoHtml5、apivotaltechnologyinwebdevelopment.1)html5introduceSnewelementsandapisforrich、dynamicwebapplications.2)Itupp ortsmultimediawithoutplugins、endancingurexperiencecrossdevices.3)semanticelementsimprovecontentstructurendseo.4)H5'srespo

H5:ツール、フレームワーク、およびベストプラクティスH5:ツール、フレームワーク、およびベストプラクティスApr 11, 2025 am 12:11 AM

H5開発で習得する必要があるツールとフレームワークには、Vue.JS、React、Webpackが含まれます。 1.Vue.jsは、ユーザーインターフェイスの構築に適しており、コンポーネント開発をサポートします。 2.複雑なアプリケーションに適した仮想DOMを介したページレンダリングを最適化します。 3.Webpackは、モジュールのパッケージングに使用され、リソースの読み込みを最適化します。

See all articles

ホットAIツール

Undresser.AI Undress

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

Undress AI Tool

脱衣画像を無料で

Clothoff.io

Clothoff.io

AI衣類リムーバー

AI Hentai Generator

AI Hentai Generator

AIヘンタイを無料で生成します。

ホットツール

PhpStorm Mac バージョン

PhpStorm Mac バージョン

最新(2018.2.1)のプロフェッショナル向けPHP統合開発ツール

SAP NetWeaver Server Adapter for Eclipse

SAP NetWeaver Server Adapter for Eclipse

Eclipse を SAP NetWeaver アプリケーション サーバーと統合します。

SublimeText3 英語版

SublimeText3 英語版

推奨: Win バージョン、コードプロンプトをサポート!

AtomエディタMac版ダウンロード

AtomエディタMac版ダウンロード

最も人気のあるオープンソースエディター

Dreamweaver Mac版

Dreamweaver Mac版

ビジュアル Web 開発ツール