DEV Community: Wilson Gouanet

Full Stack Security Essentials: Preventing CSRF, Clickjacking, and Ensuring Content Integrity in JavaScript

Wilson Gouanet — Sun, 23 Feb 2025 12:42:03 +0000

In today’s web development landscape, security is more than a buzzword—it’s a necessity. As full stack developers, we face a wide range of threats, from backend vulnerabilities to client-side exploits. In this article, we’ll explore three critical areas of JavaScript security: CSRF, clickjacking, and content integrity. We’ll discuss what each threat entails and provide practical tips on preventing them from both Node.js and in the browser environment.

1. CSRF (Cross-Site Request Forgery)

What is CSRF?

CSRF is an attack where a malicious website tricks a users browser into performing unwanted actions on a trusted site where the user is authenticated. This can lead to unexpected changes, unauthorized transactions, or data exposure.

How to Prevent CSRF

On the Node.js (Server-Side) End

CSRF Tokens: Use middleware (e.g., tiny-csrf in Express.js) to generate unique tokens for each session or form submission. Verify these tokens on every state-changing request.

Example using Express.js with tiny-csrf:

npm install --save tiny-csrf express-session cookie-parser

  const express = require('express');
  const csurf = require('tiny-csrf');
  const cookieParser = require('cookie-parser');
  const session = require("express-session");

  const app = express();

  app.use(express.urlencoded({ extended: false })); 
  app.use(cookieParser("cookie-parser-secret"));
  app.use(session({ secret: "keyboard cat" }));
  // Order matters: above three must come first
  // Setup csurf protection
  const csrfProtection = csurf("123456789iamasecret987654321look");
  app.use(csrfProtection);

  app.get('/form', (req, res) => {
    // Get the csrf token from the methog injected by the middeware to the request object
    const csrfToken = req.csrfToken();
    // Token must be included in the rendered form
    res.send(`<form action="/process" method="POST">
                <input type="hidden" name="_csrf" value="${csrfToken}">
                <input type="text" name="data">
                <button type="submit">Submit</button>
              </form>`);
  });

  app.post('/process', (req, res) => {
    // Process the request only if CSRF token is valid
    res.send('Form data processed safely.');
  });

  app.listen(3000, () => console.log('Server running on http://localhost:3000'));

This example uses the module tiny-csrf, which provides minimalist CSRF protection. For scenarios that require more robust security, consider the following alternatives:

csrf-csrf: This module offers the essential components to implement CSRF protection using the Double Submit Cookie Pattern—a stateless approach.
csrf-sync: Designed for the Synchroniser Token Pattern, this alternative is particularly suited for session-based authentication and offers stateful CSRF protection.

Both options provide enhanced flexibility depending on your specific security requirements.

In the Browser (Client-Side)

SameSite Cookies: Set your cookies with the SameSite attribute to Lax or Strict to prevent them from being sent along with cross-domain requests.
Custom Headers: When making AJAX requests, include custom headers (like X-Requested-With) and validate them on the server to help identify legitimate requests.

2. Clickjacking

What is Clickjacking?

Clickjacking involves tricking a user into clicking on a disguised UI element, often hidden or overlaid by another element, which can lead to unintended actions like authorizing an action, sharing data, or even performing administrative tasks.

How to Prevent Clickjacking

X-Frame-Options Header: Use the X-Frame-Options HTTP header to control whether your content can be embedded in frames. Options include:
- DENY: Prevent all framing.
- SAMEORIGIN: Allow framing only from the same origin.

Example in Express.js:

  app.use((req, res, next) => {
    res.setHeader('X-Frame-Options', 'SAMEORIGIN');
    next();
  });

Content Security Policy (CSP): Use the frame-ancestors directive in your CSP headers to control what domains can embed your pages. For example:

  app.use((req, res, next) => {
    res.setHeader("Content-Security-Policy", "frame-ancestors 'self'");
    next();
  });

Frame Busting Scripts: While these can be implemented using JavaScript to “bust out” of frames, they are less reliable than server-side HTTP headers and should be used as a secondary measure.

