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

Question

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!

Ideally you should fix mathjax to just use the shipped js scripts so it doesn't need to create new DOM script element. It may happen automatically if you explicitly load all scripts it may need (like asciimath.js) in content_scripts -> js. Note that content.js should be the last in the list. If done correctly there should be no need for web_accessible_resources or content_security_policy. — woxxom
– woxxom, Commented Feb 11 at 11:55

WofWca · Accepted Answer · 2025-02-12 11:41:03Z

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.

Collectives™ on Stack Overflow

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

1 Answer 1

Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Related