search

Baroshem / nuxt-security

🛡 Automatically configure your app to follow OWASP security patterns and principles by using HTTP Headers and Middleware
https://nuxt-security.vercel.app/
MIT License
810 stars 56 forks source link

Parser error in combination with @nuxtjs/html-validator module #337

Closed OmnomnomTee closed 7 months ago

OmnomnomTee commented 9 months ago

Version

nuxt-security: v1.0.0 nuxt: v3.9.0 @nuxtjs/html-validator: v1.6.0

Reproduction Link

Default nuxt project with nuxt-security and @nuxtjs/html-validator modules, available on stackblitz.

https://stackblitz.com/edit/nuxt-security-html-validator-bug?file=nuxt.config.ts

Steps to reproduce

  1. Create default nuxt project
  2. Add @nuxtjs/html-validator module
  3. Add nuxt-security module
  4. Run the project in dev mode or build it for prod -> error in console

What is Expected?

Project builds without errors, when enabling the nuxt-security module.

What is actually happening?

Getting a html-validator error, when the module is activated.

HTML validation errors found for /

inline
  11:201  error  failed to tokenize "=\"\"><div c...", expected attribute, ">" or "/>"  parser-error
Baroshem commented 9 months ago

Hey buddy,

Thanks for reporting this issue. I have tried to reproduce it at first but couldn't make this bug appear but instead I was getting issues like:

HTML validation errors found for /

inline
  2:2  warning  <html> is missing required "lang" attribute  element-required-attributes
  3:2  error    <head> element must have <title> as content  element-required-content

✖ 2 problems (1 error, 1 warning)

More information:
  https://html-validate.org/rules/element-required-attributes.html
  https://html-validate.org/rules/element-required-content.html

Which looks correct as my app only contained a string: Check out the browser network tab to see what Response Headers has been set for you by nuxt-security module.

Then I looked at your code and realised that you are using NuxtWelcome component instead of some text. If I put this component there instead, I can reproduce this error.

Not sure however how to solve this problem as this NuxtWelcome component comes from Nuxt and serves as a Hello World example.

Are you experiencing this issue in any other example?

vejja commented 9 months ago

It looks like Cheerio is modifying Vue data-v-... tags to data-v-...="", and @nuxtjs/html-validator complains about this. This is absolutely valid HTML though, I do not understand why html-validator has a parser issue with this. Is there a way you can setup html-validator to not complain about empty string attributes ?

OmnomnomTee commented 9 months ago

Thanks for the fast reply!

@Baroshem I am currently using both modules for the rewrite of my portfolio website, but it is not open source yet, which is why I created the minimal project on Stackblitz. I will open source the repo sometime this week, as I am also having another issue regarding the Vercel build pipeline and the nuxt-security module.

@vejja Thanks for the hint regarding Cheerio. I will take a look at the @nuxtjs/html-validator configuration options. Apparently it uses html-validate under the hood. The configuration options can be found here: https://html-validate.org/rules/index.html

I will report back when i know more.

Baroshem commented 9 months ago

Hey @OmnomnomTee

Thanks for the reply, let us know once you will have more details.

Also, thanks @vejja for hints :)

OmnomnomTee commented 8 months ago

Just a brief update, disabling the html-validate rules did not address the issue. I am currently taking a deeper look, but have not as much time as I would want. Will keep you posted.

Baroshem commented 8 months ago

Ok no worries. Let us know if we can help somehow and with the further progress on this :)

Baroshem commented 8 months ago

@OmnomnomTee

Any progress? :)

Baroshem commented 7 months ago

Closing the issue. If it will be needed, please do not hesitate to reopen it and provide additional details so that we can help :)