# Problems with external package **URL:** \ **Category:** App Marketplace\ **Created:** [January 23, 2023, 8:13pm UTC](https://devforum.zoom.us/t/problems-with-external-package/81989 "2023-01-23T20:13:52Z")\ **Posts on this page:** 6\ **Page:** 1
**Author:** ![jsarmiento](https://avatars.discourse-cdn.com/v4/letter/j/aca169/32.png) [@jsarmiento](https://devforum.zoom.us/u/jsarmiento)\ **Post date:** [January 23, 2023, 8:13pm UTC](https://devforum.zoom.us/t/problems-with-external-package/81989/1 "2023-01-23T20:13:52Z")
I would like to use chart.js with (custom immersive layout) zoom apps, I use the code from this [respository](https://github.com/zoom/zoomapps-sample-js) 1. I use npm and use the next command ```auto npm install chartjs ``` 1. Next, I add the scripts to the header ```auto const headers = { frameguard: { action: 'sameorigin', }, hsts: { maxAge: 31536000, }, referrerPolicy: 'same-origin', crossOriginEmbedderPolicy: false, contentSecurityPolicy: { directives: { 'default-src': 'self', styleSrc: ["'self'", 'https://cdn.jsdelivr.net/npm/chart.js@latest/dist/Chart.min.js', "'unsafe-inline'"], scriptSrc: ["'self'", 'https://appssdk.zoom.us/sdk.min.js', 'https://cdn.jsdelivr.net/npm/chart.js@latest/dist/Chart.min.js', "'unsafe-inline'"], imgSrc: ["'self'", `https://${redirectHost}`, 'https://cdn.jsdelivr.net/npm/chart.js@latest/dist/Chart.min.js', "'unsafe-inline'"], 'connect-src': 'self', 'base-uri': 'self', 'form-action': 'self', }, }, }; ``` Finally, in the index.pug in the content block I use ```auto div(class="chart-container") canvas(id="myChart") ``` And add the next script in its section ```auto script(src="https://cdn.jsdelivr.net/npm/chart.js@latest/dist/Chart.min.js") script(type='text/javascript'). const ctx = document.getElementById('myChart'); new Chart(ctx, { type: 'bar', data: { labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'], datasets: [{ label: '# of Votes', data: [12, 19, 3, 5, 2, 3], borderWidth: 1 }] }, options: { scales: { y: { beginAtZero: true } } } }); ``` If I test the graphs they work on the web page. but not in the application ![error_zoom](https://us1.discourse-cdn.com/flex016/uploads/zoomdeveloper/original/3X/1/0/10ddecfeca9bc129ef44004457ec0101de7ea972.png) ---
**Author:** ![elisa.zoom](https://sea2.discourse-cdn.com/flex016/user_avatar/devforum.zoom.us/elisa.zoom/32/47836_2.png) [@elisa.zoom](https://devforum.zoom.us/u/elisa.zoom)\ **Post date:** [February 10, 2023, 9:29pm UTC](https://devforum.zoom.us/t/problems-with-external-package/81989/2 "2023-02-10T21:29:22Z")
Hi @jsarmiento Thanks for reaching out to the Zoom Developer forum! Have you been able to fix this issue? ---
**Author:** ![jsarmiento](https://avatars.discourse-cdn.com/v4/letter/j/aca169/32.png) [@jsarmiento](https://devforum.zoom.us/u/jsarmiento)\ **Post date:** [February 13, 2023, 12:49am UTC](https://devforum.zoom.us/t/problems-with-external-package/81989/3 "2023-02-13T00:49:30Z")
Hi @elisa.zoom I have reduced the number of errors to just one. **Context** In this case I would like to consume an api to bring information to display in the right panel of the immersive zoom application **Backend** Actually, i am using fastapi, I configure the middleware using this doc [CORS (Cross-Origin Resource Sharing) - FastAPI (tiangolo.com)](https://fastapi.tiangolo.com/tutorial/cors/) **Type Error** Refused to connect to ‘{URLAPI}’ because it violates the following Content Security Policy directive: "connect-src ‘self’ https://\*.zoom.us [https://appssdk.zoom.us/sdk.min.js](https://appssdk.zoom.us/sdk.min.js) - Note: this pblome can solve add url to connect-src in the headers. I don’t undertand these errors. Error: Network Error at createError (createError.js:16:15) at XMLHttpRequest.handleError (xhr.js:117:14) Access to XMLHttpRequest at ‘{URLAPI}’ from origin ‘{ngrokURL}’ has been blocked by CORS policy: Response to preflight request doesn’t pass access control check: No ‘Access-Control-Allow-Origin’ header is present on the requested resource ---
**Author:** ![elisa.zoom](https://sea2.discourse-cdn.com/flex016/user_avatar/devforum.zoom.us/elisa.zoom/32/47836_2.png) [@elisa.zoom](https://devforum.zoom.us/u/elisa.zoom)\ **Post date:** [February 13, 2023, 9:27pm UTC](https://devforum.zoom.us/t/problems-with-external-package/81989/4 "2023-02-13T21:27:35Z")
Hey @jsarmiento could you please check if you have Cors enabled in the backend of your application? For more information about Cross-Origin Resource Sharing (CORS), please see this helpful resource: > **[Cross-Origin Resource Sharing (CORS) - HTTP | MDN](https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS)** > > Cross-Origin Resource Sharing (CORS) is an HTTP-header based mechanism that allows a server to indicate any origins (domain, scheme, or port) other than its own from which a browser should permit loading resources. CORS also relies on a mechanism by... ---
**Author:** ![jsarmiento](https://avatars.discourse-cdn.com/v4/letter/j/aca169/32.png) [@jsarmiento](https://devforum.zoom.us/u/jsarmiento)\ **Post date:** [February 14, 2023, 2:22am UTC](https://devforum.zoom.us/t/problems-with-external-package/81989/5 "2023-02-14T02:22:59Z")
Thank you, In this case also It’s necessary to use https service (api to consume) ---
**Author:** ![system](https://us1.discourse-cdn.com/flex016/uploads/zoomdeveloper/original/3X/6/1/614bdd549b610bbaa46ff934617683a02bdaa03c.png) [@system](https://devforum.zoom.us/u/system)\ **Post date:** [February 23, 2023, 6:14am UTC](https://devforum.zoom.us/t/problems-with-external-package/81989/6 "2023-02-23T06:14:28Z")
Closed on February 23, 2023, 6:14am UTC This topic was automatically closed after 30 days. New replies are no longer allowed.