Week 12 - History API, CSP, Navigation

History API

The History API is built into the browser and is how we can, through JavaScript, access any and all information about the history array in the browser, including querystrings, hash values, and associated webpage data.

It also lets us dynamically change what is written in the location bar in the browser without actually changing which page is loaded.

Many websites use this ability to let the user navigate with user-friendly URLs which won't actually match real pages on the server. Instead, they can be treated as instructions or keys that reveal the current state of the web application (site).

Combined with the fetch command and modern CSS, it gives us incredible control over the appearance and behaviour of a web application.

Learn more about the History API

QueryStrings

The queryString is the part of any URL that comes after the name of the page to load, and begins with ?. It is the simplest way to send data from the browser to a webserver.

The value of the queryString is a UR encoded string which gets passed to the web server as one of the HTTP Header values.

Learn more about QueryStrings

Content Security Policy

There is a meta tag that you should add to all your webpages. This Content-Security-Policy tag will help you to protect your users from Cross-Site Scripting (XSS) attacks.

It creates an HTTP Header for your webpage. That's what the http-equiv attribute means.

<meta http-equiv="Content-Security-Policy" content="default-src https: ;" />

You should add this to ALL your webpages, web apps, and hybrid apps.

What is an XSS Attack?

Learn more about CSP

Iterable and Enumerable

Some objects are iterable and others are enumerable, and some are both. Understanding the difference between the two can help you write your code more effectively and without unexpected errors.

Learn more about Iterable and Enumerable

SPA Navigation

Here is an updated version of the code that is a sample SPA. You can use this as a reference for building Single Page Apps of your own.

Simple-SPA repo

You can feel free to use any of this code as a starting point or reference for your own code.

TODO

TODO Before next week

• If you have not read all these notes and watched the videos from this week, do that first.
• Finish reading the notes for week 12 and watch all the videos in the notes for week 13.
• Hybrid 12 - Modal due this Monday.
• Assignment 3 - Simple Spa due this Friday.