Content Security Policy violation with Bootstrap 5

Question

I have a site using Bootstrap 5 that includes the following input tag:

<input class="form-check-input ms-1" id="validated" name="validated" type="checkbox" checked>

The inclusion of the form-check-input class causes the client to generate the error message:

Refused to load the image 'data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10l3 3l6-6'/%3e%3c/svg%3e' because it violates the following Content Security Policy directive: "img-src 'self' www.w3.org".

Can someone please lend me a clue as to why this is being blocked? I have tried all the permutations of data://www.w3.org, http://www.w3.org, *.w3.org, etc., in the CSP and none seem to satisfy the client.

This happens identically with a Chrome and Edge client.

Dyslogistic

Answer 1

Bootstrap CSS stylesheet contains .form-check-input class with data:-Url images:

.form-check-input:checked[type=checkbox] {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10l3 3l6-6'/%3e%3c/svg%3e");
}
.form-check-input:checked[type=radio] {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='2' fill='%23fff'/%3e%3c/svg%3e");
}
.form-check-input[type=checkbox]:indeterminate {
  background-color: #0d6efd;
  border-color: #0d6efd;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10h8'/%3e%3c/svg%3e");
}

To allow these images you have to add data: scheme-source into img-src directive.

Cacao

Hello granty. could you give an example of the entry you are speaking about? Thanks. – Antifreeze

Mathias, my img-src declaration is now "img-src": [ "'self'", "data:" ] and it is working. – Dyslogistic

Answer 2

You can also extract the SVGs into separate files using Webpack. For example, see the official documentation at https://getbootstrap.com/docs/5.2/getting-started/webpack/#extracting-svg-files

modules.exports = {
  ...,
  module: {
    rules: [
      {
        mimetype: 'image/svg+xml',
        scheme: 'data',
        type: 'asset/resource',
        generator: {
          filename: 'icons/[hash].svg'
        }
      }
    ]
  }
};

Satiny

Answer 3

I wouldn't suggest to add data: to the img-src, since that likely makes the CSP less secure.

Rather, I suggest you

• download the icon's SVG from the official page
• then edit the CSS file and replace the url("data:image/svg+xml ..."); with url("/path/to/static/files/the-icon.svg")

This assumes that the CSP allows img-src 'self'.

Antietam