CODEWITHSUNDEEP
javascriptgoogle-chrome-extensioncontent-security-policymathjaxscript-src
Max Dudek
Max Dudek

Reputation: 1

Chrome extension local script violates CSP, manifest.json not recognizing "script-src-elem"

I'm trying to write a Chrome extension that uses the MathJax library. I'm using a local copy of the MathJax code in my extension, which I load as a content script in manifest.json:

{
  "name": "mathjax-example",
  "version": "1.0",
  "manifest_version": 3,
  "web_accessible_resources": [
    {
      "resources": ["mathjax/*", "mathjax-config.js"],
      "matches": [  "https://oeis.org/*" ]
    }
  ],
  "content_scripts": [
    {
      "js": ["content.js", "mathjax-config.js", "mathjax/es5/tex-mml-chtml.js"],
      "matches": [ "https://oeis.org/*" ]
    }
  ],
  "content_security_policy": {
    "extension_pages": "default-src 'self'; script-src 'self' 'wasm-unsafe-eval'; font-src 'self'; style-src 'self' 'unsafe-inline'; script-src-elem 'self' 'wasm-unsafe-eval' 'inline-speculation-rules' https://oeis.org;"
  }
}

However, visiting the specified site gives me the following error in the console:

tex-mml-chtml.js:1 Refused to load the script 'https://../es5/input/asciimath.js' 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:* chrome-extension://d9272ae4-ea80-492e-a847-191300b9c6fa/". 
Note that 'script-src-elem' was not explicitly set, so 'script-src' is used as a fallback.

It looks like running tex-mml-chtml.js will add the following script element to the page, which then tries to run asciimath.js:

<script src="//../../es5/input/asciimath.js" charset="UTF-8"></script>

So either MathJax is written insecurely, or (more likely) I've configured something wrong. What I'm confused about is the error "'script-src-elem' was not explicitly set", since I have specified script-src-elem in my content_security_policy of manifest.json.

To reproduce this error, you can load this repository as an "Unpacked extension" on Chrome (my Chrome version is v132.0.6834.160 on Windows 10), visit the specified site and view the browser console.

I am very new to javascript so any insights would be greatly appreciated!

Upvotes: 0

Views: 42

Answers (1)

WofWca
WofWca

Reputation: 706

I might be wrong, but //../../es5/input/asciimath.js doesn't seem like it's specifying the intended path. This results in the full URL being https://../es5/input/asciimath.js, and (new URL('https://../es5/input/asciimath.js')).origin is 'https://..', which does not exist.

Secondly, content_security_policy does not apply to content scripts. From the Chrome docs:

The "extension pages" policy applies to page and worker contexts in the extension. This would include the extension popup, background worker, and tabs with HTML pages or iframes that were opened by the extension

You might want to try to include the asciimath.js file in the content_scripts field.

If this doesn't work, try checking out MathJax docs.

And I can see you opened an issue in the MathJax repo https://github.com/mathjax/MathJax/issues/3329.

Upvotes: 0

Related Questions