Pourquoi les événements de clic contextuel de mon extension Chrome échouent-ils en raison d'une violation de la politique de sécurité du contenu ?-js tutoriel-php.cn

Pourquoi les événements de clic contextuel de mon extension Chrome échouent-ils en raison d'une violation de la politique de sécurité du contenu ?

Susan Sarandon

Libérer： 2024-11-25 03:37:12

original

161 Les gens l'ont consulté

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

Échec des événements de clic sur l'extension : résolution de la violation des règles de sécurité du contenu

Description de l'erreur

Dans une extension Chrome, cliquez sur les événements sur l'icône de l'extension et un bouton dans la page contextuelle ne génère pas la réponse attendue lors de l'incrémentation d'une variable JavaScript.

Inspection de la racine Cause

Pour déboguer le problème, inspectez la page contextuelle et examinez les journaux de la console. Le message d'erreur indique probablement une violation de la politique de sécurité du contenu (CSP) :

Refused to execute inline script because it violates the following Content Security Policy directive: "script-src 'self' chrome-extension-resource:".

Copier après la connexion

Conformité CSP compromise

Les scripts en ligne dans la page HTML violent le CSP par défaut. JavaScript en ligne n'est pas autorisé dans le cadre de cette politique.

Solution : isoler JavaScript

Pour résoudre le problème, éliminez tout le JavaScript en ligne du fichier HTML et placez-le dans un fichier JavaScript distinct.

Structure du code révisée

hello.html (Popup Page)

<!DOCTYPE html>
<html>
<head>
</head>
<body>
<p>

Copier après la connexion

popup.js

var a = 0;
function count() {
  a++;
  document.getElementById('demo').textContent = a;
}
document.getElementById('do-count').onclick = count;

Copier après la connexion

Notes

Remplacez innerHTML par textContent lors du changement de texte en atténuer les vulnérabilités XSS potentielles.
Cette solution garantit la conformité avec CSP, permettant une exécution correcte des scripts et cliquez sur la gestion des événements.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!