• HTTP Headers are an important part of the API request and response as they represent the meta-data associated with the API request and response

  • Http header is a field of an HTTP request or response that passes additional context and metadata about the request or response.

  • Headers carry information for the request and response body.

  • https://developer.mozilla.org/en-US/docs/Web/HTTP/Reference/Headers

  • CSP - Cross Site Scripting

    • a web security vulnerability that allows an attacker to inject malicious client-side scripts into web pages viewed by other users

    • Tell the browser only load styles, scripts, assets from these trusted places

    • This header says

      • load everything from your own domain by default
      • scripts can also come from your trusted cdn
      • block object tags entirely

      image.png

    image.png

    • start with Content-Security-Policy-Report-Only
      • It logs violations without blocking anything

  • HSTS - HTTP Strict Transport Security

    • Makes sure your site always loads over HTTPS
    • On a public wifi someone can intercept the request, redirect you or inject malicious content before the site even switches to HTTPS. Once the brower sees the HSTS header, always use HTTPS for this domain
    • This header tells the browser so even first time visitors connect securely.
      • to enforce https for one full year
      • include all subdomains
      • and preload this rule into browser

    image.png

  • X Content Type

    • Blocks MIME sniffing
    • when a server sends a file with .txt extension. but inside that file is some malicious javascript. some older browers might try to guess what file it is and as there is javascript inside the file it may run the script and this can lead to unexpected script execution.

    image.png

    • This header tells the browser trust what i said the file is - don’t try to guess it.

    image.png

  • Referrer-Policy

    • when a user clicks a link from site to another the browser sends a referrer header. telling where the user came from.
    • But the header might include full URLs, including query parameters, tokens or even user ID.
    • this is how we leak sensitive information to third party websites without even realising it.
    • when this headers is used it means
      • if the next page is on your own domain, send the full URL.
      • if it is going to another domain just send the origin (hhtps://xyz.com) —- and keeps internal data from leaking outside.

    image.png

    image.png

  • CORS - Cross Origin Resource Sharing

    • Cross-Origin Resource Sharing (CORS) is an HTTP-header based mechanism that allows a server to indicate any origins (domain, scheme, or port) other than its own from which a browser should permit loading resources.
    • it tells who is allowed to talk to the backend and who is not.
    • by default browsers block javascript running on one domain from making requests to another.
    • but if the front-end and backend are living on different domains. so if my react front-end is on app.frontend.io and my api is on api.frontend.com. to make this work correctly we need to explicitly allow that connection.

    image.png

    • this tells the browser to allow
      • only allow requests from frontend.com
      • only allow safe methods like GET, POST
      • Only allow specific headers like content-type and authorization
    • here we should avoid *(wildcard)

    image.png

  • Permissions Policy

    • modern browsers give websites access to features like geolocation, camera, microphone, full screen, vibration
    • but not every script should have these permission
    • imaging embedding a 3rd party widget and it quitely asks for a mic access

    image.png