3. Content Integrity

What is Content Integrity?

Content integrity ensures that the content served by your site (e.g., scripts, stylesheets) remains unchanged from its original, trusted source. This is crucial in preventing tampering and man-in-the-middle attacks, especially when using third-party resources.

Why We Should Add It

Trust: Users can trust that the data and code are coming from verified sources.
Security: Protect against situations where third-party content may be compromised.
Compliance: Meet security and compliance standards that require integrity assurances.

How to Implement Content Integrity

Subresource Integrity (SRI): SRI allows browsers to verify that files they fetch (like JavaScript libraries) are delivered without unexpected manipulation. It involves including a cryptographic hash attribute in the HTML tag linking the resource.

Example:

  <script src="https://example.com/library.js"
          integrity="sha384-oqVuAfXRKap7fdgcCY5uykM6+R9Wu0g6a3JmGDXVbDt+u6p1mCA/t9zqXQGHbQ8c"
          crossorigin="anonymous"></script>

CSP Hashes: When inline scripts are necessary, you can use CSP hashes to specify the expected hash of the script contents, ensuring that only approved code executes.

Conclusion

Incorporating solid security practices into your JavaScript applications is not optional—it’s fundamental. By understanding the risks associated with CSRF, clickjacking, and the importance of content integrity, you can implement robust measures that safeguard both your application and its users.

Whether you’re tweaking your Node.js backend or reinforcing client-side defenses, these strategies help ensure that your applications remain secure in an increasingly hostile online environment. Security is a continuous journey—stay vigilant, keep your dependencies updated, and always be mindful of emerging threats.

Demystifying Disappearing Dropdowns: A Chrome Developer's Guide to Inspecting Volatile UI Elements

Wilson Gouanet — Tue, 12 Nov 2024 17:24:28 +0000

As web developers, we often encounter the frustrating scenario of trying to inspect dynamic UI elements, such as dropdowns, that seem to disappear the moment we try to interact with them.

Recently, I was working on an app that uses Material UI components, and I encountered this exact issue when trying to inspect an autocomplete dropdown. The problem was that the dropdown would vanish as soon as the document lost focus, making it nearly impossible to inspect using the standard Chrome DevTools.

However, there is a clever solution to this problem: the "Page Focus Emulation" feature in Chrome DevTools. By activating this feature, you can keep the dropdown visible and accessible for inspection, even when the document is not in focus.

Here's how it works:

Open the Chrome DevTools (You can find easy tips for that here).
Navigate to the "Rendering" tab in the DevTools panel, or click the :hov button on the action bar in Elements > Styles.
Check the Emulate a focused page checkbox.

Now you can freely interact with the dropdown and use the Chrome DevTools to inspect its structure, styles, and behavior.

How to use page focus emulation

It's important to note that the "Page Focus Emulation" feature is designed to help with debugging purposes only. Once you've completed your inspection, remember to disable this feature to ensure your web application behaves as expected in a real-world scenario.

By mastering this technique, you can overcome the challenges of inspecting disappearing UI elements and gain a deeper understanding of your web application's inner workings. Happy debugging!

Further exploration:

Mastering Chrome Developer Tools: Essential Tips for Front-End Developers

Wilson Gouanet — Sat, 02 Nov 2024 20:34:08 +0000

In today's tech landscape, JavaScript has emerged as one of the leading programming languages, consistently ranking among the top five most used and in-demand languages. It enables developers to build entire applications with ease. To effectively harness the power of JavaScript, every software developer should master the tools that provide insights into their applications. When issues arise or when you need to understand the behavior of your app, utilizing developer tools (DevTools) is essential. In this article, I will share valuable insights and tips I've discovered while working on numerous front-end applications.

1. Unlocking Efficiency: The Power of DevTools Shortcuts

As front-end developers, we frequently need to access our DevTools, and while opening them manually may seem quick, using keyboard shortcuts can save significant time over repeated use. By incorporating shortcuts into your workflow, you can work more efficiently and focus on what truly matters—building great applications. Here are some useful shortcuts to get you started. For a comprehensive list of shortcuts, you can refer to the official documentation here: Chrome DevTools Shortcuts.

