Security error with the new 0.161.0 security for PostCSS

support
1

Upgrading with 0.161.1 i get an error obviously related to new security in 0.161.0.
But despite reading and trying to understand the advice in the release doc, I just fail to understand what i have to do (in security.node permission I guess) :face_with_peeking_eye:

Any hint or advice welcome.

PS : hugo server doesn’t show this error, confirming relation with postcss process

panic: POSTCSS: failed to transform "/css/style.css" (text/css): Error: Access to this API has been restricted. Use --allow-fs-read to manage permissions.
            at Object.existsSync (node:fs:286:18)
            at isFile (/Users/didiergeorgieff/Documents/Git/osteo-timer/node_modules/browserslist/node.js:38:19)
            at /Users/didiergeorgieff/Documents/Git/osteo-timer/node_modules/browserslist/node.js:317:11
            at eachParent (/Users/didiergeorgieff/Documents/Git/osteo-timer/node_modules/browserslist/node.js:49:18)
            at Object.findConfig (/Users/didiergeorgieff/Documents/Git/osteo-timer/node_modules/browserslist/node.js:305:20)
            at browserslist.loadConfig (/Users/didiergeorgieff/Documents/Git/osteo-timer/node_modules/browserslist/node.js:223:37)
            at browserslist (/Users/didiergeorgieff/Documents/Git/osteo-timer/node_modules/browserslist/index.js:411:31)
            at Browsers.parse (/Users/didiergeorgieff/Documents/Git/osteo-timer/node_modules/autoprefixer/lib/browsers.js:54:12)
            at new Browsers (/Users/didiergeorgieff/Documents/Git/osteo-timer/node_modules/autoprefixer/lib/browsers.js:42:26)
            at loadPrefixes (/Users/didiergeorgieff/Documents/Git/osteo-timer/node_modules/autoprefixer/lib/autoprefixer.js:113:20) {
          code: 'ERR_ACCESS_DENIED',
          permission: 'FileSystemRead',
          resource: '/Users/didiergeorgieff/Documents/Git/package.json'
        }
2

Do you have a “security” section in your project configuration?
Or in your environment variables?

Check by running:

hugo config | grep security -A5
3

No. I had no security section.

I am trying to add one but i still get new errors (all security related)

````.browserslistrc
0.5%
last 2 versions
not dead

````

################################ SECURITY > v0.161.0 ########################

[security]

enableInlineShortcodes = true

[security.exec]

allow = [

“^(dart-)?sass(-embedded)?$”,

“^go$”,

“^git$”,

“^npx$”,

“^node$”,

“^postcss$”,

“^tailwindcss$”

]

osEnv = [

“(?i)^((HTTPS?|NO)_PROXY|PATH(EXT)?|APPDATA|TE?MP|TERM|GO\\w+|(XDG_CONFIG_)?HOME|USERPROFILE|SSH_AUTH_SOCK|DISPLAY|LANG|SYSTEMDRIVE|PROGRAMDATA)$”

]

[security.funcs]

getenv = [“^HUGO_”, “^CI$”]

[security.http]

methods = [“(?i)GET|POST”]

urls = [“.*”]

4

And I finally just got it working with this command (and the 2 modified files upper):

NODE_OPTIONS="--permission --allow-fs-read=/Users/didiergeorgieff/Documents/Git/osteo-timer --allow-fs-read=/Users/didiergeorgieff/Documents/Git" hugo server

But I am wondering if it is a dirty hack of will be our future ?
ANd also i hve to figure how to industrilize it for Netlify.

5

I don’t understand the formatting of your repsonse. For example, when I run hugo config | grep security -A5 I get this:

