Je viens de tester la technique de passage en JSON des variables attendues par un script JS ce matin — j’en parlais dans un de mes derniers billets — et ça fonctionne plutôt pas mal.
Donc maintenant on pourrait, au lieu de définir des variables javascript de façon inline dans le <head> (ou ailleurs d’ailleurs), fournir une liste de variables dans un objet JSON qui sera parsé ensuite côté javascript.
Exemple (avec le plugin hScroll que j’ai modifié à dessein) :
<script type="application/json" id="hscroll-data">
{"color":"#e9573f","top":"0px","bottom":"unset","shadow":"0"}
</script>Qui est inséré dans le <head> via la fonction utilitaire suivante, à laquelle on fournit un identifiant, hscroll dans ce cas et un tableau de paires clé/valeur à insérer :
public static function jsJson($id, $vars)
{
$ret = '<script type="application/json" id="' . \html::escapeHTML($id) . '-data">' . "\n" .
json_encode($vars, JSON_HEX_TAG | JSON_UNESCAPED_SLASHES) . "\n" . '</script>';
return $ret;
}Ensuite, côté javascript, il suffit de parser l’objet JSON avec la fonction suivante, à laquelle on fournit l’identifiant désiré :
const getData = function(id) {
// Read the JSON-formatted data from the DOM. (from https://mathiasbynens.be/notes/json-dom-csp)
const element = document.getElementById(`${id}-data`);
const string = element.textContent;
const data = JSON.parse(string);
// Clear the element’s contents now that we have a copy of the data.
element.innerHTML = '';
return data;
};
const hscroll_data = getData('hscroll');J’avoue que j’aime assez cette façon de faire, pas très éloignée de la précédente et qui, de plus, regroupe toutes les variables dans un seul objet côté javascript. C’est également transparent du point de vue accessibilité, et faire les modifications idoines côté code PHP/Js est assez trivial.
Du coup on peut supprimer l’attribut unsafe-inline de la directive script-src, c’est toujours ça de pris pour la sécurité !
Une autre façon de faire est de passer par le système de « nonce », mais je trouve ça super lourd et encombrant à gérer ; les directives CSP doivent être dans l’entête et on a assez souvent les variables à la fin du DOM, juste avant le </body>, ce qui complique un peu le boulot.
Je pense que je vais inclure les fonctions utilitaires pour la prochaine 2.15 de Dotclear…
1 De Da Scritch -
Pourquoi ne pas plutôt faire une API qui réponde les paramètres en JSON pour ce blog, puis les stocker en localStorage ?
m’enfin, jdçjdr
2 De Franck -
Et faire une requête de plus ? C’est quoi l’avantage sinon ?
3 De Nicolas -
Super technique. Ce n’est pas que l’aspect CSP qui est intéressant. Devoir générer un énorme tas de variables (traductions, paramètres,…) est juste pénible.