 good morning everyone let's all right so we looked at we've been talking about the web we've been talking about web technologies specifically that JavaScript right so we know we've seen that lot JavaScript is the language of the web in order to interact with pages and we just saw how actually we can use JavaScript to make asynchronous requests back to the web application right the server side code so now you have the ability of code running on the client right sending requests to the server asynchronously without the user knowing without refreshing the browser right so this is an incredibly powerful technique and now we can make web applications we can make web applications that work we can make clickers obviously I want to connect to my back can we make clickers that work yes okay right so now this opens up a whole new avenue of building web applications that actually mimic traditional desktop applications right before this we have to click and every click refreshes the whole HTML page right so not only is it inefficient because maybe when we click on something we just wanted to update one little tiny element right we still have to go we would have to go to the server get a brand new HTML page and put the page there and maybe we could use tricks with frames where so we have some navigation that doesn't change right so the URL actually doesn't change with a frame internally but here with JavaScript and this is kind of the web 2.0 idea of using asynchronous JavaScript and XML so we're using a jacks web application so now we can write JavaScript code that's running on the browser that responds to clicks and responds to form entries that can potentially go load that data from the server or make a request to the server and then return just that tiny response only the thing that changed and so if you actually are interested in this from there's a 2015 essay that actually coined the term a jacks questions JavaScript so it's actually kind of crazy when you think about it right so we've looked at binary applications right where's the code to that applications that you've been studying live on the binary server on disk yeah the codes on the disk and then when you run it it loads that code in memory and it executes it right here essentially the code of the application is distributed part of it is running on the client's browser and the other part is running on the server right actually having a crazy different way to think about it and not only this you have multiple clients accessing your website in parallel each of them are running a different copy of your JavaScript code right you have one kind of central server back in so it's it's an interesting different way of thinking about building an application right because I want to have some functionality on the client and I don't think we'll get to this but now it's actually moving more and more to ship the entire application onto the client right instead of I don't even have I can actually ask your browser to store your local state on the browser I can actually give you an application that runs 100% on your client and doesn't have a server component it's like completely inverting the way we can traditionally think about the web okay so right so we've looked at designing web code right designing a web application coding application we've looked briefly at php and JavaScript but how you actually design a web application depends on the framework you use and on the technology and somebody's gonna be very different so CGI applications have one single file that responds to multiple paths so there's actually one executable that handles this you can have multiple files each respond to their own path PHP applications are typically written with files that map one-to-one with a URL so usually to access a PHP application you will go to some the URL the domain and the path would be the path in the local file system to that PHP folder and then the name the final part of that path would be the name of the PHP application so this is kind of the traditional way of thinking about web applications was you would write a directory structure of your application and it would mimic the URL structure that you wanted ASP classic ASP applications were done the same as ASP I believe we talked about kind of the natural way of writing PHP code right because PHP lets you mix the output that you want with some code that runs on the server and so kind of the natural way is you would you know get some use PHP so the session parameter is PHP's allows you to do session so it actually people ought to handle the cookies and so this way you can store data in the session it's stored locally then we get some username parameter from the URL and then we check you know if this username parameter is not the same as the session username and the session username is not admin that say hey you can't view this you can only do comments otherwise get the session and then we can so we can look at a page like this so you know this would be like kind of like a classic authorization check in PHP do this for the start of your PHP file right but look I'm like doing a check and outputting HTML content in the same file wouldn't like a better software engineering approach be some way that I could like abstract this check out and I could say on these PHP files this check has to pass otherwise they can't access these files right this way I write my authorization code in one place in one place only as opposed to distributed in every PHP file that I want and maybe like the fact that I'm outputting HTML right in the middle of an authorization check it's also kind of crazy right what if I want to change this and use this as a JSON endpoint for a mobile application right I want to spit that HTML I want to spit back the JSON object more natural ways to do this is let's say I have this comment page I am welcoming some user I have some debug information and I'm outputting the comments so how do I get these comments so this is actually an example from a homework assignment I created when I was at TA at UC Santa Barbara for an undergrad security class and so the way I did this this was me like I'm a web programmer I'm developing this PHP application right I need to get the comments so I open I use SQLite so I'm not using my SQL but I use SQLite I open what is a local file I select from comments where username is the username parameter and then I get the result and I loop over this result and I output HTML mixed with the output of with from the database and so this is actually a very natural way of how PHP really evolved it's like what is the type of it right because everything that's not in the tag is going to be output it's essentially kind of like templateing right but is this like a sustainable way to write a large application what if there's somewhere else in the program that I wanted to get the comments from the database for a specific username what if I wanted to do that but then change the way they're output right what if I didn't want to use p tags I wanted to use something else right but here I'm embedding the logic of my application right with the generation of the output in a way that's honestly insane when you think about scaling this up to a large application and so the form of this would say so continuing on with this code the form of this would say to add a comment you make an action here we put the username in here we have the text form so I have to make sure that I'm properly passing in the value I want in the text field I also have a comment name a comment a text area which gives me the box in a form and then I still have to have my check of if there was some error right I tried to get something from the database all the way at the end here I have to have my error check of what happens if there was an error I had to say that there's some error message so hopefully even programming long enough at this point that you look at this and you're kind of like this really disgusted like this is not the way how to write an application right in a maintainable sustainable way it's like oh god you have these checks and then you have like you're making database queries like halfway down the php page like how would you even know if you wanted to let's say there's a performance problem at this page right you want to say well what's the problem right where are all my database queries well they're in every single php file of my application so I have to look for all of the whatever the sql query the sql like query I have to look for all of those types of instances look for all the queries that everybody passed in to see if I'm maybe not using an index or I shouldn't be using index all this kind of stuff right which really database like the database is really just mapping data right from the database into my program right I want to be able to say hey give me all of the user's comments but instead I am on demand when I'm when I need the comments I am just querying the database and looping over that I'll put in the comments so I should say I'm not like shaming all php programmers I'm also shaming myself this is how this is a very natural style of how to use php and this is me personally I wrote code that looked very very very similar to this and so it really gets into like so what does spaghetti code mean I mean spaghetti is delicious right so why do we call it spaghetti it's kind of maybe it's a compliment what does it mean when we talk about spaghetti code so we want to take a crack at it you have to define it and I'm gonna get that good tangled yeah it's a good way right it's like tangled it's like you can't you look at one string you look at both spaghetti you look at one strand you be like where does the strand go who knows right you have to pull that strand out which is kind of like debugging and then you're left with the thousands of other strands of spaghetti that are in there which who knows what they're doing or how they're related right and software is actually probably even now I think about it is more confusing than spaghetti because all the strings are actually separate so you could just keep pulling them out one by one whereas in software it's all like tied together and sometimes it's like mashed together maybe your strands aren't even uniform lengths maybe the lengths change I don't know it's always crazy so yeah so you want to change how comments are stored right let's we want to give extra metadata to comments well how do I know all the places in my code that touch comments because I've written every single file in my application like this where it's just queries spread throughout right so you have to change every single sequel query in every single php file that touches comments as well as the way the comments are output so it becomes just a crazy mess and the html output intermixed with sequel queries intermixed with php code oh just so glad that we've moved away from this as a community right and kind of a yes I can see another problem if you have a requirement to create a standalone desktop application you cannot share your model you can't share anything right yeah if you wanted to even I mean I would say I probably argue a little bit that like most people don't want to move a web application to a desktop application what they want to do is they want to provide a mobile application for their web application right so now now you basically have to have two different code bases right the php application that generates html you probably have to develop a new php application that uses the same database that has a json or rest endpoint right that that's what the mobile site would talk to and I have to make sure those code that code isn't synced exactly right now you're duplicating code so you bugged your hardware you're doing oh god look at that another problem right is we're technically coupling the urls that we want to access to the scripts right in that previous example right here my form action was add underscore comment dot php because there just happened to be a file on the server called add underscore comment dot php but who cares that it's actually what if I want to change this later to asp.net or ruby on rails or something right I mean does the client care that they're actually accessing a php script now like hey aesthetically it's super ugly right like why would you want to tell people the way your program's built and from an engineering point right we're technically coupling the urls in our application to these scripts so what if I want to refactor and move that add comment file to somewhere else like what if I want to change from add comments to slash comment slash add dot php right it's a little bit more clean but now what about people who are linking to add comments dot php right I have to make sure that I provide some redirect or some other functionality to support that and so this is the very natural way when you first start doing this is very natural is I want to map urls to scripts they get executed right and then one to one mapping so if we do like this example dot com add comments or view comments users view users right all these map directly to this file structure so we tell the web server hey this is my folder for my php application and it looks it knows exactly how to map okay the root folder there should be an add or score comment dot php file here but do we have to do this is there anything that in the spec the http that says that we have to do it like this no right all that it says is we need to be able to access a resource ask for a resource something happens and it returns some html right so this is so this is kind of like getting you into the mindset of programming and web programming uh around the time that ruby on rails was first released so anybody code in rails at any point oh man it's quite a small number um actually kind of fine because a lot of the ideas from rails have spread into pretty much every single web development language so it's it's actually kind of hard to convey at least personally to me the kind of like aha moment when i first like played with rails it was like this completely rethinking the way and develop your web application and you can see immediately that like oh this is clearly a better way like the way of doing force crap and actually even just using the ideas from here you can now write people write php code that follows these kind of conventions and this way so you guys are right maintainable good php code the problem is the vast majority of php code 10 ports crap right it's used so much so and the key idea here was the model view controller paradigm so it's basically like and i'm how many have heard of this before okay good portion that should be review cool and this is actually an idea from user interface design right so the idea is if you have some gooey some interface do you want to like actually click the code that happens when you click the button like with the same thing that draws the button and how the button looks like no that's crazy right then if you want to design a new gooey or change things right you're tightly coupled there so the idea was we wanted to separate the concerns of a gooey right so we had some model so the model is the data of our system right the state of our system we have some model and that's separate from how we display that model in a gooey right so the view is how how does it look right just how does it look like and the controller is the thing in the middle that manages between so it says okay you click this button that means i need to update this thing from the model and here's your new view right so the business logic should be the controller and the model stores the state of your system and the view handles how everything actually looks so it's actually originally created in the early 90s it was popularized by Ruby on Rails to structure basically server-side code of web applications and so kind of the way you can think about this is like the model basically updates the view or the controller like manipulates the model right puts things in databases the user actually sees the view and interacts with the controller and then the controller will update change the model which will update the view and get this nice cycle so in the web the idea is that the model handles all the business logic so everything that's important is of the logic of the application is handled by oh wait by the model okay yes that makes sense right and stores the application state so it doesn't have the validation that you need before data comes in it does all of the important things that you want your application to do the view is responsible for generating the view of the user data from the model so basically says like okay if i get comments here's how comments look right and if you want to access the comments page here's how the comments page looks and maybe i can even use little bits like i can use the view that does comments in my view that does the comments page right so there we're using logic and it's usually in a very simple templating system some people even do like non-turing complete languages for the templating system to display the data so this actually goes back to it's kind of funny because this is pretty much what php is right php is like an incredibly simply it's kind of going to be thought of as a templating system right like the page should look like this and replace these values with something dynamic which is what a templating system does but the problem is is when you're doing it just in a templating system where you do the model and the controller all those other logics the controller is basically responsible for takes the input from the user fetches the correct data from the model and calls the correct view so now the great thing about this right is i can have different views for different clients i can have different views for different clients right so if you're accessing on a web browser the controller can know that and it can say okay great here's the html view right getting the same data or if you come from to arrest endpoint i can access the same data but use the json view so i'll pass json data back to you this way you're separating these concerns obviously it needs to be different depending on what output you're giving right i mean there could for that has to be different but where that data is stored that model is still the same and your checks on authorization all that kind of stuff should be the same for both and the controller should be very simple so this is one big thing that rails introduced the other incredibly important thing was we call object relational mapping so the idea is in our programming languages we deal with objects right even php as objects now right ruby especially actually in ruby it's not crazy everything is an object even like numbers right but the database is relational and doesn't really have any concepts of objects right we have to issue queries to the database to basically get data back and iterate over those results so the idea with object relational mapping is well programmers are used to using objects so why don't we let them use objects to interact with the database and essentially abstract away and not have the programmer worry about sequel and based on how you access these objects i will go and fetch whatever data you need from the database and give it back to you so rails has active record which you can do cool things like so user would be your model you can say user dot create so it's going to create a new entry in your database with the name of david and occupation of code artists this is from the rails tutorial or either the tutorial with documentation so i don't know they're david in here who's a code artist this is from the guy who created rails is david i can never remember the middle name or last name but is dhj yeah dhj that's what i remember i'm not gonna do it i'll mess it up and so i can query the database by using the model the user and i can say hey find every user with the name find a user with the name david and it will see no sequel right i don't have to worry about sequel i actually treat this as an incredibly dumb back end and the beauty is is i can switch between sequel light or my sequel or postgres right without ever changing my code right because what it's actually using to store the data who cares and i can destroy david because i'm strong i can do complex queries too i can look for articles whose id is greater than 10 and i can limit that to 20 and i can order by id ascendant right so these are actually parts of normal sequel queries right and i can chain these and the cool thing is i guess i shouldn't go into the kind of detail but the cool thing is when you start playing with this is the orm layer this object relational mapping is actually lazy loading the results for you so when you first call article dot where id is greater than 10 it doesn't actually issue that query for all articles in the database greater than 10 right that could be a lot then when we call dot limit 20 then it knows okay now if i use it i'm going to limit u to 20 and then if i want to order now we'll actually do the order so it actually doesn't use this until we like ask for or iterate over the results there it's actually really cool and very powerful so one thing was model view controller the other one was object relational mapping the third one is routing so this is dealing with the problem of coupling urls to files basically and the idea was okay let's define a mapping between urls and server side functions right so now it's really cool instead of having an entire file right really different files for different endpoints now i can say hey when you go to users you know comments slash view execute this view comments method and that method handles is part of the controller that handles that and you can also define what parameters get passed to that function so this will automatically handle to get parameters to parameters of your function right it's a lot easier to reason about a function if it takes in parameters rather than just getting parameters for the local variables like in php so for instance on rails i can make a book controller and it subclasses application controller and i can define a method of the book controller called update so this would be how to update a book right like i've checked out a book or something or i need to edit the title and actually so one of the drawbacks to rails is that a lot of things happen magically so by default it's been a while since i've actually done hardcore rails programming but by default here because books controller subclasses applications controller it means you actually don't have to manually create the route it will automatically create a route for slash i think books maybe books or book slash update to this method so it will actually do that automatically for you because it knows that this is a method that was implemented in a subclass of application controller it's actually one of the big drawbacks of rails is that it just does magic stuff and so it's hard to actually understand what's going on okay so we can find a book so we can use our model so book is our model we're going to find by the id parameter that was sent in we will set that to at people done ruby is this the this means a class variable of books controller is that right yeah okay so the reason why we do this is this way the view can automatically get this access this book class instance variable i can't remember what it's called in ruby and we can check we can call book dot update so we're updating our model with the book parameters whatever parameters we get sent in if that's true then we can redirect to books it's actually kind of crazy we can redirect automatically to our model so this will know how to turn this model instance into like slash building probably slash book slash view slash one or whatever the id of that book is otherwise we can render edit so we can show the edit page if that update didn't work for whatever reason so now here right this controller is incredibly simple it's just updating things fetching things uh and so we can look we can define an index so this what happens when we go to like slash books it would just get all books from the database and then the templating system comes in to actually display all those books so this templating system is the view part and this is a simplified language which the input can be either variables or dictionaries and outputs can be anything you want it can be either html json xml whatever new you do protocol buffers i guess if you're talking about like a google service and ruby under my default uses erb because the rb is the same for me it is it's meta ruby what's the b though i think it's ruby go with that if it's clever they made it clever though then i feel bad for taking fun of them okay um yeah so ruby uses erb and so this way it's kind of like phb it looks everything not within special tags is just html output and then we can use these tags to say hey for each of the books that we define in our controller right do this block of things and we're passing the parameter book here ruby is a little bit weird syntax if you're not intimately familiar with this but this is looping over every book and setting a local print a local variable book to whatever element we're iterating over so i can do things like i got a row and then here i'm outputting the book title i'm outputting the book content i'm making a link to the show i'm making a link to an individual book with the text of show this will link to edit and it will link to the edit book path of book and we can remove a book and we can do all crazy kind of stuff like we can set here we're setting the method so this actually sets the hgp method of this whatever happens here when we click this and it will actually try to pop up a confirmation dialogue so this is actually kind of cool this rails will automatically write the javascript code to handle this yes uh oh uh yes um mentioned an operative familiar with beans i don't know why you call it beans uh yeah like enterprise java stuff but yeah it's probably also um like c sharp with uh sammel kind of like layouts and stuff you can do similar things here you can link things and yeah that's actually a whole other thing but but yeah so the idea is is with rails they're like okay well programmers are developing the same applications over and over right you have to do these things you have to render html content you have to talk to a database and so they said well let's provide a platform a library for people to actually do that and so okay so that's kind of a brief introduction to kind of like more modern web application frameworks so that you can see that you can't always assume i see this url i know exactly which code is being executed on the back end right there's a mismatch there and when you're looking at it from outside you may not be able to tell and so one of the crazy things is that in the web ecosystem right we talked about make any html request the web server handles that request it forwards it to the web application it does some processing or returns a result and then we make an html response but actually modern web applications are actually much more complex right modern web applications i mean make a request to one server right that back end may then make other requests to other web servers which then go fetch different web applications that they're using and then they send a response back like for instance if we think about like let's say advertisements right so i make a request to let's say cnn.com it's not exact well yeah right so it's generally that this let's say the homepage but it also wants to include an ad right so cnn has a relationship with an ad library so they may ask that what ad library hey i'm going to send this request what ad should i include right and that's going to execute a whole bunch of other things that happen on the ad library on the ad library back end right it could also be a different scenario where i make a request to the server it sends me back some content and then i make a new request to a new server based on the javascript code that gets inserted to actually make a request to a different server right so this would be like in the google ads so if you want to use google ads on your website you include a snippet of javascript code so this means when you view this page your browser automatically goes and fetches this new page from this new domain it could be even crazier we can have like the web application back end itself may make other requests to other services right and those could make whatever requests they want before finally returning an html content and we can also have different copies of browsers right how many people browse with only one tab open i'm gonna say you're monsters if you see my tabs i usually have 10 to 50 tabs open at any one time right so i have like multiple copies of firefox running and they're all interacting with different web applications and different websites so part of the key is what we're going to talk about now now we're getting into the security things so this seems crazy right we saw that not only is code being executed on each of these servers right and running who knows what language doing who knows what but they're also sending code to my browser that's also being executed by my computer did i write that code no did i validate that that code is correct and free of errors or bugs no right i'm just getting code from a website and your browser actually automatically executes that code does it seem great from a security perspective i mean we've been learning about all the problems right yeah it's just nuts so part of the problem is who's secure so when we talk about web security what do we need right who's security do we care about right so do we care about the web application security yes why because they provide all these html pages all these applications to all these clients so if that becomes compromised then every single person who tries to use it also gets compromised because of that i agree but i want you to think about more of let's say this is the irs's website the web server right do i care to compromise other people who are visiting that website what would i really want as an attacker let's start we have to start thinking offensively right we're an attacker we find a way we want to attack maybe the web server of irs what does that allow us to do our records like we don't have to pay any taxes yeah you can like alter all your tax records right because fundamentally maybe not this server maybe this server right somebody has to have access to the database right i mean if we're able to access it through the web application fundamentally that means some part of the application has to access that database right so what do i trick this database to access like your tax records i guess tax records are kind of boring it's like a bank right a bank if i can trick the web application to send money from your account to my account would i like that yes i'd be pretty sweet if i turn it into some bitcoin and you'd have a fun end of the semester where i would be here right so we care about the security of the server right and the web application back end right because the web application back end has all the logic of the application any data that the web application can touch is data that if there's a vulnerability in that web application right just like we saw with binaries we got that binary to execute arbitrary code right if we can get this web application this web application here right to execute arbitrary code wow this game over right we could do whatever that web application can do right and that includes we could steal the data we alter the data we could exaltrate the data we just delete the data i didn't send you guys that link uh there's a great link well not a great forget uh guy accidentally ran rm-rf slash all of his machines and he wiped out like a thousand customers dat websites and this really sad part is he was also running that same command on his um backup machines all the backups also got deleted yeah so we're not here what about on my browser do i care about the security here what and what do i care about what do you care about here so he said yes so why i mean if somebody controlled the server so if we just looked at the model here you could get access to my bank records that are on my computer right yeah i'm taking code from a random server do you actually know that when you type in i don't know so when you type in google.com you're reasonably certain that you're talking to google but you click on one of those links do you know how many of you have been searching for program answers and you just like click on any link that could possibly give like you i i know the thought process because i do it too you're like okay i hope there's a stagoverflow answer or i hope there's a stagoverflow post and i hope there's an answer to that post uh if there's not then i have to start like digging through all these terrible search results and you're constantly just clicking and opening up things in your browser right and fundamentally your browser is then executing code by random people and organizations that you have no you don't know whether these are good people or bad people right we looked at we looked at the architecture of the web there's no boss or traffic cop that says like no this is a bad site right cannot visit this site and so yeah we care what happens if i visit a really bad site are they able to steal my cookies for my bank right my session information for me and my bank right how many of you use the uh remember password feature of your browser some of you i just last pass so i'm not judging uh right so if i visit a malicious site cannot site read all of my stored passwords that's all i need to get into a website right i just need to use your name of the password or maybe i need your cookie right if i get your cookie then i can impersonate you on the session so what we're going to look at first is exactly how does what does the browser do to try to ensure the security of accessing completely different sites and executing random JavaScript code from those sites right seems absolutely outrageous okay but first we're going to look at frames really quick so frames that we talked about we can basically put multiple separate urls together on one page and so it was used in the early days to provide like a banner or a navigation element so you wouldn't have to keep refreshing that if you still go to i'm sure there's some professors out there who still have like terrible frame-based websites that are horrible to use because i know because i've experienced that myself i'm not contacting any professors here at our fine university i mean generally i've seen that a lot okay so we use a frame set to say this is a frame set tag and it says okay i want 85 percent of it i want 85 percent of it to be frame one dot html 15 to be frame two dot html and if the browser does not support frames because your browser is i don't know internet explorer one or something then i'll put this text and so if we have inside frame one dot html i am frame one and in frame two we have i am frame two then when we load this up right the url here says frames dot html and we can see that the left frame is i am frame one and it's 85 percent of the screen and then 15 percent of the screen is i am frame two right so two different urls essentially being composed into one page think about that there's nothing that says these urls have to be to the same endpoint these urls can be arbitrary these are just urls right so these could point to anything okay i-frames are a step above in that it's not you don't have this visual separator here it's not entirely clear that it actually is separate frames so we can use i-frames to specify frames here and then it will look like this so it looks actually completely transparent to us the user that they're using frames but this is crazy right i can just put random stuff together what happens if i include like your bank account chase.com here and my malicious page here right these are both javas like they can both have javascript both executing right what about javascript code that's executing in your in your browser with the different tabs right what's happening in each of these different tabs and so fundamentally so when we talk about we're gonna talk we're gonna get we will get to the the back end the applications level vulnerabilities but to get there we really need to understand this is actually the key security feature of the web the whole idea of javascript right is browsers are constantly downloading and running foreign code often concurrently right so this coming from all over the place we just saw the frames those things are happening at the same time tabs right so one thing that should freak you out is your god i don't want people to be running arbitrary code on my machine i have all my documents i have all your guys's grades i have everything right on my computer all my photos like good god can a random website access those photos right so hey we should not want that right bad bad bad so first okay so the first kind of step to javascript security is what's called a sandboxing mechanism mechanism so the sandboxing mechanism says okay you're actually not allowed so you cannot touch local files there's absolutely no way to write the javascript application using javascript that touches local files you can't actually access most network resources right you can't just normally make a socket request to somebody else right then you can play weird socket-based games like you can't create javascript code that runs in the browser that listens to a socket and tries to sniff network traffic right that would be bad essentially used to be a huge problem i don't know if everybody remembers browsing the web before tabs you would have like pop-ups and stuff would create windows that were like really small and tiny that you couldn't actually get rid of so you couldn't make small windows with javascript you can't access by default the browser's history so why is this good cookies uh so actually we'll we will get to that in just a second but even without cookies let's say they can't access your cookies do you want every website you go to to be able to tell all the other sites you've ever visited why not they can send like hardware stuff yeah like for privacy reasons right like we don't talk about we're not going to talk about much about privacy but that's a big reason right right you know fundamentally a well a the htp protocol right i don't tell people where i've been when i make a request i don't even tell that server that i've been there unless they've set a cookie right but think about if every website you visited sent javascript code to query every single site that you've ever visited right i could learn probably a lot about you right so privacy reasons right the specific details of every sandbox depend on the browser so they are slightly different but they all do most of these things so the absolutely there's only one thing you take away from this section of the class on web security it needs to be the same origin policy the same origin policy is the absolute most important thing to web security because this defines how does javascript talk to other javascript right i'm executing concurrently all this javascript code right and this javascript code right can change the html change the look of of a page right so why doesn't when you visit one site how come it doesn't change the html in another tab or when i visit things in frames can they change each other's content what about cookies right javascript can access cookies so can we can javascript that i go to malicious.com can that access a cookie from chase we would want it to be no but the question is why and how does the browser decide so this is what comes back to the same origin policy so this is a standard security policy for javascript across all browsers and the idea is okay yes don't learn one thing so every frame or tab in a browser's window is associated with the domain right that content came from somewhere from some uri url right and so domain here is same origin policy domain so this is not necessarily the domain name although we'll see that's a component so the idea is the tuple protocol domain port from where the frame or page was downloaded is the same origin it defines the domain of that code right so that code downloaded in a frame can only access resources associated with that frame so this is specifically what means that when i go to badguy.com right i can't access google.com's cookies or anything because they do not have the same origin right their free tuple is different this actually also means if you visit the same site on a different port the javascript also can't access each other okay the one caveat to this and this is also an incredibly important nuance here is we saw that we can include external code right as we can use a script tag we can use the source attribute we can specify an arbitrary uri so if we explicitly include external code that code executes with the same origin policy within that domain of the code that included it or of the page that included it right so this is why so on my website right my website if you go to the website it has the domain the protocol is hgdp the domain is avidupay.com and the port is 80 right that is the same that the same origin policy domain on there i include a script to jQuery because we saw jQuery is awesome and everything else is terrible that's what i'll say right so what this means is that jQuery right when even though this is in a different domain different same origin policy domain right this is going to be hgds ajax.googleapis.com and then port what 443 right the hgds port exactly right it should be different but because i'm explicitly using it in a script tag it will execute in the same origin of my page can you somehow like fake this stuff no not explicitly this is the main way to get around it with this guy right okay we're gonna stop on this but please please please please same origin policy incredibly important incredibly important don't tell somebody to take a left script class and you don't know the same origin policy i'll cry so don't do it