ViperJuice
ViperJuice

Reputation: 63

CSP directive violation in Chrome extension content script

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.

Upvotes: 5

Views: 7511

Answers (5)

Refhi
Refhi

Reputation: 11

You can inject the script : FW_scripts/clicElement.js

console.log("[clickElement.js]");


function clickElement(elementSelector) {
    console.log("[clickElemen.js] elementSelector", elementSelector);
    let el = document.querySelector(elementSelector);
    if (el) {
        el.click();
    }
}


// Ajout d'un écouteur pour les événements personnalisés
document.addEventListener('clicElement', function(event) {
    let elementToClic = event.detail;
    clickElement(elementToClic);
});

The manifest needs to load the script in web_accessible_resources

{
  "manifest_version": 3,
  "name": "xxxx",
// ...
  "content_scripts": [
    {
// ...
    }
  ],
  "web_accessible_resources": [
    {
      "resources": [
        "FW_scripts/*"
      ],
      "matches": [
        "<all_urls>"
      ]
    }
  ]
}

And at last in your .js content file :

// Initialise clicElement.js
function startClicScript() {
    var scriptClicElements = document.createElement('script');
    scriptClicElements.src = chrome.runtime.getURL('FW_scripts/clickElement.js');
    (document.head || document.documentElement).appendChild(scriptClicElements);
}
startClicScript();

function clicCSPLockedElement(elementSelector) {
    console.log('Clic on CSP locked Element :', elementSelector);
    const event = new CustomEvent('clicElement', { detail: elementSelector });
    document.dispatchEvent(event);        
}   

Upvotes: 1

Michael Akoolo
Michael Akoolo

Reputation: 151

There is a third part software like extension attached to your browser causing this errors. for meit was antivirus software extension and orangemonkey scripts. I had to uninstall

Upvotes: 0

Natsuki
Natsuki

Reputation: 11

in my case, this works

"content_scripts": [ {
  // ...
  "world": "MAIN",
  // ...
} ],

https://developer.chrome.com/docs/extensions/mv3/manifest/content_scripts/#world-timings

Upvotes: 0

User
User

Reputation: 13

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

Upvotes: 1

Halvor Sakshaug
Halvor Sakshaug

Reputation: 3465

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.

Upvotes: 0

Related Questions