Add CSP URLs to the docs & more details for other CSP implementation methods

[9mido]

#32832

#25394

PR 32832 provides a section for CSP in the docs but it is lacking CSP URLs developers could plug into their code to enable bootstrap assets.

For anybody who wants to see the results of that documentation PR 32832 here is the online version:

https://getbootstrap.com/docs/5.0/customize/overview/#csps-and-embedded-svgs

With this documentation PR 32832 there is no reference to CSP URLs that you can plug into your CSP configurations or where in the CSP configurations to put them (script-src, frame-src, etc). You are just linking to the code documentation page for each element?

I was hoping bootstrap could provide something like this:

https://content-security-policy.com/examples/

https://stripe.com/docs/security/guide#content-security-policy

https://developers.google.com/recaptcha/docs/faq#im-using-content-security-policy-csp-on-my-website.-how-can-i-configure-it-to-work-with-recaptcha

Using bootstrap provided CSP URLs and plugging them in is much easier than locally hosted assets, inline images, etc. CSP provided URLs is by far the easiest and quickest way to get CSP protection for your site.

Following what Stripe and Google does in this case is a best practice by providing bootstrap provided CSP URLs to the public to handle the assets for you.

I wouldn't know where to begin on where to actually download the images/svgs from and then figure out where to put them locally and then how to reference them in my code. There is no guidance for how to do that in the current docs. Maybe add more details for developers who may want to reference them locally or provide more details on some of the other methods like inline images in addition to using bootstrap provided CSP URLs. Because some developers might want to change the colors of the assets or change the asset images altogether or something.

[9mido]

@mdo @XhmikosR and @ffoodd

Can the v5 label also be added to this issue? Now that bootsrap v5 is released, can this be added fairly soon?

[chrisreddington]

Just to add, I identified this thread from the PR 32832 - I'm encountering this CSP challenge with the Navbar Hamburger Icon. Would love to see something like this, which is a little more prescriptive on the options to resolve.

[charlesroelli]

Webpack 5 can emit Bootstrap's inline SVGs as files, with something like the following in webpack.config.js (tested with css-loader, postcss-loader and sass-loader active):

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

Could something like this go in the docs? Cf. #25394

EDIT: Add mime type, link relevant issue

[ffoodd]

@scallywag For sure, I think it solves the CSP issue so that's good to know. 👌

[DirkRaeder-KDO]

Is there something similar to this for ViteJS / Rollup? A quick look through the config and plugins didn't reveal anything.

[chrischu]

Can someone provide a full example of the Webpack code? I'm not sure I understand it correctly.

I tried to add the code like this:

gulp.task("min:css",
  gulp.series(["sass"], function () {
    var minCss = gulp.src(cssInputFiles)
      .pipe(sort(orderByFileNameWithoutExtension(".scss.css")))
      .pipe(debug())
      .pipe(concat(cssOutputFile))
      .pipe(cleanCSS({ compatibility: "ie8" }))
      .pipe(gulp.dest("."))
      .pipe(merge())
      .pipe(debug())
      .pipe(webpack({
        module: {
          rules: [
            {
              use: ["style-loader", "css-loader", "post-css-loader", "sass-loader"],
              mimetype: "image/svg+xml",
              scheme: "data",
              type: "asset/resource",
              generator: {
                filename: "wwwroot/images/bootstrapsvg"
              }
            }
          ]
        }
      }));
    return minCss;
  }));

[charlesroelli]

@chrischu I've set up a sample repo using webpack at https://github.com/charlesroelli/bootstrap-webpack-csp-compat-config, see its webpack.config.js. The output, including the extracted SVGs, is in dist/.