Web UI automation on cloud for QA and developers ☺️

anand chaudhary — Sun, 14 Jun 2020 12:47:44 +0000

Hello all.

I am here for a survey about a product please submit your thoughts. Thank you. 😊 🙏 ❤️🙈.

https://survey.anakshiant.xyz/

UNDERSTANDING CORS

anand chaudhary — Sun, 03 May 2020 14:55:16 +0000

At the initial stage any developer whether one is .net ,php, node or python developer face a common problem that would be.

So let's understand CORS and how we should use it to make you app secure.

CORS Cross-Origin Resource Sharing is a mechanism which blocks unwanted client side scripts to access resources on a server with the help of some http headers.

Now suppose a client host http://example-a makes an XMLHttpRequest to http://example-b browser would complain about missing Acess-Conrol-Allow-Origin header on response and will block the client to access the response.

Now what happens on minimum level is if a client[http://example-a] makes a request at server[http://example-b].

Request gets rejected if response header does not include Access-Control-Allow-Origin header with the value either *http://example-a or * *.
Request is successfully completed if the header is present with appropriate value.

Now Which request gets blocked by server by CORS policy

Invocations of the XMLHttpRequest or Fetch APIs, as discussed above.
Web Fonts (for cross-domain font usage in @font-face within CSS)
WebGL textures.
Images/video frames drawn to a canvas using drawImage().
CSS Shapes from images.

Headers

There are multiple headers a server can specify to restrict client to access a resource on server.

Access-Control-Allow-Origin tells the browser if current client should access the response for this request header's origin value shoudl be in Access-Control-Allow-Origin.
Access-Control-Expose-Headers the list of headers which be available to client by server.
Access-Control-Max-Age header indicates how long the results of a preflight request can be cached. For an example of a preflight request, see the above examples.
Access-Control-Allow-Credentials if this header value is true and client makes request with credentials - include. server can access cookies and http authentication header by client.
Access-Control-Allow-Methods the list of methods client can use to make request on server.
Access-Control-Request-Headers the list of headers client can send to server. some headers are allowed by default. the list of headers which are allowed by default.

Preflight Request

"preflighted" requests first send an HTTP request by the OPTIONS method to the resource on the other domain, to determine if the actual request is safe to send.

There are conditions when preflight request will not be made mention in detailed on mdn .

All of these concepts has been demonstrated on this demo github repository using node js.

anakshiant / cors

Demo of CORS

Cors ❌

instructions

Run yarn
Run yarn start

Concepts

Repository contains demo of following concepts

How a cors request can be allowed on server.
Demonstration of preflight request
Which headers to allow on server to allow cookies from client.

This repository contains a server and a client which communicate to each other to demonstrate the concept of CORS

One can get into this in more detailed manner via going to this link on MDN CORS - MDN

View on GitHub

Next ?

MDN has this amazing documentation on CORS one can look at.

DEV Community: anand chaudhary