ホームページ > ウェブフロントエンド > jsチュートリアル > コンテンツ セキュリティ ポリシー違反により、Chrome 拡張機能のポップアップ クリック イベントが失敗するのはなぜですか?

コンテンツ セキュリティ ポリシー違反により、Chrome 拡張機能のポップアップ クリック イベントが失敗するのはなぜですか?

Susan Sarandon
リリース: 2024-11-25 03:37:12
オリジナル
163 人が閲覧しました

Why Are My Chrome Extension Popup Click Events Failing Due to a Content Security Policy Violation?

拡張機能のポップアップ クリック イベントの失敗: コンテンツ セキュリティ ポリシー違反の解決

エラーの説明

Chrome 拡張機能で、拡張機能アイコンと拡張機能の両方のクリック イベントポップアップ ページ内のボタンが、JavaScript 変数をインクリメントするという予期された応答を生成していません。

検査中根本原因

問題をデバッグするには、ポップアップ ページを調べてコンソール ログを調べます。このエラー メッセージは、コンテンツ セキュリティ ポリシー (CSP) 違反を示している可能性があります:

Refused to execute inline script because it violates the following Content Security Policy directive: "script-src 'self' chrome-extension-resource:".
ログイン後にコピー

侵害された CSP コンプライアンス

HTML ページ内のインライン スクリプトはデフォルトの CSP に違反しています。このポリシーでは、インライン JavaScript は許可されていません。

解決策: JavaScript の分離

問題を解決するには、HTML ファイルからすべてのインライン JavaScript を削除し、別の JavaScript ファイルに配置します。

改訂されたコード構造

hello.html (ポップアップ)ページ)

<!DOCTYPE html>
<html>
<head>
</head>
<body>
<p>
ログイン後にコピー

popup.js

var a = 0;
function count() {
  a++;
  document.getElementById('demo').textContent = a;
}
document.getElementById('do-count').onclick = count;
ログイン後にコピー

メモ

  • テキストを変更する場合は、innerHTML を textContent に置き換えます。潜在的な XSS 脆弱性を軽減します。
  • このソリューションCSP への準拠を保証し、適切なスクリプトの実行とクリック イベントの処理を可能にします。

以上がコンテンツ セキュリティ ポリシー違反により、Chrome 拡張機能のポップアップ クリック イベントが失敗するのはなぜですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート