Subresource query solution whose URLs contain embedded credentials is blocked

Question

http: // username: [e-mail] / snap

I used this built-in credential method to retrieve photos from IP cameras. Now that the Google Chrome update has blocked this method, I got this error:

[Fatigue] Requests for subresources whose URLs contain embedded credentials (for example, https://user: pass@host / ) are blocked. See https://www.chromestatus.com/feature/5669008342777856 for more details.

I tried another method using jQuery Ajax with basic auth. But instead, I get another error.

XMLHttpRequest cannot load example.com. The response to the request before the flight does not pass the access control check. There is no "Access-Control-Allow-Origin" header on the requested resource. Origin ' http://example.com ' is therefore not allowed. The response was an HTTP 401 status code.

I can’t make any changes to the web service in the IP camera to allow the cross domain request.

It seems that I have only 1 option left to get the image from the server side and send it to the browser? But this will lose the bandwidth of my server.

Any other suggestion / idea?

Thanks.

Answer 1

One way to do this is to use a request interceptor, such as ModHeader . It can be installed as an extension for Chrome, and it has the necessary ability to solve your problem.

So you need to follow this approach:

• Install the extension from the Chrome Web Store.
• Create a string by combining your username and password, for example, they are separated by a colon ( username:password ). Read Basic HTTP Authorization .
• Base64 Encodes the string you just created.
• Open the ModHeader settings panel.
• In the Request Headers section , add a header with the name Authorization and the value Basic encoded_string . Replace encoded_string with the string that you encoded in step 3. See the screenshot below.
• Now you can receive your photos directly without preceding username: password@ . This way your URL will look like http://example.com/snap .

Why does he solve the problem?

Basically what you did before passes the authorization data in the url itself. This is a common scenario, but obviously shows credentials and therefore is not a safe method.

Fortunately, this can also be done using the Authorization header. You just need to pass the credentials in encoded form. ModHeader does it for you. It intercepts every request of your browser and adds this header to it.

But be careful, it intercepts all requests. Therefore, it is recommended to use it only when retrieving photos from an IP camera. For all other situations, be sure to turn it off.