nonce does not get passed to every script and style element #26
Description
Running with the nonce option and appropriate CSP headers set, I am still seeing some blocking happening because the nonce is not used for every <script> and <style> created by Hotjar.
Here is the offending Hotjar code I'm seeing where a script element is created and appended without setting the nonce value:
(function r(e, t = !1) {
const o = "6.0";
let i = {};
function s(e) {
if (!e.__vdevtools__injected)
try {
e.__vdevtools__injected = !0;
const t = () => {
try {
e.contentWindow.__VUE_DEVTOOLS_IFRAME__ = e;
const t = e.contentDocument.createElement("script");
(t.textContent = ";(" + r.toString() + ")(window, true)"),
e.contentDocument.documentElement.appendChild(t),
t.parentNode.removeChild(t);
} catch (t) {}
};
t(), e.addEventListener("load", () => t());
} catch (t) {}
}
let a = 0;
// ...
})(window);Here is the offending Hotjar code I'm seeing where a style element is created without a nonce value. Follow along to see that Ar is passing the nonce to Ln, which is setting the attribute correctly, but the nonce is never passed to Ar when defining Hr.
Ln = (function () {
function e(e) {
var t = this;
(this._insertTag = function (e) {
var n;
(n =
0 === t.tags.length
? t.prepend
? t.container.firstChild
: t.before
: t.tags[t.tags.length - 1].nextSibling),
t.container.insertBefore(e, n),
t.tags.push(e);
}),
(this.isSpeedy = void 0 === e.speedy || e.speedy),
(this.tags = []),
(this.ctr = 0),
(this.nonce = e.nonce),
(this.key = e.key),
(this.container = e.container),
(this.prepend = e.prepend),
(this.before = null);
}
var t = e.prototype;
return (
(t.hydrate = function (e) {
e.forEach(this._insertTag);
}),
(t.insert = function (e) {
this.ctr % (this.isSpeedy ? 65e3 : 1) == 0 &&
this._insertTag(
(function (e) {
var t = document.createElement("style");
return (
t.setAttribute("data-emotion", e.key),
void 0 !== e.nonce && t.setAttribute("nonce", e.nonce),
t.appendChild(document.createTextNode("")),
t.setAttribute("data-s", ""),
t
);
})(this),
);
var t = this.tags[this.tags.length - 1];
if (this.isSpeedy) {
var n = (function (e) {
if (e.sheet) return e.sheet;
for (var t = 0; t < document.styleSheets.length; t++)
if (document.styleSheets[t].ownerNode === e)
return document.styleSheets[t];
})(t);
try {
n.insertRule(e, n.cssRules.length);
} catch (e) {}
} else t.appendChild(document.createTextNode(e));
this.ctr++;
}),
(t.flush = function () {
this.tags.forEach(function (e) {
return e.parentNode && e.parentNode.removeChild(e);
}),
(this.tags = []),
(this.ctr = 0);
}),
e
);
})(),
// ...
Ar = function (e) {
// ...
var h = {
key: t,
sheet: new Ln({
key: t,
container: r,
nonce: e.nonce,
speedy: e.speedy,
prepend: e.prepend,
}),
nonce: e.nonce,
inserted: a,
registered: {},
insert: o,
};
return h.sheet.hydrate(s), h;
}
// ...
var Hr = P(
"undefined" != typeof HTMLElement
? Ar({
key: "css",
})
: null,
);