{"id":3816,"date":"2020-06-28T17:07:30","date_gmt":"2020-06-28T17:07:30","guid":{"rendered":"http:\/\/codethataint.com\/blog\/?p=3816"},"modified":"2020-06-28T17:16:58","modified_gmt":"2020-06-28T17:16:58","slug":"cross-origin-resource-sharing-cors","status":"publish","type":"post","link":"https:\/\/codethataint.com\/blog\/cross-origin-resource-sharing-cors\/","title":{"rendered":"Cross Origin Resource Sharing (CORS)"},"content":{"rendered":"

Cross-Origin Resource Sharing (CORS)<\/strong>
\nThe browser’s same-origin policy blocks reading a resource from a different origin. This mechanism stops a malicious site from reading another site’s data. The same-origin policy tells the browser to block cross-origin requests. When you want to get a public resource from a different origin, the resource-providing server needs to tell the browser “This origin where the request is coming from can access my resource”<\/em>. The browser remembers that and allows cross-origin resource sharing. <\/p>\n

In angular when front end request origin is different the browser stops processing response from the server.<\/p>\n

\r\nRequest has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header\r\nis present on the requested resource.\r\n<\/pre>\n
\nSame-Origin Policy<\/strong><\/p>\n
    \n
  1. The same-origin policy fights one of the most common cyber-attacks out there: cross-site request forgery. <\/li>\n
  2. If you have logged into FB your info would be stored in Cookie and would be tagged along when the request is made every time<\/li>\n
  3. Every time you re-visit the FB tab and click around the app, you don\u2019t have to sign in again. Instead, the API will recognize the stored session cookie upon further HTTP requests.
    \nThe only trouble is that the browser automatically includes any relevant cookies stored for a domain when another request is made to that exact domain. <\/li>\n
  4. Say you clicked on a particularly trick popup ad, opening evil-site.com.The evil site also has the ability to send a request to FB.com\/api. Since the request is going to the FB.com domain, the browser includes the relevant cookies. Evil-site sends the session cookie, and gains authenticated access to FB. Your account has been successfully hacked with a cross-site request forgery attack.<\/li>\n
  5. At this point, browser will step in and prevent the malicious code from making an API request like this. It will stop evil-site and say \u201cBlocked by the same-origin policy. <\/li>\n<\/ol>\n
    \nHow Browser works underhood?<\/strong><\/p>\n
      \n
    1. The browser checks for the request origins of the web application and the Server origins response match<\/li>\n
    2. The origin is the combination of the protocol, host, and port.\n
      \r\n      For example, in https:\/\/www.FB.com, \r\n\t   the protocol is https:\/\/, \r\n\t   the host is www.FB.com, and \r\n\t   the hidden port number is 5400 (the port number typically used for https).\r\n<\/pre>\n<\/li>\n
    3. To conduct the same-origin check, the browser accompanies all requests with a special request header
      \nthat sends the domain information to receiving server<\/li>\n
    4. For example, for an app running on localhost:3000, the special request format looks like this:\n
      \r\nOrigin: http:\/\/localhost:3000\r\n<\/pre>\n
      Reacting to this special request, the server sends back a response header. This header contains an Access-Control-Allow-Origin key,
      \nto specify which origins can access the server\u2019s resources. The key will have one of two values:<\/p>\n
      One:<\/strong> the server can be really strict, and specify that only one origin can access it:
      \nAccess-Control-Allow-Origin: http:\/\/localhost:3000<\/p>\n
      Two:<\/strong> the server can let the gates go wide open, and specify the wildcard value to allow all domains to access its resources:
      \nAccess-Control-Allow-Origin: *\n<\/li>\n
    5. Once the browser receives this header information back, it compares the frontend domain with the Access-Control-Allow-Origin
      \nvalue from the server. If the frontend domain does not match the value, the browser raises the red flag and blocks the API
      \nrequest with the CORS policy error.\n<\/li>\n<\/ol>\n
      The above solution works for development. How about in production. <\/p>\n
      To address such issues, the proxy is used between client and server.<\/p>\n
      \r\nRequest from Client -> Proxy Server -> Server \r\nRespose from Server -> Proxy Server(appends origin) -> Client\r\n<\/pre>\n
      Now what the proxy does is it appends the s Access-Control-Allow-Origin: * in the header before the response is sent to the client browser<\/p>\n","protected":false},"excerpt":{"rendered":"
      Cross-Origin Resource Sharing (CORS) The browser’s same-origin policy blocks reading a resource from a different origin. This mechanism stops a malicious site from reading another site’s data. The same-origin policy tells the browser to block cross-origin requests. When you want to get a public resource from a different origin, the resource-providing server needs to tell… Continue reading →<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[257],"tags":[],"class_list":["post-3816","post","type-post","status-publish","format-standard","hentry","category-interview-questions-angular"],"_links":{"self":[{"href":"https:\/\/codethataint.com\/blog\/wp-json\/wp\/v2\/posts\/3816","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/codethataint.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/codethataint.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/codethataint.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/codethataint.com\/blog\/wp-json\/wp\/v2\/comments?post=3816"}],"version-history":[{"count":4,"href":"https:\/\/codethataint.com\/blog\/wp-json\/wp\/v2\/posts\/3816\/revisions"}],"predecessor-version":[{"id":3820,"href":"https:\/\/codethataint.com\/blog\/wp-json\/wp\/v2\/posts\/3816\/revisions\/3820"}],"wp:attachment":[{"href":"https:\/\/codethataint.com\/blog\/wp-json\/wp\/v2\/media?parent=3816"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/codethataint.com\/blog\/wp-json\/wp\/v2\/categories?post=3816"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/codethataint.com\/blog\/wp-json\/wp\/v2\/tags?post=3816"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}