CODEWITHSUNDEEP
javascriptwhatsappcontent-security-policy
Wim den Herder
Wim den Herder

Reputation: 1305

Not able to make api request from whatsapp web chat console?

  1. Visit the Whatsapp Web chat (https://web.whatsapp.com/)
  2. Fetch an api call:
(async () => {
const response = await fetch(
  `https://jsonplaceholder.typicode.com/posts/1`
);
const json = await response.json();
console.log(json);
})();
  1. The console returns this error:
VM285:2 Refused to connect to 'https://jsonplaceholder.typicode.com/posts/1'
because it violates the document's Content Security Policy.

PS: Do the same for Telegram Web chat (https://web.telegram.org) and it works

Is it possibile to have a workaround to make it work for the whatsapp page?

Update: You can use this chrome extension to bypass the Content Security Policy

Upvotes: 0

Views: 748

Answers (1)

Halvor Sakshaug
Halvor Sakshaug

Reputation: 3465

The Content Security Policy of web.whatsapp.com currently defines connects with the following directive:

connect-src 'self' data: blob: https://*.whatsapp.net https://www.facebook.com https://*.giphy.com https://*.tenor.co https://crashlogs.whatsapp.net/wa_clb_data https://crashlogs.whatsapp.net/wa_fls_upload_check https://www.bingapis.com/api/v6/images/search https://*.google-analytics.com wss://*.web.whatsapp.com wss://web.whatsapp.com https://www.whatsapp.com https://dyn.web.whatsapp.com https://graph.whatsapp.com/graphql;

As jsonplaceholder.typicode.com is not on that allowlist, it is blocked and there is nothing you can do about that.

Telegram is apparently not serving a Content Security Policy header and not restricting such connects.

Upvotes: 1

Related Questions