Problems with external package

I would like to use chart.js with (custom immersive layout) zoom apps,

I use the code from this respository

  1. I use npm and use the next command
npm install chartjs
  1. Next, I add the scripts to the header
const headers = {
    frameguard: {
        action: 'sameorigin',
    hsts: {
        maxAge: 31536000,
    referrerPolicy: 'same-origin',
    crossOriginEmbedderPolicy: false,
    contentSecurityPolicy: {
        directives: {
            'default-src': 'self',
            styleSrc: ["'self'", '', "'unsafe-inline'"],
            scriptSrc: ["'self'", '', '', "'unsafe-inline'"],
            imgSrc: ["'self'", `https://${redirectHost}`,  '', "'unsafe-inline'"],
            'connect-src': 'self',
            'base-uri': 'self',
            'form-action': 'self',

Finally, in the index.pug

in the content block I use


And add the next script in its section


        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

Hi @jsarmiento
Thanks for reaching out to the Zoom Developer forum!
Have you been able to fix this issue?

1 Like

Hi @elisa.zoom

I have reduced the number of errors to just one.

In this case I would like to consume an api to bring information to display in the right panel of the immersive zoom application


Actually, i am using fastapi, I configure the middleware using this doc
CORS (Cross-Origin Resource Sharing) - FastAPI (

Type Error

Refused to connect to ‘{URLAPI}’ because it violates the following Content Security Policy directive: "connect-src ‘self’ https://*

  • 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

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:

Thank you, In this case also It’s necessary to use https service (api to consume)

This topic was automatically closed after 30 days. New replies are no longer allowed.