Hello,
My company product using Metronic package but I'm not sure the version.
After I implement content security policy and remove "unsafe-inline", i got this error:
Refused to execute inline event handler because it violates the content security policy directive.
The error focus on this line of code in MetronicBundles/vendors/base/vendors.bundle.js:
e.head.appendChild(o).parentNode.removeChild(o)
Hi,
You can try the following workaround to upgrade jQuery:
Update the package.json file with the jQuery version, e.g., "jquery": "^3.7.1".
Before proceeding, backup your current assets folder to avoid any data loss.
Run the asset build process (e.g., using npm run build or gulp depending on your setup).
This will regenerate the vendors.bundle.js file and replace the assets folder with the latest versions.
If you need further assistance, refer to the Metronic v5 documentation:
https://preview.keenthemes.com/metronic-v5/?page=docs§ion=installation#docs
Let me know if you encounter any issues!
Hi Faizal, we do have the plan to upgrade, however in the mean time we would like to have a quick fixes or work around for this issue.
May I know how to upgrade the jQuery version since it is bundled inside the vendors.bundle.js file?
Hi Khairul,
The code you’ve shared appears to be part of the jQuery plugin. One possibility is that the issue might be resolved by upgrading the jQuery version, as the one bundled with Metronic 5 is quite old and might not fully support modern security policies.
Since Metronic 5 has been around for a while, I would also recommend considering an upgrade to a newer Metronic version, as later versions have improved compatibility and modern web practices.
Thanks
I believe we are using version 5 based on the index.html file in our Metronic solution.
<a href="https://keenthemes.com/forums/forum/support/metronic5/" target="_blank">
Hi Khairul,
Could you confirm which version of Metronic you're using? In Metronic 8, we bundle third-party plugins in plugins.bundle.js, while in Metronic 9, we use core.bundle.js. Since you're referencing vendors.bundle.js, it might be from version 7 or earlier.
Please let us know the version so we can assist you more accurately.
Thanks!
Here is the vendors.bundle.js code block, :
!function (t, e) {
"use strict";
"object" == typeof module && "object" == typeof module.exports ? module.exports = t.document ? e(t, !0) : function (t) {
if (!t.document)
throw new Error("jQuery requires a window with a document");
return e(t)
}
: e(t)
}("undefined" != typeof window ? window : this, function (t, e) {
"use strict";
var i = []
, n = t.document
, r = Object.getPrototypeOf
, o = i.slice
, s = i.concat
, a = i.push
, l = i.indexOf
, c = {}
, h = c.toString
, u = c.hasOwnProperty
, d = u.toString
, p = d.call(Object)
, f = {}
, m = function (t) {
return "function" == typeof t && "number" != typeof t.nodeType
}
, g = function (t) {
return null != t && t === t.window
}
, v = {
type: !0,
src: !0,
noModule: !0
};
function y(t, e, i) {
var r, o = (e = e || n).createElement("script");
if (o.text = t,
i)
for (r in v)
i[r] && (o[r] = i[r]);
e.head.appendChild(o).parentNode.removeChild(o)
}
function b(t) {
return null == t ? t + "" : "object" == typeof t || "function" == typeof t ? c[h.call(t)] || "object" : typeof t
}
var _ = function (t, e) {
return new _.fn.init(t, e)
}
, x = /^[\s\uFEFF\xA0]+|[\s\uFEFF\xA0]+$/g;
function w(t) {
var e = !!t && "length" in t && t.length
, i = b(t);
return !m(t) && !g(t) && ("array" === i || 0 === e || "number" == typeof e && e > 0 && e - 1 in t)
}
Hi Khairul,
Could you please send a screenshot of the issue from the console log? We need to identify the exact line and plugin associated with the code causing the problem.
Thanks.