Heads up: Designing a tool for implementing security HTTP-headers

Sammanfattning: Security HTTP-headers are response headers sent by the server of a web page, activating certain security measures in the browser. They provide an effective defense against many threats on the modern web but are unfortunately not used on most sites. Using a design thinking process this thesis identifies the main reasons for their low usage and uses these findings to develop a prototype with the goal of helping web developers implement security HTTP-headers.  Using interviews, an example project implementing the headers and a literature study the following three main reasons for the low usage of security headers are identified.  Security headers are unknown to many web developers.  Web attacks are abstract to many developers making it hard for them to realise why security headers are needed. Many web developers, especially junior ones, have a limited understanding of HTTP and HTTP-headers making security headers hard and intimidating to implement. Through an ideation process, ideas for the prototype were generated and the most promising ones made into low fidelity prototypes. A way of visualising the flow of HTTP-requests on the web was chosen as the main prototype and was developed through four prototpe-test iterations. A high fidelity prototype developed in the interface design tool Figma was created. The prototype allows users to see and interact with all HTTP communication that a small web page creates in a graph like system. Security headers can be activated in the prototype and their effect on the HTTP communication is visualised in the graph. Through user tests the prototype shows great potential in educating junior web developers about HTTP, HTTP-headers and security HTTP- headers. To further explore this idea a real implementation should be created as many functions in the prototype are held back by Figma limitations. The prototype can be viewed in any browser with this link: www.tinyurl.com/mrytb9au