CSP directive violation in Chrome extension content script

Question

I am writing a chrome extension using manifest V3 for my own use to make porting information between two sites easier. When I try to use the click() event to click on an element of the site's webpage from the extensions content script I get a CSP error. The external site "https://travel.*.com/TravelNet/nonRevenueSearch.action?search=getflights&travelWarningPresent=null" does not seem to have a CSP, so I believe the CSP for my extension is the culprit. The CSP error I am getting is:

Refused to run the JavaScript URL because it violates the following Content Security Policy directive: "script-src 'self' 'wasm-unsafe-eval' 'inline-speculation-rules' http://localhost:* http://127.0.0.1:\*". Either the 'unsafe-inline' keyword, a hash ('sha256-...'), or a nonce ('nonce-...') is required to enable inline execution. Note that hashes do not apply to event handlers, style attributes and javascript: navigations unless the 'unsafe-hashes' keyword is present.

The error is being generated from the element.click line below which is in a function exported by the "scripts/main_travelNet.js" and imported by "scripts/content_travelNet.js" referenced in the manifest below. The querySelector is selecting from the

          const element = document.querySelector('a[href^="javascript:showFlightLoadInPopup2("]');
          element.click();

I've attempted to define the CSP correctly in the file below but I'm obviously doing something wrong:

{
  "manifest_version": 3,
  "name": "* Staff Traveler Helper",
  "description": "Help answer Staff Traveler App requests from * Travel Net",
  "version": "0.1",
  "permissions": ["storage", "tabs", "activeTab", "scripting"],
  "host_permissions": ["https://travel.*.com/TravelNet/*",
                      "https://stafftraveler.app/*"],
  
  "minimum_chrome_version": "92",
  "icons": {
  "16": "images/Icons8-Windows-8-Transport-Airplane-Takeoff-16.png",
  "32": "images/Icons8-Windows-8-Transport-Airplane-Takeoff-32.png",
  "48": "images/Icons8-Windows-8-Transport-Airplane-Takeoff-48.png",
  "128": "images/Icons8-Windows-8-Transport-Airplane-Takeoff-128.png"
  },
  "content_scripts": [
      {
        "js": ["scripts/content_staffTraveler.js"],
        "matches": ["https://stafftraveler.app/*"]
      },
      {
        "js":["scripts/content_travelNet.js"],
        "matches": ["https://travel.*.com/TravelNet/*"]
      }
  ],
  "background": {
    "service_worker": "scripts/background.js",
    "type": "module"
  },
  "externally_connectable": {
    "matches": [
      "https://travel.*.com/TravelNet/*",
      "https://stafftraveler.app/*"
      ]
  },
  "web_accessible_resources": [
      {
        "resources": [
              "images/bookmark.png",
              "images/play.png",
              "images/delete.png",
              "images/save.png",
              "images/Widget.png",
              "images/favicon.ico",
              "scripts/main_travelNet.js",
              "scripts/main_staffTraveler.js",
              "scripts/main_travelNet.js",
              "scripts/object_definitions.js",
              "scripts/content_travelNet.js",
              "scripts/content_staffTraveler.js"
            ],
              
        "matches": [
          "<all_urls>"
          ],
          "type": "module",
          "content_security_policy": "script-src 'self' 'unsafe-eval' 'unsafe-inline' 'unsafe-hashes' https://travel.*.com/TravelNet/*; object-src 'self'"

          
      },
      {
          "resources": [
              "scripts/main_staffTraveler.js",
                "scripts/main_travelNet.js",
                "scripts/object_definitions.js"
          ],
          "matches": ["<all_urls>"],
          "type": "module",
          "content_security_policy": "script-src 'self' 'unsafe-eval' 'unsafe-inline' 'unsafe-hashes' https://travel.*.com/TravelNet/*; object-src 'self'"

      }
    ],
  
  "action": {
    "default_icon": {
      "16": "images/ext-icon.png",
      "24": "images/ext-icon.png",
      "32": "images/ext-icon.png"
    },
    "default_title": "Staff Traveler Helper",
    "default_popup": "pages/popup.html",
    "content_security_policy": "script-src 'self' 'unsafe-eval' 'unsafe-inline' 'unsafe-hashes' https://travel.*.com/TravelNet/*; object-src 'self'"
  }
  
}

I've attempted multiple iterations of adding different versions the CSP to the manifest file which always result in the same error.

It's a [bug in ManifestV3](https://crbug.com/1299742). The workaround is to put the clicking part of the code into [page context](/a/9517879). — wOxxOm, Feb 20 '23 at 20:44

score 0 · Answer 1 · answered Feb 23 '23 at 04:49

If your configuration and error messages are in sync there are more CSPs than what you have defined. One is likely one being set in a response header that you need to modify. It could be set by default by your code, framework, web server or a proxy. Adding another policy won't allow something that is restricted by an existing policy.

score 0 · Answer 2 · answered Mar 22 '23 at 01:28

0

Is this allowed? "In Manifest V3, all CSP sources that refer to external or non-static content are forbidden" per https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/content_security_policy

I'm also trying to solve this

answered Mar 22 '23 at 01:28

User

3
2

As it’s currently written, your answer is unclear. Please [edit] to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Mar 26 '23 at 18:04

CSP directive violation in Chrome extension content script

2 Answers2