Bookmarklet.js is not working on some websites because "Content Security Policy of your site blocks some resources. Some resources are blocked because their origin is not listed in your site's Content Security Policy (CSP)."

[HBarotov]

Issue

I am following the social media project and everything is working right so far. The bookmarker is working on most websites, getting the images of the page. However, in popular websites, such as pinterest, youtube, and chatgpt.com, the script is getting blocked due to security/policy reasons.

Logs

In the console, the issue is this:

Some resources are blocked because their origin is not listed in your site's Content Security Policy (CSP). Your site's CSP is allowlist-based, so resources must be listed in the allowlist in order to be accessed.

A site's Content Security Policy is set either via an HTTP header (recommended), or via a meta HTML tag. To fix this issue do one of the following:

• (Recommended) If you're using an allowlist for 'script-src', consider switching from an allowlist CSP to a strict CSP, because strict CSPs are more robust against XSS . See how to set a strict CSP .
• Or carefully check that all of the blocked resources are trustworthy; if they are, include their sources in the CSP of your site. ⚠️Never add a source you don't trust to your site's CSP. If you don't trust the source, consider hosting resources on your own site instead.

Here is the picture:

How should we configure the scripts to ensure that the bookmarker works on all sites?