{"id":6445,"date":"2020-07-29T18:10:46","date_gmt":"2020-07-29T18:10:46","guid":{"rendered":"http:\/\/www.glajumedia.com\/en\/?p=6445"},"modified":"2022-03-22T22:04:37","modified_gmt":"2022-03-22T22:04:37","slug":"6-security-tips-for-frontend","status":"publish","type":"post","link":"https:\/\/www.gmedia.la\/en\/6-security-tips-for-frontend\/","title":{"rendered":"6 Security Tips for Frontend"},"content":{"rendered":"<p><span style=\"font-weight: 400;\">Sometimes frontend developers forget about web security. Thinking about the quality of a website, you usually look at metrics such as performance, SEO, and accessibility. However, the web site\u2019s capacity to repel malicious attacks usually falls under the radar. Significant measures need to be taken since backend and frontend are responsible for securing data that both of them share. Even when sensitive data is safely locked in a backend, the frontend holds the main entries.&nbsp;<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Many malicious users can compromise your frontend application, but we can minimize the risks. You can take some measures from these attacks by following better development practices. This article will cover 6 easy ways to improve the protection of your web application.&nbsp;<\/span><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-6453\" src=\"https:\/\/www.gmedia.la\/wp-content\/uploads\/2020\/07\/front-end-development-flat_107173-16796-1.jpg\" alt=\"\" width=\"558\" height=\"372\" srcset=\"https:\/\/www.gmedia.la\/wp-content\/uploads\/2020\/07\/front-end-development-flat_107173-16796-1.jpg 558w, https:\/\/www.gmedia.la\/wp-content\/uploads\/2020\/07\/front-end-development-flat_107173-16796-1-480x320.jpg 480w\" sizes=\"(min-width: 0px) and (max-width: 480px) 480px, (min-width: 481px) 558px, 100vw\" \/><\/p>\n<h2>6 SECURITY TIPS<\/h2>\n<ul>\n<li>\n<h3><span style=\"font-weight: 400;\">Powerful content security policy (CSP)<\/span><\/h3>\n<\/li>\n<\/ul>\n<p><span style=\"font-weight: 400;\">Have you ever ask yourself if you should trust everything that the server sends? You must always put a strong Content-Security-Policy HTTP header. This will only allow some trusted content to be elaborated on the browser. CSP can detect attacks such as cross-site scripting (XSS) and clickjacking<\/span><\/p>\n<p>With a <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/HTTP\/Headers\/Content-Security-Policy\" target=\"_blank\" rel=\"noopener\">strong CSP<\/a>, you can be able to remove potentially malicious code execution and restrict the domain while external resources are loaded. Also, applications trust only the scripts from<code>apis.xyz.com<\/code>, <code>self<\/code>, and some others.<\/p>\n<ul>\n<li>\n<h3><span style=\"font-weight: 400;\">Take XSS protection mode<\/span><\/h3>\n<\/li>\n<\/ul>\n<p><span style=\"font-weight: 400;\">When malicious code gets introduce from user input, this can be blocked by supplying&nbsp; <\/span><code><span style=\"font-weight: 400;\">\"X-XSS-Protection\": \"1; mode=block\"<\/span><\/code><span style=\"font-weight: 400;\">header.<\/span> <span style=\"font-weight: 400;\">For example, you want to address users by their names linked them through marketing emails. James Hall, director of Parallax, suggests adding <\/span><code><span style=\"font-weight: 400;\">?name=James<\/span><span style=\"font-weight: 400;\">&nbsp; <\/span><\/code><span style=\"font-weight: 400;\">into the query string and next add to the DOM.&nbsp;<\/span><\/p>\n<ul>\n<li>\n<h3><span style=\"font-weight: 400;\">Trusted Types<\/span><\/h3>\n<\/li>\n<\/ul>\n<p><span style=\"font-weight: 400;\">Modern front-end frameworks such as Angular or React are not totally immune to XSS attacks. Liran Tal, a member of the Node.js Security Working Group, recommends <\/span><a href=\"https:\/\/github.com\/w3c\/webappsec-trusted-types\" target=\"_blank\" rel=\"noopener\"><span style=\"font-weight: 400;\">trusted types <\/span><\/a><span style=\"font-weight: 400;\">to go through XSS issues. This will be leveraging the Content Security Policy that is used with sensitive APIs such as <\/span><span style=\"font-weight: 400;\"><code>innerHTML<\/code>.<\/span><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-6448\" src=\"https:\/\/www.gmedia.la\/wp-content\/uploads\/2020\/07\/787-7877257_illustration-web-design-frontend-hd-png-download.png\" alt=\"\" width=\"481\" height=\"378\" srcset=\"https:\/\/www.gmedia.la\/wp-content\/uploads\/2020\/07\/787-7877257_illustration-web-design-frontend-hd-png-download.png 481w, https:\/\/www.gmedia.la\/wp-content\/uploads\/2020\/07\/787-7877257_illustration-web-design-frontend-hd-png-download-480x377.png 480w\" sizes=\"(min-width: 0px) and (max-width: 480px) 480px, (min-width: 481px) 481px, 100vw\" \/><\/p>\n<ul>\n<li>\n<h3><span style=\"font-weight: 400;\">Prevent Clickjacking attacks<\/span><\/h3>\n<\/li>\n<\/ul>\n<p><span style=\"font-weight: 400;\">Clickjacking is an attack where a user is a trick to click on a webpage or an element that are not part of the site. This will cause users to unwittingly provide credentials or sensitive information, download malware, purchase a product online, or transfer money. Therefore, you can protect against this attack with the <\/span><code><span style=\"font-weight: 400;\">X-Frame-Options<\/span><\/code><span style=\"font-weight: 400;\">header.&nbsp;<\/span><\/p>\n<ul>\n<li>\n<h3><span style=\"font-weight: 400;\">UI frameworks<\/span><\/h3>\n<\/li>\n<\/ul>\n<p><span style=\"font-weight: 400;\">With a UI framework such as React, Vue, and Angular have built strong security. In fact, they have a large chance to eliminate the risks of XSS attacks. Automatically, a encode HTML output reduces the necessity to use XSS-susceptible DOM APIs. Thus, you start given unambiguous names to potentially dangerous methods such as <\/span><span style=\"font-weight: 400;\"><code>dangerouslySetInnerHTML<\/code>.&nbsp;<\/span><\/p>\n<ul>\n<li>\n<h3><span style=\"font-weight: 400;\">Be careful with Google tag Manager<\/span><\/h3>\n<\/li>\n<\/ul>\n<p><span style=\"font-weight: 400;\">By using Google Tag Manager, you can add the latest tracking scripts, support chatbot, and Hotjar for user analytics. However, if your Google account gets hacked,&nbsp; any arbitrary can be added to JavaScript to your website. For example, your users off to a fake payment page to complete their order and sends the money to somewhere else.&nbsp;<\/span><\/p>\n<h2>CONCLUSION<\/h2>\n<p><span style=\"font-weight: 400;\">Nowadays, security has become a top priority for many businesses. These malicious attacks can occur to large or small sites. You need to take care of customer data since errors might happen when deploying a website or app. Customers have higher expectations about the safety of their information. With these 6 security tips for frontend, you can secure and reduce vulnerabilities because it will create a trust to your clients.&nbsp;<\/span><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-6457\" src=\"http:\/\/www.glajumedia.com\/en\/wp-content\/uploads\/2020\/07\/Cybersecurity.jpg\" alt=\"\" width=\"408\" height=\"232\" srcset=\"https:\/\/www.gmedia.la\/en\/wp-content\/uploads\/2020\/07\/Cybersecurity.jpg 555w, https:\/\/www.gmedia.la\/en\/wp-content\/uploads\/2020\/07\/Cybersecurity-300x171.jpg 300w, https:\/\/www.gmedia.la\/en\/wp-content\/uploads\/2020\/07\/Cybersecurity-480x273.jpg 480w\" sizes=\"(max-width: 408px) 100vw, 408px\" \/><\/p>\n<p><span style=\"font-weight: 400;\">Get more opportunities for your business in this era of technology, <a href=\"http:\/\/www.glajumedia.com\/en\/\" target=\"_blank\" rel=\"noopener\">Glajumedia<\/a> has the experience, knowledge, and top practices about frontend security and many others.<\/span><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Sometimes frontend developers forget about web security. Thinking about the quality of a website, you usually look at metrics such as performance, SEO, and accessibility&#8230;<\/p>\n","protected":false},"author":1,"featured_media":6465,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_et_pb_use_builder":"","_et_pb_old_content":"","_et_gb_content_width":"","footnotes":""},"categories":[39],"tags":[180,179,178,181],"class_list":["post-6445","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-category-more","tag-frontend-security","tag-security-online","tag-security-tips","tag-tips-for-frontend"],"_links":{"self":[{"href":"https:\/\/www.gmedia.la\/en\/wp-json\/wp\/v2\/posts\/6445","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.gmedia.la\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.gmedia.la\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.gmedia.la\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.gmedia.la\/en\/wp-json\/wp\/v2\/comments?post=6445"}],"version-history":[{"count":0,"href":"https:\/\/www.gmedia.la\/en\/wp-json\/wp\/v2\/posts\/6445\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.gmedia.la\/en\/wp-json\/wp\/v2\/media\/6465"}],"wp:attachment":[{"href":"https:\/\/www.gmedia.la\/en\/wp-json\/wp\/v2\/media?parent=6445"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.gmedia.la\/en\/wp-json\/wp\/v2\/categories?post=6445"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.gmedia.la\/en\/wp-json\/wp\/v2\/tags?post=6445"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}