Problems with external package

App Marketplace
1

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'", '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

    div(class="chart-container")
        canvas(id="myChart")

And add the next script in its section

 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
error_zoom1575×810 60.3 KB

2

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

1 Like
3

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)

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

  • 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

4

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:

5

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

6

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