I am writing a shopping cart component is react and my boss says i shouldn't use css in html cause it can be hacked. If he had said good coding practice i would have understood that, but i just dont see how someone inspecting and seeing css in the html code will let them hack into it, to top it off I am using material UI and there's no pure css styling, just props, and forgive me if i'm wrong but i don't think MUI lets people see the props of components in the inspect from what i've seen. So why does he have that logic.

CodePudding user response：

1. No a website cannot be hacked with/by CSS
2. Yes, its best practice to keep the styling code in either an external script, or rather when building the component using the style prop on the element. like

jsx

import { styles } from './mycss.css';
function app(){
    return (<div className={styles.mycomponent}>
        content here
    </div>);
}

css

.mycomponent {
   display: block;
   background: red;
}

note

The only thing an outsider can do is temporary change what is displayed on their browser on their machine only.

CodePudding user response：

Yes and no. Yes because, even if it it is exceedingly rare, CSS3 can be a target of an exploit, allowing educated users to access unwanted certain elements. The same with insecure usage of CSS selectors. However, no because keeping CSS elements on a different file will not prevent this, there can be other preventative measures.

Though, of course, it doesn't go without saying it is best practice to keep your CSS files and HTML files separate.

Further reading:
Example of an old CSS exploit: https://www.evonide.com/side-channel-attacking-browsers-through-css3-features/
How to be secure your CSS Selectors: https://cheatsheetseries.owasp.org/cheatsheets/Securing_Cascading_Style_Sheets_Cheat_Sheet.html