Browser Security

Security is your responsibility. It’s not something you can finish, only improve.

The Browser

The ability to update the browser and have it run and update the DOM is the reason we can have rich apps like Facebook that update part of the page without reloading the whole page.

You can load JS from some source and it’s immediately loaded and run on the page. When you load a script tag it only runs once.

Same Origin Policy

  • Implemented by the browser
  • Created to protect us from cross origin
  • Permits only scripts from the same domain (AJAX requests)
  • Hackers can get around this

Circumventing Same-Origin Policy

  • CORS (new way)
  • iframes are cumbersome and not that practical (SoundCloud?)
  • JSONP (old way)

CORS

  • new way to get around SOP
  • the most important part of browser security, especially when you are configuring your own server
  • You make an AJAX request
  • the browser makes an OPTIONS request on behalf of your AJAX request (only if you are not on the same origin)
  • Based on the server’s response to the OPTIONS request, you will either get an error, or your AJAX request will go through.
  • Lets the server (target of the AJAX request) decide whether the request should go through instead of the browser. Instead of the browser always saying “No.” the server is allowed to give certain people permission.
  • It doesn’t replace the Same Origin Policy, it just works around it. So the Same Origin Policy is still in effect. This is just an add-on that lets the server override the Same Origin Policy and say, “This is OK.”

JSONP

  • old way to get around same origin policy
  • has to be set up on the server (not automatic)
  • being able to load a customized script that’s from the server.
  • Only supports GET requests. Still common, but less so.
  • Loading a JS file that’s going to be run right away.
  • JSONP does not have to follow the same origin policy. JSON does.
  • The parameter of the callback is the data that you want (usually JSON).
  • src tags can be loaded from anywhere (<img>, <script>, etc).
  • basically a function wrapped JSON object
  • really easy with jQuery