Allow custom prefix instead of q- for css classes (for built-in components, not custom)

  • Basically, if I have something like $ClassPrefix set, all the built-in components will use that as the prefix instead of q- so instead of class="q-btn" the result will be class="mysite-btn" after using the q-btn component.

  • Can you expand upon the usefulness of this please? I’m personally not seeing it. 😁


  • Because sometimes its easier to exploit sites when the selectors are predictable or the framework used is obvious… as a security measure, before I starting using frameworks I’d make the server change the prefix at random times or every time I restart the server/servers

  • Security through obscurity is not security.

    Security experts have rejected this view as far back as 1851, and advise that obscurity should never be the only security mechanism.

    Of the frameworks out there, Quasar is one of the safest, because security is taken very seriously. I’d venture to say, your own code will probably be more vulnerable than Quasar ever will be.


  • @s-molinari I believe you misunderstood my message… I believe its best if I ask “How can I get class names to be things like _8Rm4L instead of q-field__native like when I am using react?”

  • You said, “it’s easier to exploit sites when the selectors are predictable or the framework used is obvious”. It’s a fallacy to think renaming classes will get you better security.


  • The attack I speak of is something I’ve done to my friends in high school by letting them install my emoji extension for chrome and the only way to prevent it is to have obfuscated classes and ids

  • Is it possible to get quasar/vue class names to be things like _8Qm7L instead of q-field__native like when I am using react?

  • So, are you saying, Quasar is going to put in a back door or some other security leak and you want to make sure Quasar doesn’t notice you are using Quasar to avoid Quasar hacking into your site? That’s ridiculous. Sorry, your reasoning on “hiding” a possible attack vector makes no sense.

    And where does React obfuscate its CSS naming automatically? It doesn’t. So, stop saying that. And, if you have gotten React (or rather Webpack) to obfuscate CSS class names, then you should have the knowledge to do the same with Vue/ Quasar.

    I don’t have an answer for you, as long as you keep saying renaming the CSS is for security reasons. I won’t offer you something under the pretense of better security, when in fact, it would be far from being more secure.


  • Again, you misunderstood what I was saying. Its not about Quasar specifically, its about IDs and classes. I only mentioned Quasar because its the perfect framework to me (not joking) so I assumed it had something built in to achieve what I want to achieve.

    I didn’t say React obfuscate its CSS naming automatically

    Facebook and Google does it using a minification process

    Let me give an example of one of the attacks my chrome extension did…

    I added the class for the selector of the yahoo mail recipient field and the send button to the script which then (in less than a second) adds my “capture” email address to the field when my friends press send then removes it from the field within that sub-second… this allowed me to get a copy of their emails… if it was a case where yahoo changed the css selectors automatically at random times the script in my extension would be void after a while… this same approach could be used to steal credit card info and passwords by having a dictionary of common css selectors for these fields… obfuscation would make this harder

  • I know how this could be achieved by making a few changes to quasar, i could’ve forked it and do it but I want to check if its built in since so far everything else I needed seemed to have been built into quasar.

Log in to reply