How to intercept requests from external handlers using Cypress? - request

Does anyone know how a request that launches an external handler (such as an email app) can be intercepted to obtain the Request URL?
The in-browser request that launches the external app looks like this:
Request URL: mailto:example#example.com?Subject=Test&Body=test
Referrer Policy: strict-origin-when-cross-origin
I'm trying to do as follows and it doesn't work:
cy.intercept('mailto:**').as('mailto')
cy.get('#submitButton').click()
cy.wait('#mailto').its('request.url').should('contain.text', 'Subject')
It fails on cy.wait('#mailto') and the Routes from Cypress's interface presents the following (that it doesn't catch the request):
Method
Route Matcher
Stubbed
Alias
#
*
mailto:**
No
mailto
-
Also, already tried to use different Cypress versions: 6.4.0, 6.9.1 and 8.2.0.
Hope someone can help. Thanks in advance.

It turns out that mailto: doesn't seem to be a request, it's more like a link inside an <a> of your HTML...
A request usually has a method (GET, POST, DELETE) and a URL, and then you can intercept using cy.intercept.
It turns out that when you click on the link that contains Mailto a request is not created, this link serves to open your email client, so you need to create an assertion for this link in another way.
cy.intercept('POST', '/createuser*').as('createUser')
cy.wait('#createUser')
This is the way I use to intercept a request, making the test wait for the response before proceeding, it is for requests that your frontend makes to your backend server or third party services.

Related

check if an external url exists. cors-react

I am working locally with react and a nodejs server. I have configured my nodejs server to communicate with react and it works.
From react I want to check if external urls (for example youtube) exist, but the cors error always jumps.
I have tried with axios, XMLHttpRequest, fetch and I have used the header : 'Access-Control-Allow-Origin': '*',
I can remove the cors validation from the browser for testing, but what happens when I upload it to the server?
How can I check if an image, page, video... on an external server exists?
CORS is only applied when you try to do it directly from your browser. Then you can create your own server, create an API endpoint to check if a URL exists, and then, from your react page, you send requests to your API and your API check the page existence. – (by Pipe)

Set token in Header on API response

I am creating a login page in Angular. After login API call (POST), I get a token in response. In controller, I am trying to set this token in "common" header so that I can use it for authorization for all further API calls:
LoginSrv.authenticate($scope.credentials).then(
function(data){
$http.defaults.headers.common.Authorization = data.token;
$state.go('nextpage');
}
);
The next page there is again a POST API call. After this call when I check the request header in debugger I see that token in header. This response again navigate to third page (this time I am not setting header again). On third page when I call an API (GET or POST) the "Authorization" is not available in headers this time. I am not sure how this is removing by itself.
Given that your third request is cross domain, it appears your server is not correctly responding to the preflight browser OPTIONS request which is made to check what methods etc are available before it sends your request. It's not an Angular issue. One solution would be to configure your server to respond correctly to this OPTIONS request. This SO link (provided in the comments previously) explains in a bit more detail and discussions of potential solutions AngularJS performs an OPTIONS HTTP request for a cross-origin resource

Access-Control-Allow-Origin ATG Rest API

I am building a Portal using angularjs and ATG Rest API, It is giving an Error When I am trying to get Session confirmation Number using API:rest/model/atg/rest/SessionConfirmationActor/getSessionConfirmationNumber
Error:XMLHttpRequest cannot load http://IPNUMBER:Port/rest/model/atg/rest/SessionConfirmationActor/getSessionConfirmationNumber. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost' is therefore not allowed access.
API is working fine in POSTMAN, and from the direct browser query.
Please help me on this.
You best bet is to write a simple Pipeline servlet and add it to the RestPipeline configuration. The servlet would just inject the cors headers to all Rest requests.
import javax.servlet.*;
import javax.servlet.http.*;
import java.io.*;
import atg.servlet.*;
import atg.servlet.pipeline.*;
public class CORSHeaderServlet extends InsertableServletImpl{
public CORSHeaderServlet () {}
public void service (DynamoHttpServletRequest request,
DynamoHttpServletResponse response)
throws IOException, ServletException
{
//add headers to response.
response.addHeader("Access-Control-Allow-Origin" ,"*");
passRequest (request, response);
}
}
I didn't use this API, but problem is quite common. Have a look for example here (or any other source about CORS):
How does Access-Control-Allow-Origin header work?
If your web application and service have different domains (origins), this will not work until the service allows your application to request data. When you use Postman it works, because Postman does not send the header or uses origin, which is allowed. I don't really know how it works, but it does and it's normal.
If you are using locally hosted application just for testing purposes and both service and app will have the same origin, you have two easy solutions:
You can run web browser (e.g. Chrome) with web security disabled:
Disable same origin policy in Chrome. This disables CORS and eliminates the problem.
You can install Chrome extension called Allow-Control-Allow-Origin: *. When it's enabled, it sends origin which will be allowed by the service.
However, if your service will have different origin, then you will have to configure it to allow your application to request it.
Edit
Note one thing. If you send a request different than GET or with some custom headers, browsers will firstly send an OPTIONS request. It's called preflight request. You're service will have to handle it in order to work properly.

