How to fix Content Security Policy error? (Chrome Extension)

Question

I was building a chrome extension and used some icons from font awesome. However, those icons aren't loading because of the following error-

For reference, here is the manifest.json file-

      {
    "manifest_version": 2,
    "name": "Safe and Secure",
    "description": "Every security tool at one place.",
    "version": "1.0.0",
    "icons": {"128": "logo_128.png"},
    "browser_action": {
        "default_icon": "images/logo.png",
        "default_popup": "index.html"
    }
}

Answer 1

Chrome Extensions by default have a Content Security Policy of only files located within the extensions directory as specified here. The reason is so your extension's users are not vulnerable to malicous code that could be brought in from a website.

If you want to use the font-awesome script for icons, you must specify so in your manifest.json.

      {
    "manifest_version": 2,
    "name": "Safe and Secure",
    "description": "Every security tool at one place.",
    "version": "1.0.0",
    "icons": {"128": "logo_128.png"},
    "browser_action": {
        "default_icon": "images/logo.png",
        "default_popup": "index.html"
    }
    // add this line
    "content_security_policy": "script-src 'self' https://example.com; object-src 'self'",
}

The above is just an example of how you would bring it in. I would check the website linked above in order to find an example that matches your use-case.