$ function validateEmail(email) { const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/; if (!emailRegex.test(email)) { alert("Invalid email format."); return false; } return true;
} // Example usage with a form input
const emailInput = document.getElementById('email');
emailInput.addEventListener('blur', () => { validateEmail(emailInput.value);
});
function validateEmail(email) { const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/; if (!emailRegex.test(email)) { alert("Invalid email format."); return false; } return true;
} // Example usage with a form input
const emailInput = document.getElementById('email');
emailInput.addEventListener('blur', () => { validateEmail(emailInput.value);
});
function validateEmail(email) { const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/; if (!emailRegex.test(email)) { alert("Invalid email format."); return false; } return true;
} // Example usage with a form input
const emailInput = document.getElementById('email');
emailInput.addEventListener('blur', () => { validateEmail(emailInput.value);
});
const express = require('express');
const { body, validationResult } = require('express-validator'); const app = express();
app.use(express.json()); app.post('/register', [ body('email').isEmail().normalizeEmail(), body('password').isLength({ min: 8 })
], (req, res) => { const errors = validationResult(req); if (!errors.isEmpty()) { return res.-weight: 500;">status(400).json({ errors: errors.array() }); } // Proceed with user registration res.send('User registered successfully!');
});
const express = require('express');
const { body, validationResult } = require('express-validator'); const app = express();
app.use(express.json()); app.post('/register', [ body('email').isEmail().normalizeEmail(), body('password').isLength({ min: 8 })
], (req, res) => { const errors = validationResult(req); if (!errors.isEmpty()) { return res.-weight: 500;">status(400).json({ errors: errors.array() }); } // Proceed with user registration res.send('User registered successfully!');
});
const express = require('express');
const { body, validationResult } = require('express-validator'); const app = express();
app.use(express.json()); app.post('/register', [ body('email').isEmail().normalizeEmail(), body('password').isLength({ min: 8 })
], (req, res) => { const errors = validationResult(req); if (!errors.isEmpty()) { return res.-weight: 500;">status(400).json({ errors: errors.array() }); } // Proceed with user registration res.send('User registered successfully!');
});
Content-Security-Policy: default-src 'self'; script-src 'self' https://trusted-cdn.com; object-src 'none'; base-uri 'self';
Content-Security-Policy: default-src 'self'; script-src 'self' https://trusted-cdn.com; object-src 'none'; base-uri 'self';
Content-Security-Policy: default-src 'self'; script-src 'self' https://trusted-cdn.com; object-src 'none'; base-uri 'self';
// BAD PRACTICE: Directly exposing an API key
const apiKey = "YOUR_SECRET_API_KEY";
fetch(`https://api.example.com/data?key=${apiKey}`) .then(response => response.json()) .then(data => console.log(data));
// BAD PRACTICE: Directly exposing an API key
const apiKey = "YOUR_SECRET_API_KEY";
fetch(`https://api.example.com/data?key=${apiKey}`) .then(response => response.json()) .then(data => console.log(data));
// BAD PRACTICE: Directly exposing an API key
const apiKey = "YOUR_SECRET_API_KEY";
fetch(`https://api.example.com/data?key=${apiKey}`) .then(response => response.json()) .then(data => console.log(data));
// Frontend (making a request to your own backend)
fetch('/api/secure-data') .then(response => response.json()) .then(data => console.log(data)); // Backend (Node.js example)
app.get('/api/secure-data', (req, res) => { const apiKey = process.env.EXTERNAL_API_KEY; // API key stored in environment variables fetch(`https://api.example.com/data?key=${apiKey}`) .then(apiRes => apiRes.json()) .then(data => res.json(data)) .catch(error => res.-weight: 500;">status(500).send('Error fetching data'));
});
// Frontend (making a request to your own backend)
fetch('/api/secure-data') .then(response => response.json()) .then(data => console.log(data)); // Backend (Node.js example)
app.get('/api/secure-data', (req, res) => { const apiKey = process.env.EXTERNAL_API_KEY; // API key stored in environment variables fetch(`https://api.example.com/data?key=${apiKey}`) .then(apiRes => apiRes.json()) .then(data => res.json(data)) .catch(error => res.-weight: 500;">status(500).send('Error fetching data'));
});
// Frontend (making a request to your own backend)
fetch('/api/secure-data') .then(response => response.json()) .then(data => console.log(data)); // Backend (Node.js example)
app.get('/api/secure-data', (req, res) => { const apiKey = process.env.EXTERNAL_API_KEY; // API key stored in environment variables fetch(`https://api.example.com/data?key=${apiKey}`) .then(apiRes => apiRes.json()) .then(data => res.json(data)) .catch(error => res.-weight: 500;">status(500).send('Error fetching data'));
});
const express = require('express');
const cookieParser = require('cookie-parser');
const csrf = require('csurf'); // Example CSRF library const app = express();
app.use(cookieParser());
app.use(csrf({ cookie: true })); // Initialize CSRF protection // Middleware to add CSRF token to response locals
app.use((req, res, next) => { res.locals.csrfToken = req.csrfToken(); next();
}); app.get('/transfer-funds', (req, res) => { res.render('transfer-form', { csrfToken: res.locals.csrfToken }); // Pass token to view
}); app.post('/transfer-funds', (req, res) => { // CSRF token is automatically validated by the csurf middleware // ... process transfer ... res.send('Funds transferred successfully!');
});
const express = require('express');
const cookieParser = require('cookie-parser');
const csrf = require('csurf'); // Example CSRF library const app = express();
app.use(cookieParser());
app.use(csrf({ cookie: true })); // Initialize CSRF protection // Middleware to add CSRF token to response locals
app.use((req, res, next) => { res.locals.csrfToken = req.csrfToken(); next();
}); app.get('/transfer-funds', (req, res) => { res.render('transfer-form', { csrfToken: res.locals.csrfToken }); // Pass token to view
}); app.post('/transfer-funds', (req, res) => { // CSRF token is automatically validated by the csurf middleware // ... process transfer ... res.send('Funds transferred successfully!');
});
const express = require('express');
const cookieParser = require('cookie-parser');
const csrf = require('csurf'); // Example CSRF library const app = express();
app.use(cookieParser());
app.use(csrf({ cookie: true })); // Initialize CSRF protection // Middleware to add CSRF token to response locals
app.use((req, res, next) => { res.locals.csrfToken = req.csrfToken(); next();
}); app.get('/transfer-funds', (req, res) => { res.render('transfer-form', { csrfToken: res.locals.csrfToken }); // Pass token to view
}); app.post('/transfer-funds', (req, res) => { // CSRF token is automatically validated by the csurf middleware // ... process transfer ... res.send('Funds transferred successfully!');
});
<form action="/transfer-funds" method="POST"> <input type="hidden" name="_csrf" value="{{ csrfToken }}"> <label for="amount">Amount:</label> <input type="number" id="amount" name="amount"> <button type="submit">Transfer</button>
</form>
<form action="/transfer-funds" method="POST"> <input type="hidden" name="_csrf" value="{{ csrfToken }}"> <label for="amount">Amount:</label> <input type="number" id="amount" name="amount"> <button type="submit">Transfer</button>
</form>
<form action="/transfer-funds" method="POST"> <input type="hidden" name="_csrf" value="{{ csrfToken }}"> <label for="amount">Amount:</label> <input type="number" id="amount" name="amount"> <button type="submit">Transfer</button>
</form>
-weight: 500;">npm -weight: 500;">install
-weight: 500;">npm audit
-weight: 500;">npm -weight: 500;">install
-weight: 500;">npm audit
-weight: 500;">npm -weight: 500;">install
-weight: 500;">npm audit
async function fetchData() { try { const response = await fetch('/api/data'); if (!response.ok) { throw new Error(`HTTP error! -weight: 500;">status: ${response.-weight: 500;">status}`); } const data = await response.json(); // Process data } catch (error) { console.error('Error fetching data:', error); // Log detailed error for developers alert('An unexpected error occurred. Please try again later.'); // User-friendly message }
}
async function fetchData() { try { const response = await fetch('/api/data'); if (!response.ok) { throw new Error(`HTTP error! -weight: 500;">status: ${response.-weight: 500;">status}`); } const data = await response.json(); // Process data } catch (error) { console.error('Error fetching data:', error); // Log detailed error for developers alert('An unexpected error occurred. Please try again later.'); // User-friendly message }
}
async function fetchData() { try { const response = await fetch('/api/data'); if (!response.ok) { throw new Error(`HTTP error! -weight: 500;">status: ${response.-weight: 500;">status}`); } const data = await response.json(); // Process data } catch (error) { console.error('Error fetching data:', error); // Log detailed error for developers alert('An unexpected error occurred. Please try again later.'); // User-friendly message }
}
add_header Content-Security-Policy "default-src 'self'; script-src 'self' https://trusted-cdn.com;";
add_header X-Content-Type-Options nosniff;
add_header X-Frame-Options DENY;
add_header Referrer-Policy "strict-origin-when-cross-origin";
add_header Strict-Transport-Security "max-age=31536000; includeSubDomains";
add_header Content-Security-Policy "default-src 'self'; script-src 'self' https://trusted-cdn.com;";
add_header X-Content-Type-Options nosniff;
add_header X-Frame-Options DENY;
add_header Referrer-Policy "strict-origin-when-cross-origin";
add_header Strict-Transport-Security "max-age=31536000; includeSubDomains";
add_header Content-Security-Policy "default-src 'self'; script-src 'self' https://trusted-cdn.com;";
add_header X-Content-Type-Options nosniff;
add_header X-Frame-Options DENY;
add_header Referrer-Policy "strict-origin-when-cross-origin";
add_header Strict-Transport-Security "max-age=31536000; includeSubDomains"; - Cross-Site Scripting (XSS): This allows attackers to inject malicious scripts into web pages viewed by other users. It can steal cookies, hijack sessions, or redirect users to malicious sites.
- Cross-Site Request Forgery (CSRF): Attackers trick authenticated users into submitting unintended commands to a web application, often through malicious links or embedded images.
- Insecure Direct Object References (IDOR): Attackers access resources by manipulating parameters, like changing an ID in a URL, to gain unauthorized access to data.
- Sensitive Data Exposure: This occurs when sensitive information, such as API keys, passwords, or personal data, is exposed in the client-side code, browser storage, or network requests.
- Dependency Vulnerabilities: Using outdated or insecure third-party libraries and frameworks can introduce known vulnerabilities into the application.
- Client-Side Logic Flaws: Errors in how the frontend handles user input, authentication, or authorization can be exploited. - Client-side validation: Provides immediate feedback to users and improves user experience. However, it should never be the sole validation mechanism, as it can be bypassed.
- Server-side validation: Essential for security. This is the definitive check for all incoming data. - default-src 'self': Allows resources from the same origin.
- script-src 'self' https://trusted-cdn.com: Only allows scripts from the same origin and a specific trusted CDN.
- object-src 'none': Disables plugins and embedded objects like Flash.
- base-uri 'self': Restricts the URLs that can be used in a document's <base> element. - Avoid storing sensitive data in local storage or session storage: These are accessible by any script running on the same origin. If you must store small amounts of non-critical data, consider encrypted cookies or more secure mechanisms.
- Never embed API keys or secrets directly in frontend code: These should be managed server-side and passed securely to the frontend only when absolutely necessary, ideally through authenticated API calls with strict permissions.
- Use HTTPS exclusively: This encrypts data in transit, protecting it from eavesdropping.
- Data Masking: For user-facing fields like credit card numbers or passwords, mask them appropriately (e.g., showing only the last four digits of a card). - Synchronizer Token Pattern: This is the most common and effective method. When a user visits a page that can perform state-changing actions (e.g., submitting a form), the server generates a unique, secret, and unpredictable token. This token is embedded in the HTML form (e.g., as a hidden input field). When the form is submitted, the server checks if the submitted token matches the one stored server-side (often in the user's session). If the tokens don't match, the request is rejected.
- When a user visits a page that can perform state-changing actions (e.g., submitting a form), the server generates a unique, secret, and unpredictable token.
- This token is embedded in the HTML form (e.g., as a hidden input field).
- When the form is submitted, the server checks if the submitted token matches the one stored server-side (often in the user's session).
- If the tokens don't match, the request is rejected. - When a user visits a page that can perform state-changing actions (e.g., submitting a form), the server generates a unique, secret, and unpredictable token.
- This token is embedded in the HTML form (e.g., as a hidden input field).
- When the form is submitted, the server checks if the submitted token matches the one stored server-side (often in the user's session).
- If the tokens don't match, the request is rejected. - SameSite Cookies: Use the SameSite attribute for cookies to prevent browsers from sending them with cross-site requests. SameSite=Strict is the most secure, but might impact some legitimate cross-site interactions. SameSite=Lax offers a good balance. - Use package managers effectively: -weight: 500;">npm or yarn for JavaScript projects.
- Regularly run dependency audits: Use commands like -weight: 500;">npm audit or yarn audit to identify known vulnerabilities.
- Utilize security scanning tools: Integrate tools like Snyk, Dependabot (GitHub), or OWASP Dependency-Check into your CI/CD pipeline.
- Establish a patching strategy: Define how and when you will -weight: 500;">update dependencies. - Avoid eval() and other dynamic code execution: These functions are notoriously difficult to secure.
- Sanitize HTML output: If dynamically generating HTML, ensure it's properly escaped to prevent XSS.
- Handle errors gracefully: Log detailed errors server-side but provide generic, user-friendly messages to the client. - X-Content-Type-Options: nosniff: Prevents the browser from MIME-sniffing a response away from the declared content type. This helps prevent XSS attacks.
- X-Frame-Options: DENY or SAMEORIGIN: Prevents clickjacking attacks by controlling whether your site can be embedded in an <iframe>. DENY prevents embedding entirely, while SAMEORIGIN allows embedding only from your own origin.
- Referrer-Policy: Controls how much referrer information is sent with requests. A stricter policy like no-referrer-when-downgrade or strict-origin-when-cross-origin can reduce information leakage.
- Strict-Transport-Security (HSTS): Enforces that browsers should only interact with your site using secure HTTPS connections.
