Make security error message about embedding external resources more informative
Categories
(Core :: DOM: Security, enhancement, P3)
Tracking
()
People
(Reporter: sebo, Unassigned)
References
(Blocks 2 open bugs)
Details
(Whiteboard: [domsecurity-backlog1])
Attachments
(1 obsolete file)
When embedding external resources it may happen that you get the following CSP error:
Security Error: Content at <website URL> may not load data from <resource URL>.
This happens, for example, when referencing an image inside an embedded SVG via the <use>
element.
I've attached a simplified test case. (Hopefully it works, will just know it once the bug is filed.)
Currently, there's no information what to do to fix this issue. I assume there are different circumstances this security issue can occur.
In the given case, I assume the object-src
or img-src
directive of the Content-Security-Policy
must be set properly.
For what it's worth, Chrome's message looks like this:
Unsafe attempt to load URL <resource URL> from frame with URL <website URL>. Domains, protocols and ports must match.
A little bit more informative, though not precise enough.
Sebastian
Reporter | ||
Comment 1•4 years ago
|
||
Hmm, the test case doesn't work unfortunately, though the issue is currently visible under https://www.gamepro.de.
The message says:
Security Error: Content at https://www.gamepro.de/ may not load data from https://static.cgames.de/gp_cb/assets/core/images/icons.svg.
The related code looks like this:
<svg id="header-ivwbrand" alt="Partner von GameStar">
<use xlink:href="https://static.cgames.de/gp_cb/assets/core/images/icons.svg#gs_logo"></use>
</svg>
Maybe someone can come up with a reduced test case for that.
Sebastian
Reporter | ||
Updated•4 years ago
|
Reporter | ||
Updated•4 years ago
|
Updated•4 years ago
|
Reporter | ||
Comment 2•4 years ago
|
||
Via an answer on Stack Overflow related to this issue I realized that CORS isn't specified for <use>
elements yet, though there's a request to add it, as well as some cross-origin modifiers for URLs in CSS.
Given that information, I think the solution for this should be two-fold. First, the message should provide some more detail for why the cross-origin request was blocked and try to provide some basic hint for what an author should do to fix this, if possible. Second, a [Learn more] link to MDN should be added like there is for other error messages, where this error message is explained in more detail, gives detailed information about possible solutions, and that refers to the spec. issues mentioned above.
Sebastian
Updated•4 years ago
|
Description
•