Increasingly, we rely on digital devices to manage our shopping, banking, and overall communications. It goes without saying that it’s our responsibility as designers and front end developers to help protect customers from scams and security issues, just as much as it is for backend developers.
Whether you’re developing an ecommerce site (and Shopify looks after the vast majority of the risk) or a different kind of online experience, there are many pitfalls you need to be aware of. For this article we interviewed seven security experts to find out about the most common front end vulnerabilities, and what you can do to mitigate risks and avoid getting hacked.
Grow your business with the Shopify Partner Program
Whether you offer marketing, customization, or web design and development services, the Shopify Partner Program will set you up for success. Join for free and access revenue share opportunities, tools to grow your business, and a passionate commerce community.
Sign up1. Security must be part of the development process
Lately, there’s been a lot of buzz about front end performance in the community. It made software engineerBenedek Gagyirealize how similar it is to security.
“I keep nodding when I hear statements like ‘you have to add it to your process as early as possible’, or ‘the strongest force opposing your efforts is developer convenience’, since they are equally true both for performance and security,” he explains. “It’s obviously possible to fix all the security-related bugs and holes later in the development lifecycle, but it’s considerably harder and more expensive. That’s why addingthreat modelling sessionsand regular security reviews is vital to any bigger development step, entailing that security is there by design, not just as a patch.”
Benedek points out that while awareness is important, there should be more talk about the actual developer experience.
“I expect to see far fewer security bugs in software that’s written using libraries and frameworks that make writing secure software easy. It’s trivial, right? A good example in the front end world is how the big frameworks let you know if you are opening yourself up for a cross-site scripting (XSS) attack by giving risky operations names likedangerouslySetInnerHTMLin React or thebypassSecurityTrustAPIs in Angular.”
2. Use a modern framework that handles security automatically
JavaScript frameworks have become an essential part of modern web development. Most sites now seem to be built around a framework likeReact,Vue, orAngular。From a security point of view, they offer significant benefits.
“The reincarnation of the Angular framework is a perfect example,” saysPhilippe De Ryck, founder and secure coding instructor atPragmatic Web Security。“角自动防止variety of XSS attack vectors. It offers automatic encoding for simple outputs through {{}}. When usinginnerHTML, Angular automatically sanitizes the output. When using variable URLs or CSS, Angular also automatically ensures the values are safe to be used in this context.”
Other frameworks offer similar protections, but according to Philippe they’re not as extensive. Still, using any modern framework significantly reduces the risks a developer needs to be aware of to mitigate XSS attacks.
You might also like:Web Security Fundamentals: What Every Developer Should Know。
3. Avoid typical XSS mistakes
While much less common when using modern JavaScript frameworks, it’s still possible to code in inadvertent XSS flaws into your front end.
“Let’s say we wanted to address a user by their name by linking to them from a marketing email,”James Hall,可怕的ctor of digital innovation agencyParallax, suggests. “Adding?name=Jamesto the query string, and then simply adding that to the DOM, would be a quick way to do it.”
For example:
document.querySelector('.tagline').innerHTML = nameFromQueryStringJames warns that using code like the above, however, means anyone can inject code into your site and take over. He cautions that just by changing the name to
11. HTML encoding is not enough
Ilya Verbitskiy, co-founder of WebStoating, an agency helping companies to create a successful online business, recommends paying special attention to HTML encoding.
“It works well if a user’s input is placed within an HTML tag, for example