web-dev-qa-db-fra.com

Chrome - Politique de sécurité du contenu - exécution de code en ligne

J'utilise une bibliothèque JavaScript externe dans mon chrome. J'ai une exécution en ligne, donc j'obtiens le type d'erreur suivant

(L'erreur que j'obtiens sur la console)

Refus d'exécuter l'URL JavaScript car il enfreint la directive de politique de sécurité du contenu suivante: "script-src 'self' chrome-extension: //". Le mot clé "unsafe-inline", un hachage ("sha256 -...") ou un nonce ("nonce -...") est requis pour activer l'exécution en ligne.

Le message d'erreur indique clairement qu'une solution de contournement est possible.

Politique de sécurité du contenu Chrome dit impossible. De nombreuses questions connexes ont cité ce lien.

Blog Ce blogueur dit que c'est possible, mais cela ne s'applique probablement qu'aux anciennes chrome.

Des contournements possibles?

PS: je ne veux pas/ne peux pas changer la bibliothèque entière que j'utilise.

EDIT: comment utiliser le hachage ou le nonce pour activer l'exécution en ligne.

google-chromegoogle-chrome-extensioncontent-security-policy
20
Amit G

Non, il n'est pas possible d'assouplir cette politique.unsafe-inline est spécifiquement ignoré par Chrome Extensions depuis la version manifeste 2.

Documentation (c'est moi qui souligne):

Il n'existe aucun mécanisme pour assouplir la restriction à l'exécution de JavaScript en ligne. En particulier , la définition d'une politique de script incluant 'unsafe-inline' n'aura aucun effet.

Le message d'erreur mentionne plusieurs façons possibles, mais les documents sont clairs qu'aucun CSP n'autorisera les scripts en ligne et ignorera unsafe-inline n'est qu'une des mesures.

Mettre à jour

À partir de Chrome 46, les scripts en ligne peuvent être ajoutés à la liste blanche en spécifiant le hachage codé en base64 du code source dans la politique. Ce hachage doit être préfixé par l'algorithme de hachage utilisé (sha256, sha384 ou sha512 Voir Exemple d'utilisation de Hash pour les éléments.

Voir cette réponse pour un examen plus approfondi de la liste blanche.

17
Xan

Copié de ma réponse à une question similaire ici . Pour les versions récentes de Chrome (46+), la réponse actuelle n'est plus vraie. unsafe-inline N'a toujours aucun effet (dans le manifeste et dans l'en-tête meta ), mais selon la documentation , vous pouvez utiliser la technique décrite ici pour assouplir la restriction.

Utilisation du hachage pour les éléments <script>

La directive script-src Permet aux développeurs de mettre en liste blanche un script en ligne particulier en spécifiant son hachage comme source autorisée de script.

L'utilisation est simple. Le serveur calcule le hachage du contenu d'un bloc de script particulier et inclut l'encodage base64 de cette valeur dans l'en-tête Content-Security-Policy:

Content-Security-Policy: default-src 'self';
                     script-src 'self' https://example.com 'sha256-base64 encoded hash'

À titre d'exemple, considérons:

manifest.json :

{
  "manifest_version": 2,
  "name": "csp test",
  "version": "1.0.0",
  "minimum_chrome_version": "46",
  "content_security_policy": "script-src 'self' 'sha256-WOdSzz11/3cpqOdrm89LBL2UPwEU9EhbDtMy2OciEhs='",
  "background": {
    "page": "background.html"
  }
}

background.html :

<!DOCTYPE html>
<html>
  <head></head>
  <body>
    <script>alert('foo');</script>
  </body>
</html>

Résultat :
alert dialog from inline script

J'ai également testé la mise de la directive applicable dans une balise meta au lieu du manifeste. Alors que le CSP indiqué dans le message de la console incluait le contenu de la balise, il n'exécuterait pas le script en ligne (dans Chrome 53).

nouveau background.html :

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Security-Policy" content="script-src 'self' 'sha256-WOdSzz11/3cpqOdrm89LBL2UPwEU9EhbDtMy2OciEhs='">
  </head>
  <body>
    <script>alert('foo');</script>
  </body>
</html>

Résultat :
console error messages about content security policy

11
Chris Hunt

J'ai ce problème après avoir ajouté un simple case à cocher sur la page de connexion pour basculer la visibilité du mot de passe et voici comment j'ai résolu mon problème, j'espère que cela aide;

  • J'ai cessé d'utiliser l'événement onclick de ma case à cocher, ce qui provoquait ce problème en mode navigation privée de chrome et a plutôt donné un identifiant à ma case à cocher.

Avant 

<div class="form__row">
        <div class="form__controls">
            <label class="checkbox"><input type="checkbox" onclick="togglePasswordVisibility()"> Show password</label>
        </div>
    </div>

Après 

<div class="form__row">
        <div class="form__controls">
            <label class="checkbox"><input type="checkbox" id="checkboxTogglePasswordVisibility"> Show password</label>
        </div>
    </div>
  • J'ai créé un fichier Script.js et y ai ajouté une méthode d'écoute d'événements pour gérer l'événement onclick de ma case à cocher pour faire le travail.

N'oubliez pas de référencer votre fichier js, si vous ne l'avez pas encore fait. Vous pouvez simplement le référencer comme ceci.

<script src="../Scripts/Script.js"></script>

Et voici l'écouteur d'événements que j'ai ajouté dans mon Script.js.

$(document).ready(function () {
    addEventListenerForCheckboxTogglePasswordVisibility()
});

function addEventListenerForCheckboxTogglePasswordVisibility() {
    var checkbox = document.getElementById("checkboxTogglePasswordVisibility");
    if (checkbox !== null) {
        checkbox.addEventListener('click', togglePasswordVisibility);
    }
}

function togglePasswordVisibility() {
    var passwordElement = document.getElementById("password");
    if (passwordElement.type === "password") {
        passwordElement.type = "text";
    } else {
        passwordElement.type = "password";
    }
}

Erreur avant le correctif;

enter image description here

1
Nurhak Kaya