[security]
  [security.exec]
    allow = ['^(dart-)?sass(-embedded)?$', '^go$', '^git$', '^node$', '^postcss$', '^tailwindcss$']
    osenv = ['(?i)^((HTTPS?|NO)_PROXY|PATH(EXT)?|APPDATA|TE?MP|TERM|GO\w+|(XDG_CONFIG_)?HOME|USERPROFILE|SSH_AUTH_SOCK|DISPLAY|LANG|SYSTEMDRIVE|PROGRAMDATA)$']

  [security.funcs]
    getenv = ['^HUGO_', '^CI$']

  [security.http]
    methods = ['(?i)GET|POST']
    urls = ['(?i)^https?://[a-z]', '! (?i)localhost', '! @']

  [security.node]
    [security.node.permissions]
      allowaddons = ['tailwindcss']
      allowread = ['.']
      allowworker = ['tailwindcss']

I’m running v0.161.1.

6

Sorry for the misunderstanding from my side.

% hugo config | grep security -A5
[security]
enableinlineshortcodes = true

[security.exec]
allow = [‘^(dart-)?sass(-embedded)?$’, ‘^go$’, ‘^git$’, ‘^npx$’, ‘^node$’, ‘^postcss$’, ‘^tailwindcss$’]
osenv = [‘(?i)^((HTTPS?|NO)PROXY|PATH(EXT)?|APPDATA|TE?MP|TERM|GO\w+|(XDG_CONFIG)?HOME|USERPROFILE|SSH_AUTH_SOCK|DISPLAY|LANG|SYSTEMDRIVE|PROGRAMDATA)$’]

[security.funcs]
getenv = [‘^HUGO_’, ‘^CI$’]

[security.http]
methods = [‘(?i)GET|POST’]
urls = [‘.*’]

[security.node]
[security.node.permissions]
allowaddons = [‘tailwindcss’]
allowchildprocess = [‘tailwindcss’]
allowread = [‘.’]
allowworker = [‘tailwindcss’]
7

Are you running v0.161.0 or v0.161.1?

8

0.161.1

9

I don’t have an answer for you at the moment, but the quickest solution is to disable the Node.js permission model.

[security.node.permissions]
disable = true

I have a site that passes the CSS resource through PostCSS with this postcss.config.mjs config file:

import autoprefixer from 'autoprefixer';
import { purgeCSSPlugin } from '@fullhuman/postcss-purgecss';
const purgecss = purgeCSSPlugin({
  content: ['./hugo_stats.json'],
  defaultExtractor: content => {
    const els = JSON.parse(content).htmlElements;
    return [
      ...(els.tags || []),
      ...(els.classes || []),
      ...(els.ids || []),
    ];
  },
  // https://purgecss.com/safelisting.html
  safelist: {
    deep: [/.*tippy.*/, /^sup/]
  }
});

export default {
  plugins: [
    autoprefixer,
    process.env.HUGO_ENVIRONMENT !== 'development' ? purgecss : null
  ]
};

No problems, running on Ubuntu 24.04.

10

Yes. Thanks. This is the cleanest quick one.
I will try to make my head around this and post something if relevant. The doc is fine but not so easy to understand at first.

Anyway million thanks (again) for your incredible reactivity (and accuracy).

11

Can you post your PostCSS config file? Privately if you wish.

12

My best guess is that this is browserlist (used in autoprefixer); which walks up the tree (and outside of the Hugo project) to find the first browser config. I had a similar issue in a project I tested with, and if I remember correctly they have fixed this in a recent version of browserlist so it works better with Node’s permission model. Also, there should be a way to add a browserlist config to the project itself to avoid this.

13

I already had added a .browserslistrc
0.5%
last 2 versions
not dead

and done
npx update-browserslist-db@latest

Mmmmm. As you ask for PostCSS this site is a old one i wanted to update.
And strangely I use “{{- $css = $css | css.PostCSS $options}}” and have no PostCSS file.

And I have import “github.com/bep/hugo-starter-tailwind-basic/v2”, and use a “tailwind.config.js” file.

I just do not remember the rationale around this. may be the cause is in this half baked postcss/tailwind and my fault.

Will try to understand my choice digging in commits.