Skip to content

Instantly share code, notes, and snippets.

View kamleshchandnani's full-sized avatar

Kamlesh Chandnani kamleshchandnani

440 followers · 23 following
View GitHub Profile
@kamleshchandnani
kamleshchandnani / styled-link.jsx
Created March 2, 2019 14:18
@kamleshchandnani
kamleshchandnani / amp-img.jsx
Created March 2, 2019 14:56
import React from 'react';
import styled from 'styled-components';
import PropTypes from 'prop-types';
const styles = {
borderRadius(props) {
if (props.shape === 'bluntEdged') {
return props.theme.borderRadius;
}
if (props.shape === 'sharpEdged') {
@kamleshchandnani
kamleshchandnani / amp-carousel.jsx
Created March 2, 2019 14:59
@kamleshchandnani
kamleshchandnani / amp-cors.js
Created March 5, 2019 05:34
import logger from 'utils/logger';
const allowedOrigins = [
__CONFIG__.hostUrl,
`${__CONFIG__.hostUrl.replace('-', '--').replace('.', '-')}.cdn.ampproject.org`,
`${__CONFIG__.hostUrl}.amp.cloudflare.com`,
'https://cdn.ampproject.org',
];
const corsMiddlewareAmp = (req, res, next) => {
@kamleshchandnani
kamleshchandnani / gatsby-node.js
Last active October 4, 2019 11:37
// gatsby-node.js in my project root
/**
* So this shows up the index field in the graphiql explorer but when queried returns null
* even though this is present in my mdx field. Seems like I need to define the resolver somewhere
* but couldn't connect the dots
*/
exports.createSchemaCustomization = ({ actions, schema }) => {
const { createTypes } = actions;
createTypes(`type BlogPost implements Node @nodeInterface {
date: Date @dateformat
@kamleshchandnani
kamleshchandnani / async-defer-module.md
Created June 20, 2019 16:59 — forked from jakub-g/async-defer-module.md
async scripts, defer scripts, module scripts: explainer, comparison, and gotchas

<script> async, defer, async defer, module, nomodule, src, inline - the cheat sheet

With the addition of ES modules, there's now no fewer than 24 ways to load your JS code: (inline|not inline) x (defer|no defer) x (async|no async) x (type=text/javascript | type=module | nomodule) -- and each of them is subtly different.

This document is a comparison of various ways the <script> tags in HTML are processed depending on the attributes set.

If you ever wondered when to use inline <script async type="module"> and when <script nomodule defer src="...">, you're in the good place!

Note that this article is about <script>s inserted in the HTML; the behavior of <script>s inserted at runtime is slightly different - see Deep dive into the murky waters of script loading by Jake Archibald (2013)

@kamleshchandnani
kamleshchandnani / securing-passwords.md
Created September 27, 2019 08:46
Securing passwords

Securing passwords

Securing passwords is the most crucial thing when it comes to web security since if your passwords are compromised your information will be at risk.

The What?

So man in the middle attack is quite often when it comes to web security and especially while dealing with passwords between a client and the server. This attack is basically before a request reaches the server someone can spoof in between and steal the information and later uses it to replay the action and thus getting access to the victim's sensitive information.

The How?

Let's talk about how passwords are compromised.

  • Assume if you are storing the passwords in plain texts in your database and if the attacker gets the password from the request before it reaches the server he can replay the actions since the passwords were plain texts.
  • If you encrypt it on client side the attacker can read the hashing algorithm on the client since everything in JavaScript can be exposed.
@kamleshchandnani
kamleshchandnani / CSRF-attack.md
Created September 27, 2019 08:01
CSRF Attack

CSRF

So let's discuss about CSRF

The What?

CSRF stands for Cross Site Request Forgery. It's a kind of attack that mostly happens by compromising users cookies and perform an action which a user didn't intend to.

The How?

  • Imagine there's an attacker by the name Kamlesh and the Victim by the name Shankar.
  • Now Kamlesh wants to to do a malicious bank transaction from Shankar's account to his own account. Let's take HDFC bank for an example here.
  • To begin with Kamlesh logs on to his own HDFC bank account and then navigates to transactions page and clicks on view page source and copies the amount transform html form. Assume this is what a typical form looks like
<html lang="en">
@kamleshchandnani
kamleshchandnani / reactiveconf-2017-progressive-loading-cfp.md
Last active June 29, 2020 08:22
Progressive loading for modern web applications via code splitting!
@kamleshchandnani
kamleshchandnani / haproxy-reqrep.md
Last active April 25, 2023 15:50
Understanding "reqrep" in HA Proxy config

Let's assume we have following line in our HA proxy file:
reqrep ^([^\ :]*)\ /api/v1/api-name/(.*) \1\ /staging/path-name/\2
Here is our sample domain:
https://example.com/api/v1/api-name/

The goal here is to rewrite /api/v1/api-name/ to /staging/path-name/ leaving anything else unchanged.

Breaking the Regex and understanding in parts:
There are basically 3 parts in the regex: