diff --git a/docs/getting-started/integration.md b/docs/getting-started/integration.md index bd16145ed7d..d1a265e88cd 100644 --- a/docs/getting-started/integration.md +++ b/docs/getting-started/integration.md @@ -85,9 +85,9 @@ require(['moment'], function() { }); ``` -## Content-Security-Policy +## Content Security Policy -By default, Chart.js injects CSS directly into the DOM. For webpages secured using [Content-Security-Policy (CSP)](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy), this requires to allow `style-src 'unsafe-inline'`. For stricter CSP environments, where only `style-src 'self'` is allowed, the following CSS file needs to be manually added to your webpage: +By default, Chart.js injects CSS directly into the DOM. For webpages secured using [`Content-Security-Policy` (CSP)](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy), this requires to allow `style-src 'unsafe-inline'`. For stricter CSP environments, where only `style-src 'self'` is allowed, the following CSS file needs to be manually added to your webpage: ```html diff --git a/rollup.config.js b/rollup.config.js index 1341a16d19a..1f0dbbacac5 100644 --- a/rollup.config.js +++ b/rollup.config.js @@ -29,7 +29,7 @@ module.exports = [ }), optional({ include: ['moment'] - }), + }) ], output: { name: 'Chart', diff --git a/samples/advanced/content-security-policy.css b/samples/advanced/content-security-policy.css index c1760394437..8e5b8fd8cbb 100644 --- a/samples/advanced/content-security-policy.css +++ b/samples/advanced/content-security-policy.css @@ -1,5 +1,20 @@ .content { max-width: 640px; margin: auto; - padding: 16px 32px; + padding: 1rem; +} + +.note { + font-family: sans-serif; + color: #5050a0; + line-height: 1.4; + margin-bottom: 1rem; + padding: 1rem; +} + +code { + background-color: #f5f5ff; + border: 1px solid #d0d0fa; + border-radius: 4px; + padding: 0.05rem 0.25rem; } diff --git a/samples/advanced/content-security-policy.html b/samples/advanced/content-security-policy.html index 81f06dc3291..c205bfa2a6f 100644 --- a/samples/advanced/content-security-policy.html +++ b/samples/advanced/content-security-policy.html @@ -14,6 +14,11 @@
+
+ In order to support a strict content security policy (default-src 'self'), + this page manually loads Chart.min.css and turns off the automatic style + injection by setting Chart.platform.useExternalStylesheet = true;. +
diff --git a/samples/samples.js b/samples/samples.js index 0b04f583439..b6ffe762682 100644 --- a/samples/samples.js +++ b/samples/samples.js @@ -188,7 +188,7 @@ title: 'Progress bar', path: 'advanced/progress-bar.html' }, { - title: 'Content-Security-Policy', + title: 'Content Security Policy', path: 'advanced/content-security-policy.html' }] }]; diff --git a/samples/style.css b/samples/style.css index a279b22b247..db92f0c6016 100644 --- a/samples/style.css +++ b/samples/style.css @@ -1,4 +1,3 @@ - @import url('https://fonts.googleapis.com/css?family=Lato:100,300,400,700,900'); body, html { diff --git a/src/platforms/platform.dom.css b/src/platforms/platform.dom.css index 8e56450ffc9..e0b99a4aad4 100644 --- a/src/platforms/platform.dom.css +++ b/src/platforms/platform.dom.css @@ -2,17 +2,12 @@ * DOM element rendering detection * https://davidwalsh.name/detect-node-insertion */ -@-webkit-keyframes chartjs-render-animation { - from { opacity: 0.99; } - to { opacity: 1; } -} @keyframes chartjs-render-animation { from { opacity: 0.99; } to { opacity: 1; } } .chartjs-render-monitor { - -webkit-animation: chartjs-render-animation 0.001s; animation: chartjs-render-animation 0.001s; }