Action	Mac	Windows / Linux
Open whatever panel you used last	Command+Option+I	F12 or Control+Shift+I
Open the Console panel	Command+Option+J	Control+Shift+J
Open the Elements panel	Command+Shift+C or Command+Option+C	Control+Shift+C

2. The Console Can Appear on Every Tab, Not Just the Console Tab

Sometimes, you may want to access the console to execute commands or monitor logs without switching to the Console tab. Fortunately, you can do this from any tab in DevTools. Simply press the Esc key to bring up the console, allowing you to interact with it seamlessly while working in other panels. The following image illustrates a case where the Console appears under the Elements tab.

Console under the Elements tab

3.You Can Get the Computed Style Value of Every Element—and Filter Them

In the Elements tab, instead of scrolling through each group of properties, you can use the Computed Styles section to quickly determine the current value of any property you are interested in.

In the following image, you can see that when inspecting an element under the Elements tab, selecting the Computed sub-tab provides an overview of the layout (0) of that element, including its border, margin, padding, and inner size. You can also filter (1) the CSS properties to find the value of a specific property. These properties may appear grouped (2), and you have the option to display all properties (3), including user agent default values (which appear semi-transparent in the list) and properties that have been overridden by your app’s code (which appear opaque).

Computed styles in Elements tab

4. Never Lose a Log: Preserving Your Console and Network Logs

In some cases, you may want to preserve logs when reloading the app or navigating away, whether to see what happens before users leave the app or for other use cases. To achieve this, both the Network and Console tabs have a "Preserve logs" checkbox that you can enable. Once checked, your logs will be preserved.

In the Network tab, the "Preserve logs" checkbox is located on the toolbar beneath the tabs.

Preserve network logs

For the Console tab, you first need to click on the gear icon (cog) in the top left corner, just below the close button. This will reveal a list where you can find the checkbox to preserve logs, as shown in the accompanying image.

Preserve console logs

5. You Don't Need to Use Console.log All the Time

Sometimes, you may want to log a value that changes frequently in your console. A common approach is to use console.log directly in your code, allowing you to see the latest value with each change. However, this method can be limiting, as some value changes do not trigger any events.

Fortunately, there is a powerful tool that allows you to watch the result of an expression directly in your Chrome console: it’s called “Live Expression.” To create a live expression, simply navigate to the Console tab and click on the eye button. You can then enter any expression, and every time the evaluation of that expression changes, the updated value will appear in your console under the live expression. You can see an example in the following video.

Conclusion

In summary, mastering Chrome Developer Tools can significantly enhance your front-end development experience. From utilizing shortcuts to leveraging features like Live Expressions, these tools can streamline your workflow and improve your debugging process. I’d love to hear about your experiences with Chrome DevTools! Please leave a comment below sharing your tips, tricks, or any challenges you've faced. Let’s learn from each other and continue to grow as developers!

DEV Community: Wilson Gouanet

Full Stack Security Essentials: Preventing CSRF, Clickjacking, and Ensuring Content Integrity in JavaScript

1. CSRF (Cross-Site Request Forgery)

What is CSRF?

How to Prevent CSRF

On the Node.js (Server-Side) End

In the Browser (Client-Side)

2. Clickjacking

What is Clickjacking?

How to Prevent Clickjacking

3. Content Integrity

What is Content Integrity?

Why We Should Add It

How to Implement Content Integrity

Conclusion

Further readings

Demystifying Disappearing Dropdowns: A Chrome Developer's Guide to Inspecting Volatile UI Elements

Further exploration:

Mastering Chrome Developer Tools: Essential Tips for Front-End Developers

1. Unlocking Efficiency: The Power of DevTools Shortcuts

2. The Console Can Appear on Every Tab, Not Just the Console Tab

3.You Can Get the Computed Style Value of Every Element—and Filter Them

4. Never Lose a Log: Preserving Your Console and Network Logs

5. You Don't Need to Use Console.log All the Time

Conclusion