"Missing OWASP secure headers" error in zoom client mac

Zoom Apps
1

Hello, @everyone. I am facing error Missing OWASP Secure Headers: ["X-Content-Type-Options","Content-Security-Policy","Referrer-Policy"] for URL in mac zoom client.

image
image736×402 32.5 KB 

<Helmet>
        <meta http-equiv="X-Content-Type-Options" content="nosniff" />
        <meta http-equiv="Content-Security-Policy" content="default-src 'self' https:; script-src 'self' https://example.vercel.app/; style-src 'self'; img-src *; font-src 'self' data:;" />
        <meta name="referrer" content="no-referrer" />
</Helmet>

The app was built in React.js and it works properly in windows zoom desktop client.
What should I do to get the page loading exactly in mac zoom client?
Kindly help me please
Thank you

2

It looks like you’re using react-helmet to set meta tags in the client side. Instead, these values should be set as headers that should be sent by the server when the page is requested. In other words, by the time the client receives this page with the meta tags set, it is too late to change the headers.

react-helmet is designed to set data in the HEAD tag of a react app. To set the headers you should use a method on the server side. If you are using Express to serve this application, you can use a similarly named package called ‘helmet’ to set HTTP headers:

Let me know if that helps.

3

@MaxM Thank you for your reply.

I used zoomapps-sample-js as a backend. I am just calling endpoint from the back-end. So I don’t have any express server for now. To resolve this problem, should I build the express server and run the front-end on it?

Thank you again

4

The Basic Sample App includes an express server that will set these headers so you can run that to get started. Regardless of the backend that you use, you want these headers to be set.

5

I just build the express backend and set the Secure header

But I’m still getting this error - Missing OWASP Secure Headers: ["Strict-Transport-Security","X-Content-Type-Options","Content-Security-Policy","Referrer-Policy"] for URL

My code is here

app.use(helmet.contentSecurityPolicy({
    directives: {
        defaultSrc: ["'self'"],
        styleSrc: ["'self'", "'unsafe-inline'"],
        scriptSrc: ["'self'", "'unsafe-inline'", "https://appssdk.zoom.us"],
        connectSrc: ["'self'", `wss://https://example.herokuapp.com/sockjs-node`],
        imgSrc: ["'self'", 'data:', 'https://images.unsplash.com'],
        baseUri: ["'self'"],
        formAction: ["'self'"]
    }
}));
app.use(helmet.frameguard({ action: 'sameorigin' })); 
app.use(helmet.referrerPolicy({ policy: 'same-origin' })); 
app.use(helmet.hsts({ maxAge: 31536000 }));
app.use(helmet.noSniff());

I’m not sure the error is really related with the secure headers

6

I tried to fetch URL in zoom app console - fetch("https://example.herokuapp.com/");
Then I get the below error
Snag_23962aa3

I set the cors and secure headers in express server. What I wanna say is that all works well in windows zoom client.