Solution to Subresource requests whose URLs contain embedded credentials are blocked

Question

http://username:password@domain.com/snap

I have been using this embedded credentials method to retrieve photos from IP Cameras. Now that Google Chrome update blocked this method, I got this error:

[Deprecation] Subresource requests whose URLs contain embedded credentials (e.g. 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 I am getting another error instead.

XMLHttpRequest cannot load example.com. Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://example.com' is therefore not allowed access. The response had HTTP status code 401.

I cannot do any changes to the Web Service in Ip camera to allow cross domain request.

Looks like I only have 1 option left, that is to retrieve the image from server side, and feed it to browser? But that will waste my server bandwidth.

Any more 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 to Chrome, and it has the necessary capability to resolve your issue.

So you need to follow this approach:

1. Install the extension from Chrome Web Store.
2. Create a string by concatenating your username and password such as they are separated by a colon (username:password). Read HTTP Basic Authorization.
3. Base64 Encode the string that you just created.
4. Open the settings panel of ModHeader.
5. In the Request Headers section, add a header with name as Authorization and value as Basic encoded_string. Replace encoded_string with the string you encoded in step 3. Refer to the snapshot below.
6. Now you can fetch your photos directly without preceding it with username:password@. So your URL will look something like http://example.com/snap.

Why does it solve the problem?

Basically what you were doing before is passing the authorization details in the URL itself. This is a common scenario but obviously reveals the credentials and thus, is not a secure method.

Fortunately, the same thing can be done using Authorization header as well. You just need to pass the credentials in encoded form. ModHeader does that for you. It intercepts each request of your browser and appends this header in it.

But beware, it intercepts all requests. Hence, it is advisable to only use it when you're fetching photos from the IP camera. For all other situations, remember to disable it.