postcss-url causes CSP valolation when url is set to 'inline'

Open
#182 0 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Assessment

Difficulty
4/5
Estimated time
3-5 days
Newbie friendliness
38/100
Issue type
Bug
Clarity
Needs clarification
Activity status
Stale
Tech stack
javascript
Domain
build-system

Research direction

Start with the provided PostCSS configuration, especially the postcss-url setting url: "inline", and compare development output with the built main.195fbc3377ced840.js under the reported Content Security Policy. Reproduce the browser violation and determine what behavior is expected when assets are embedded; done means the built output no longer triggers the reported CSP error.

Written by the indexing model from the issue text.

Description

I want to embed my font and image files into my js file using postcss-url.
Here is my postcss config:

module.exports = {
    plugins: {
        tailwindcss: {
            config: join(__dirname, 'tailwind.config.js'),
        },
        autoprefixer: {},
        cssnano: {},
        'postcss-import': {},
        'postcss-url': {
            url: "inline",
            maxSize: 128 * 1024,
            useHash: true,
        }
    },
};

Everything works fine in development mode. But when I moved built files to the server, I faced this error in browser:

main.195fbc3377ced840.js:2 Refused to apply inline style because it violates the following Content Security Policy directive: "default-src 'self'". Either the 'unsafe-inline' keyword, a hash ('sha256-47DEQpj8HBSa+/TImW+5JCeuQeRkm5NMpJWZG3hSuFU='), or a nonce ('nonce-...') is required to enable inline execution. Note also that 'style-src' was not explicitly set, so 'default-src' is used as a fallback.
Dominant language
JavaScript
Stars
383
Forks
58
No merged PRs in 30d

Contributor guide

No contributing guide indexed for this repository

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

More from postcss/postcss-url

All issues in postcss/postcss-url

Similar issues

More JavaScript issues

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.