I am developing an app that needs to include the Tencent Captcha. Contrary to Google's, it is not well documented and drove me to some confusion that made me reverse-engineer its obfuscated code.
For a seamless implementation, I need to get a callback when it finishes it XHR calls. These callbacks are not provided by the captcha. So, I'll have to get them myself.
To do so, I've tried to wrap the XMLHttpRequest object before Angular's boot, but it throws some errors like: TypeError: Cannot set property '__zone_symbol__xhrSync' of undefined.
Reading a few tutorials, book chapters and articles, I understood that this wrapping is already done by Zone.js. However, I am still not very sure whether Zone.js also wraps non-angular HXR calls or not.
If yes, how to extend it to get a callback when these are finished. If not, how to make a proper implementation of an XHR interceptor for non-angular XHR calls in an Angular App ?
Here is an example of HXRInterceptor I've written, that won't work without error:
declare global {
interface Window {
XHRInterceptor: any;
}
}
type DataSent =
string | Document | Blob | ArrayBufferView |
ArrayBuffer | FormData | URLSearchParams | ReadableStream<Uint8Array>;
export class XHRInterceptor {
constructor() {
((original: Function): void => {
XMLHttpRequest.prototype.send = (data: DataSent): void => {
console.log('DATA SENT');
original.call(this, data);
};
})(XMLHttpRequest.prototype.send);
(function(original: Function) {
// @ts-ignore
XMLHttpRequest.prototype.open = (
method: string, url: string, async: boolean,
username?: string | null, password?: string | null
): void => {
console.log('DATA OPEN');
original.call(this, method, url, async, username, password);
};
})(XMLHttpRequest.prototype.open);
}
}
To call it, just put new XHRInterceptor(); in your main.ts.
Thank you.
