1977136 - CSP issue with img-src 'self'

Status: RESOLVED DUPLICATE of bug 1978217

(Core :: CSS Parsing and Computation, defect)

Description

[andre]

Attachment: Screenshot 2025-07-14 at 9.57.48 AM.png

User Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.15; rv:141.0) Gecko/20100101 Firefox/141.0

Steps to reproduce:

load a webpage with <ul> with property list-style-image:"url("/img/arrow-right.svg")"

CSP img-src is configured to allow 'self'

Actual results:

list-style-image wont load, blocked by incorrect CSP error, despite CSP configuration specifically allowing 'self'. in Chrome and Safari this works fine, in former (a few weeks back) versions of firefox i believe it used to work fine.

Expected results:

list-style-image of SVG should load correctly

This appears to be a recent issue, when i tested it between nightly and standard firefox version the standard worked fine and only nightly refused to load the image. When I tested it again today it now won't load for either versions

Comment 1

[BugBot [:suhaib / :marco/ :calixte]]

The Bugbug bot thinks this bug should belong to the 'Core::DOM: Security' component, and is moving the bug to that component. Please correct in case you think the bot is wrong.

Comment 2

[Tom Schuster]

Attachment: working testcase

I created a simple test case with img-src 'self' and it seems to work fine.

Comment 3

[Tom Schuster]

Can you link the site or do you have a test case that shows this issue? Otherwise it would be very helpful if you could use our mozregression tool to find out when this regression was introduced.

Comment 4

[Tom Schuster]

(In reply to Tom Schuster (MoCo) from comment #2)

Created attachment 9500331 [details]
working testcase

I created a simple test case with img-src 'self' and it seems to work fine.

Confusingly this test case when run at https://bug1977136.bmoattachments.org/attachment.cgi?id=9500331 will actually produce a CSP error, because /circle.svg is redirected to https://bugzilla.mozilla.org/circle.svg. Running the test case locally doesn't show any CSP error.

Comment 5

[andre]

It's currently gated behind authentication; will get back to you with an attempt at mozregression later

Comment 6

[andre]

I looked into it further, Im not sure CSP is the issue here.

The console error in the image uploaded does say CSP error but it is blocking an image sourced from "https://jsd-widget.atlassian.com/", and that blocking is expected behavior since it's not really whitelisted.

The weird thing is that the list-style-image property is configured to be a relative URL IE list-style-image: url("/img/arrow-right.svg")

but the actual base-url is entirely different, expecting it to be "dev...au". But for some reason firefox is trying to load it as sourced from https://jsd-widget.atlassian.com/. Network tab confirms this as well

I looked through the codebase and that URL is referenced for a typical script embed integration, and certainly not referenced on this particular API integration.

In localhost running this application in debug mode it displays fine, correctly sourced as localhost/img/arrow-right.svg

Comment 7

[Tom Schuster]

Maybe check document.baseURI? Thanks for investigating this further!

Comment 8

[andre]

manually checking within console, document.baseURI is correct before/after, i havent tested tried out when the application actually tries to load it

Comment 9

[BugBot [:suhaib / :marco/ :calixte]]

The severity field is not set for this bug.
:freddy, could you have a look please?

For more information, please visit BugBot documentation.

Comment 10

[Daniel Veditz [:dveditz]]

Is the CSS inline, or is it in an external CSS file that is on a different host? Specifically, is it defined in a CSS file loaded from https://jsd-widget.atlassian.com/ ? url() in CSS resolves URLs relative to the style-sheet and not document.baseURI. But that's ancient CSS behavior and should behave the same in all browsers.

Comment 11

[andre]

Attachment: image.png

Comment 12

[andre]

The CSS in question is via CSS-in-JS (practically inline) via MUI Box component

<Box sx={markdownSx}></Box>

const markdownSx = { ul: { listStyleImage: url('/img/arrow-right.svg'), paddingLeft: '24px', fontSize: '0.875rem' }

It is not a CSS file defined in widget.atlassian nor does that script really have any relevance to this component

Ive attached an image of what it looks like in effect from browser console

Also other browsers work and dont load the image from the widget.atlassian thing, they load it as from the correct relative stylesheet

Comment 13

[Tom Schuster]

Thanks for keeping us updated. I am convinced this has nothing to do with CSP. Please try Firefox 142, it should already be fixed.

Comment 14

[andre]

Updated to nightly v143 and is now working as expected. I checked through the other bug and that clarifies it much better as to what exactly was happening, thanks Tom and Daniel