Symfony2 Oauth2 Server with authorization code grant, Symfony2 APIRest and Angular JS client

What I have:
-API Rest in Symfony2 using friendsofsymfony/rest-bundle exposing some resources.
-Oauth2 server in Symfony2 using FOSOAuthServerBundle.
-Client in Angular.js doing requests to the API Rest. This client currently gets to login via the authorization code grant (using Hello.js with a custom module), and gets the access token effectively.
I want these API resources secured, so:
-On API Rest app: I implemented the AuthenticationEntryPointInterface which I set as the entry_point in security.yml, to return 401 code and application/json content-type on rejected.
-Client intercepts 401 responses and sends the user to the login form.
-Client sends api rest requests with X-Access-Token set on header.
My current issues:
1) I'm not sure whether I should be setting X-Access-Token on client for requests, I understand this is the right way? Or should I leave it all to hello.js api methods?
2) I have no idea how to make the API Rest app "ask" the oauth server "is this token ok? who does it belong to?" Is this already solved in Symfony?
Thanks a lot for any answer or guideline. Feel free to require any further information or code for what I describe.
For anyone else facing a similar issue:
1) As for the client authenticated requests after login, I let hello.js hello(provider).api methods solve it. It sends access_token as a param. I didn't have to set X-Access-Token on the header or any other "hand made" touch.
2) I didn't find an out of the box solution by symfony for this. But this is what I did:
-Configured a before filter for the protected controller (see doc)
-In that method, I made a call to the API held on the OAuthServer (using this bundle)

is it possible to intercept the response to an HTTP OPTIONS preflight in AngularJS?

I'm trying to implement a simple interceptor that allows me to display a message along the lines of "cannot contact the server" in my Angular app. However as the API is on a different host I'm dealing with CORS pre-flight OPTIONS requests.
I've found that if the API is unavailable Chrome dev tools shows a 503 on the OPTIONS request but Angular's $http interceptor catches a 404 response to the subsequent GET request. I believe this is because the OPTIONS response did not contain the required CORS headers so the GET is actually never performed.
Is is possible to intercept the OPTIONS response? If all I see is a 404 I can't distinguish "server down" from "no such resource".
You can't intercept this request by design - the browser is "checking up" on you, making sure YOU should be allowed to make the request.
We've used three solutions to work around this:
If the problem is that you're using a development environment like NodeJS, and your domain names aren't matching (that is, if you normally wouldn't need to deal with this in Production) you can use a proxy. The https://github.com/substack/bouncyBounceJS NodeJS Module is an easy to use option. Then your Web service request domain will match the domain your page is on, and the check won't be triggered. (You can also use tricks like this in Production, although it can be easily abused!)
Also for temporary use, you can use something like Fiddler or Charles to manipulate the request by faking the required headers, or tell your browser not to check them (--disable-web-security in Chrome).
If you have this problem in Production, you either need to legitimately fix it (adjust the Web service handler to add the required headers - there are only two), or find a way to make the request in a way that doesn't trigger the check. For instance, if you control both the source and target domains, you can put a script on the target that makes the requests to itself. Run this in an IFRAME, invisibly. Then you can use things like postMessage() to communicate back and forth. Large services like Facebook use "XHR bridges" like this for the same reason.

Resources