ka215
commented
4 years ago The jQuery.Timeline is using the new Function() method instead of eval() because one should generate dynamically methods after fetching user custom callback. However, the new Function() has been prevented belong to unsafe when the "Content Security Policy" (hereinafter called "CSP") enabled.
Also, when the CSP enabled, the inline scripts on the web page that rendered have been prevented execution. So that timeline dispatcher script as below does not execute too.
<script>
(function($){
$('#myTimeline').Timeline({
(...Options...)
})
})
</script>How to avoid that case is as follows:
- After saving as a .js file on a self-host the inline scripts to dispatch timeline object, load that by script tag any page.
- The scripts of jQuery.Timeline and jQuery core etc. should place to your self-host.
- Add meta tag below on the web page that you want to output timeline object.
<meta http-equiv="Content-Security-Policy" content="script-src 'self' 'unsafe-eval';">Note: if you use CDN to loading scripts, you should add to meta tag the domains of CDN you use, as follows:
<meta http-equiv="Content-Security-Policy" content="script-src 'self' https://cdn.jsdelivr.net https://ajax.googleapis.com 'unsafe-eval';">Please try it above.
Thank you,
When an inline javascript is disabled using the content security policy, events on the timeline are not shown.
In the console, an error message mentioning that the resource is blocked due to the page configuration. Seems that the code below in the plug-in is causing this issue.
jquery.timeline.min.js:10:13215: new Function("return ".concat(t))
My system is needed to be configured to block inline javascript using content security policy for security purpose.
The version I am using is 2.0.0.
Thanks.