Replace data embed image with local file

[jacob-whitney]

Hello,

I'm using Lightbox2 v2.9.0 and have identified a Content Security Policy (CSP) error when loading my site on Firefox and Chrome. Lightbox2 uses a data embedded image for the .lb-nav anchor (line 94 in lightbox.css for current version 2.11.4). Without adding the data: directive to img-src in the CSP, the page blocks this image with the following error:

Content-Security-Policy: The page’s settings blocked the loading of a resource (img-src) at data:image/svg+xml;base64,PHN2ZyB4bWxucz… because it violates the following directive: “img-src...

Using the data: directive leaves sites open to XSS attacks and is recommended not to use by several sites, including W3C's CSP Level 3 Working Draft. See section 6:

In either case, developers SHOULD NOT include either unsafe-inline, or data: as valid sources in their policies. Both enable XSS attacks by allowing code to be included directly in the document itself; they are best avoided completely.

Can Lightbox2's data embedded image be replaced with a local image to avoid using the risky data: directive?

[bz-coro]

When quoting, it is advisable to keep the context of the quotation.

To mitigate the risk of cross-site scripting attacks, web developers SHOULD include directives that regulate sources of script and plugins. They can do so by including:

Both the [script-src](https://www.w3.org/TR/CSP3/#script-src) and [object-src](https://www.w3.org/TR/CSP3/#object-src) directives, or

a [default-src](https://www.w3.org/TR/CSP3/#default-src) directive

In either case, developers SHOULD NOT include either 'unsafe-inline', or data: as valid sources in their policies. Both enable XSS attacks by allowing code to be included directly in the document itself; they are best avoided completely.

There is no XSS risk when including images using data:.

Source: https://www.w3.org/TR/CSP3/#csp-directives