search

runjuu / html-inline-css-webpack-plugin

☄️ A webpack plugin to convert external stylesheets into embedded stylesheets
https://www.npmjs.com/package/html-inline-css-webpack-plugin
MIT License
80 stars 22 forks source link

Conflict with html-inline-css-webpack-plugin and csp-html-plugin-webpack-plugin #56

Open warnyul opened 1 day ago

warnyul commented 1 day ago

Description

When html-inline-css-webpack-plugin is used alongside csp-html-plugin-webpack-plugin, the CSP plugin generates invalid hash values in the content security policy. This issue does not occur when html-inline-css-webpack-plugin is not used.

Steps to Reproduce

  1. Clone the reproduction repository (csp branch): Reproduction repository.
  2. Install dependencies and build the project: npm i && npm run build.
  3. Examine the generated CSP hashes in the built HTML files. Alternatively, view the deployed site for reference: Deployed site.

Expected Behaviour

The csp-html-plugin-webpack-plugin should generate valid CSP hashes regardless of the use of html-inline-css-webpack-plugin.

Actual Behaviour

When html-inline-css-webpack-plugin is used, the hashes generated by the CSP plugin are invalid and do not match the content in the HTML.

Environment

html-inline-css-webpack-plugin: 1.11.2 csp-html-plugin-webpack-plugin: 5.1.0 Webpack: 5.96.1 Node.js: 22.10.0 OS: macOs Sequoia 15.0.1 (24A348), Ubuntu 24.04

warnyul commented 3 hours ago

It seems that removing the following SCSS definitions resolves the issue. With these definitions removed, the CSP plugin and the inline CSS plugin use the same CSS, resulting correct hashes:

> * {
   // style definition
}